Ta reguła się uruchamia, gdy PageSpeed Insights wykryje, że obrazy na stronie można zoptymalizować, by zmniejszyć rozmiar pliku bez znacznego pogorszenia jakości obrazu.
Opis
Obrazy często odpowiadają za większość pobranych bajtów na stronie. W rezultacie optymalizacja obrazów często przynosi największe korzyści z oszczędności bajtów i poprawy wydajności: im mniej bajtów musi pobrać przeglądarka, tym mniejsza jest konkurencja o przepustowość łącza klienta i szybciej przeglądarka może pobierać i renderować zawartość ekranu.
Rekomendacje
Aby znaleźć optymalny format i strategię optymalizacji komponentów z obrazem, musisz przeprowadzić szczegółową analizę wielu wymiarów, takich jak rodzaj kodowanych danych, możliwości związane z formatem obrazu, ustawienia jakości czy rozdzielczość. Zastanów się też, czy niektóre obrazy najlepiej wyświetlać w formacie wektorowym, czy można uzyskać pożądane efekty za pomocą CSS i jak dostarczać odpowiednio przeskalowane zasoby na różne urządzenia.
Optymalizacja wszystkich typów obrazów
- Postępuj zgodnie ze sprawdzonymi metodami wyświetlania obrazów elastycznych.
- Postępuj zgodnie z listą kontrolną optymalizacji poszczególnych obrazów.
Optymalizacje obrazów GIF, PNG i JPEG
Formaty GIF, PNG i JPEG stanowią 96% całego ruchu związanego z obrazami w internecie. Ze względu na swoją popularność PageSpeed Insights podaje konkretne zalecenia dotyczące optymalizacji. Dla ułatwienia możesz pobrać zoptymalizowane obrazy bezpośrednio z PageSpeed Insights (która korzysta z biblioteki optymalizacji obrazów ze strony modpagespeed.com).
Możesz też użyć takich narzędzi jak plik binarny convert utworzony przez ImageMagick, który pozwala zastosować podobne optymalizacje – zobacz przykładowe instrukcje poniżej.
Jeśli korzystasz z narzędzi innych firm, pamiętaj, że po przekształceniu obrazy mogą się powiększyć, jeśli już były dobrze zoptymalizowane. Jeśli tak się stanie, użyj oryginału.
GIF i PNG to formaty bezstratne, ponieważ w trakcie kompresji obraz nie jest w żaden sposób zmieniany. W przypadku zdjęć nieruchomych PNG zapewnia lepszy współczynnik kompresji i lepszą jakość obrazu. W przypadku animowanych obrazów rozważ użycie elementu video zamiast GIF-a, aby uzyskać lepszą kompresję.
- Zawsze konwertuj GIF-y na PNG, chyba że oryginał jest animowany lub ma mały rozmiar (mniej niż kilkaset bajtów).
- Zarówno w przypadku GIF-ów, jak i PNG usuń kanał alfa, jeśli wszystkie piksele są nieprzezroczyste.
Korzystając z tego polecenia, możesz np. użyć funkcji konwersji binarnej, aby zoptymalizować obrazy GIF i PNG (parametry w nawiasach kwadratowych są opcjonalne):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG jest formatem stratnym. Proces kompresji usuwa widoczne szczegóły z obrazu, ale współczynnik kompresji może być 10 razy większy niż w przypadku plików GIF czy PNG.
- Obniż jakość do 85, jeśli jest wyższa. Przy jakości wyższej niż 85 zdjęcie szybko staje się większe, ale poprawa wizualna jest niewielka.
- Zmniejsz próbkowanie kolorów do 4:2:0, ponieważ ludzki system wzroku jest mniej czuły na kolory niż luminancja.
- Używaj formatu progresywnego w przypadku obrazów większych niż 10 tys. bajtów. Pliki progresywne JPEG mają zwykle wyższy współczynnik kompresji niż bazowy JPEG w przypadku dużych obrazów i mają zalety stopniowego renderowania.
- Jeśli zdjęcie jest czarno-białe, użyj przestrzeni kolorów w skali szarości.
Korzystając z tego polecenia, możesz np. użyć funkcji konwersji binarnej, aby zoptymalizować obrazy JPEG (parametry w nawiasach kwadratowych są opcjonalne):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
Prześlij opinię
Czy ta strona była pomocna?