W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich obrazów na stronie, które mają nieodpowiednią wielkość, wraz z potencjalnymi oszczędnościami w kibibajtach (KiB). Aby oszczędzać dane i przyspieszyć wczytywanie stron, zmień rozmiar tych obrazów:
Jak Lighthouse oblicza rozmiar obrazów
W przypadku każdego obrazu na stronie Lighthouse porównuje rozmiar wyrenderowanego obrazu z rozmiarem rzeczywistego obrazu. Wyrenderowany rozmiar uwzględnia też współczynnik pikseli urządzenia. Jeśli rozmiar wyrenderowany jest mniejszy o co najmniej 4 KiB od rzeczywistego rozmiaru, obraz nie przechodzi weryfikacji.
Strategie dotyczące prawidłowego doboru rozmiaru obrazów
W idealnej sytuacji strona nigdy nie powinna wyświetlać obrazów większych niż wersja renderowana na ekranie użytkownika. Wszystko, co jest większe, powoduje tylko marnowanie bajtów i spowalnia wczytywanie strony.
Główna strategia wyświetlania obrazów o odpowiednich rozmiarach to „obrazy elastyczne”. W przypadku obrazów elastycznych generujesz wiele wersji każdego obrazu, a następnie określasz, której wersji użyć w kodzie HTML lub CSS za pomocą zapytań o media, wymiarów widoku i tak dalej. Poza tym RespImageLint jest przydatnym skryptem do identyfikowania optymalnych wartości srcset i sizes dla Twoich obrazów. Więcej informacji o tych atrybutach znajdziesz w artykule Przesyłanie obrazów elastycznych.
CDN obrazów to kolejna główna strategia służąca do wyświetlania obrazów o odpowiednich rozmiarach. Sieci CDN obrazów można porównać z interfejsami API usług internetowych służącymi do przekształcania obrazów.
Inną strategią jest używanie formatów obrazów wektorowych, takich jak SVG. Dzięki ograniczonej ilości kodu obraz SVG może być skalowany do dowolnego rozmiaru. Więcej informacji znajdziesz w artykule Zastępowanie złożonych ikon plikami SVG.
Narzędzia takie jak gulp-responsive czy responsive-images-generator mogą pomóc w zautomatyzowaniu procesu konwertowania obrazu na różne formaty. Istnieją też sieci CDN związane z obrazami, które umożliwiają generowanie wielu wersji, podczas przesyłania obrazu lub żądania go ze strony.
Wskazówki dotyczące stosu
AMP
Użyj obsługi komponentu amp-img dla atrybutu srcset, aby określić, których zasobów graficznych użyć w zależności od rozmiaru ekranu. Przeczytaj też artykuł o elastycznych obrazach z atrybutem srcset, rozmiarami i wysokością.
Angular
Do zarządzania punktami przerwania obrazów proponujemy używać narzędzia BreakpointObserver z pakietu CDK (Component Dev Kit).
Drupal
Upewnij się, że używasz natywnych stylów obrazów elastycznych dostępnych w pliku Drupal. Używaj stylów obrazów elastycznych do renderowania pól obrazów za pomocą trybów widoku, widoków lub obrazów przesłanych w edytorze WYSIWYG.
Gatsby
Użyj wtyczki gatsby-image, aby wygenerować kilka mniejszych obrazów na potrzeby smartfonów i tabletów. Może też tworzyć obiekty zastępcze obrazów SVG do efektywnego leniwego ładowania.
Joomla
Sugerujemy skorzystanie z wtyczki obsługującej obrazy elastyczne.
WordPress
Przesyłaj obrazy bezpośrednio przez bibliotekę multimediów, aby mieć pewność, że wymagane rozmiary obrazów są dostępne, a następnie wstawiaj je z biblioteki multimediów lub używaj widżetu obrazów, by zapewnić użycie optymalnych rozmiarów obrazów (także w dynamicznych punktach przerwania). Unikaj używania obrazów Full Size, chyba że wymiary są adekwatne do danego zastosowania. Przeczytaj artykuł Wstawianie obrazów do postów i stron.