Sekcja Możliwości w raporcie Lighthouse zawiera wszystkie obrazy na stronie, które mają nieodpowiedni rozmiar, oraz możliwe jest oszczędności w kibibajtach (KiB). Zmień rozmiar tych obrazów, aby zaoszczędzić dane i skrócić czas wczytywania strony:
Jak Lighthouse oblicza ponadwymiarowe obrazy
Dla każdego obrazu na stronie Lighthouse porównuje rozmiar wyrenderowanego obrazu z rozmiarem rzeczywistego obrazu. Rozmiar renderowany uwzględnia też współczynnik pikseli urządzenia. Jeśli rozmiar po wyrenderowaniu jest o co najmniej 4 KiB mniejszy niż rozmiar rzeczywisty, obraz nie przejdzie kontroli.
Strategie dotyczące właściwego rozmiaru obrazów
Idealnie byłoby, gdyby strona nigdy nie wyświetlała obrazów większych niż ta wyrenderowana przez użytkownika. Większe liczby tylko skutkują marnowaniem bajtów i wydłuża czas wczytywania strony.
Główna strategia wyświetlania obrazów o odpowiednim rozmiarze nosi nazwę „obrazów elastycznych”. W przypadku obrazów elastycznych generujesz wiele wersji każdego obrazu, a następnie określasz, której wersji chcesz użyć w kodzie HTML lub CSS, korzystając z zapytań o multimedia, wymiarów widocznego obszaru itp. Dodatkowo RespImageLint jest przydatnym Bookletem do identyfikowania optymalnych wartości srcset i sizes dla obrazów. Więcej informacji o tych atrybutach znajdziesz w artykule Wyświetlanie obrazów elastycznych.
Sieci CDN obrazów to kolejna główna strategia wyświetlania obrazów o odpowiednim rozmiarze. Sieci CDN na potrzeby obrazów możesz traktować jak interfejsy API usług internetowych do przekształcania obrazów.
Inną strategią jest użycie formatów obrazów wektorowych, takich jak SVG. Mając ograniczoną ilość kodu, obraz SVG można skalować do dowolnego rozmiaru. Więcej informacji znajdziesz w artykule Zastępowanie złożonych ikon SVG.
Narzędzia takie jak gulp-responsive lub responsive-images-generator mogą zautomatyzować proces konwersji obrazu na wiele formatów. Istnieją też sieci CDN na potrzeby wyświetlania obrazów, które umożliwiają generowanie wielu wersji, np. gdy przesyłasz obraz lub pobierasz go ze strony.
Wskazówki dotyczące stosu
AMP
Skorzystaj z
amp-img
obsługi
srcset
komponentów z obrazem, których chcesz użyć w zależności od rozmiaru ekranu. Przeczytaj też artykuł o obrazach elastycznych z atrybutem srcset, size [rozmiary i wysokość].
Angular
Do zarządzania punktami przerwania obrazów możesz używać narzędzia BreakpointObserver z Komponentu Dev Kit (CDK).
Drupal
Korzystaj z wbudowanej funkcji Style obrazów elastycznych (dostępnej w wersji Drupal 8 i nowszych) podczas renderowania pól obrazów za pomocą trybów widoku, widoków lub obrazów przesłanych w edytorze WYSIWYG.
Gatsby'ego
Aby wygenerować wiele mniejszych obrazów na smartfony i tablety, użyj wtyczki gatsby-image. Może też tworzyć obiekty zastępcze obrazów SVG, aby usprawnić leniwe ładowanie.
Joomla
Rozważ użycie wtyczki do elastycznych obrazów.
WordPress
Prześlij obrazy bezpośrednio przez bibliotekę multimediów, by mieć pewność, że wymagane rozmiary obrazów są dostępne, a potem wstaw je z biblioteki multimediów lub użyj widżetu obrazów, aby zapewnić użycie optymalnych rozmiarów obrazów (także w przypadku elastycznych punktów przerwania). Unikaj używania obrazów Full Size, chyba że mają one odpowiednie wymiary. Zobacz Wstawianie obrazów do postów i stron.