Jak zoptymalizować obrazy na stronie: praktyczny poradnik

Obrazy często stanowią dużą część transferu i wpływają na odkrywanie, dekodowanie, układ oraz Largest Contentful Paint. Optymalizacja może dać znaczące zyski, lecz stała oszczędność lub wynik rankingu nie dotyczy każdej strony. Oto proces mierzalny krok po kroku.

Dlaczego optymalizacja obrazów jest ważniejsza niż kiedykolwiek

Raport HTTP Archive o wadze stron pokazuje, że obrazy pozostają istotne, choć mediany się zmieniają. Largest Contentful Paint (LCP) mierzy renderowanie największego kwalifikującego się elementu viewportu; często, ale nie zawsze, jest nim obraz.

Progi Google uznają LCP do 2.5 sekundy za dobre, a ponad 4 za słabe na 75. percentylu wizyt. Praca nad obrazem może przesunąć stronę, gdy zasób LCP jest wąskim gardłem, ale sama nie gwarantuje Core Web Vitals ani pozycji.

Krok 1: Wybierz odpowiedni format

Format silnie wpływa na rozmiar i funkcje. Porównanie jest jakościowe, bo wyniki zależą od źródła, kodera, ustawień i celu jakości:

WebP jest użytecznym kandydatem domyślnym, nie uniwersalną odpowiedzią. Jeśli proces i odbiorcy wspierają AVIF, testuj go jako wcześniejsze <source> z zapasowym WebP lub JPEG. W Vizua można zamienić JPG na WebP lub na AVIF; plik jest przetwarzany w przeglądarce, nie na naszym serwerze.

Więcej w porównaniu WebP i AVIF oraz wyjaśnieniu kompresji stratnej i bezstratnej.

Krok 2: Zmniejsz wymiary do rzeczywistego rozmiaru wyświetlania

Zdjęcie 4000 × 3000 pikseli wyświetlane jako 800 × 600 ma znacznie więcej pikseli niż potrzebuje slot. Responsywny ekran dużej gęstości może wymagać większego wariantu, ale oryginał z aparatu zwykle dodaje zbędny transfer i dekodowanie.

Zasada to oferowanie wariantów bliskich rozmiarowi i gęstości renderowania. Użyj srcset i sizes, uwzględniając szerokość, gęstość urządzenia, jakość, zoom i art direction zamiast stałego mnożnika „Retina”.

Przykładowe rozmiary początkowe do dostosowania:

• Hero pełnej szerokości: zacznij od największego slotu i twórz warianty dla właściwych gęstości i punktów
• Obraz treści: dopasuj do kolumny i szerszych stanów responsywnych
• Miniatura: twórz wariant bliski każdemu rozmiarowi karty zamiast używać hero
• Awatar: uwzględnij koło lub kwadrat, gęstość i szczegółowy profil

Przed kompresją utwórz warianty przez zmianę rozmiaru Vizua. Oszczędność zależy od początkowej i docelowej liczby pikseli; mierz pliki.

Krok 3: Skompresuj z odpowiednim ustawieniem jakości

Po wyborze formatu i rozmiaru dostrój koder. Skale jakości są nieliniowe i nie są standardowe między koderami lub formatami. Niższa wartość zwykle zamienia więcej informacji na mniej bajtów przy stratach, ale rozmiar i widoczną zmianę trzeba zmierzyć.

Zalecane ustawienia jakości:

• JPEG: 75–85 może być ostrożnym zakresem początkowym. Skale różnią się; sprawdź wynik.
• WebP: 75–80 to zakres początkowy, nie gwarantowany odpowiednik wartości JPEG.
• AVIF: 60–75 może być początkiem w części narzędzi; skale i kodery różnią się.
• PNG: najpierw mocniejsza kompresja bezstratna. Paleta do 256 wpisów może oszczędzić więcej, ale jest stratną redukcją koloru i wymaga kontroli.

Kompresor JPEG Vizua pozwala ustawić jakość i obejrzeć wynik. Szczegółowa metoda: kompresja bez utraty jakości.

Krok 4: Dostarczaj obrazy efektywnie

Dobra kompresja to dopiero połowa sukcesu. Sposób, w jaki dostarczasz obrazy do przeglądarki, ma równie duże znaczenie dla wydajności.

Ustaw jawne wymiary

Daj każdemu <img> dokładne wewnętrzne width i height albo zarezerwuj slot regułą. Przeglądarka wcześnie ustali proporcje. Zmniejsza to ruch obrazu, choć fonty, wstawki, animacje i błędne style nadal wpływają na Cumulative Layout Shift (CLS).

Leniwie ładuj obrazy poniżej zgięcia

Rozważ loading="lazy" dla obrazów wystarczająco daleko od początkowego viewportu. Nie stosuj mechanicznie dla LCP lub treści potrzebnej natychmiast. Heurystyki, karuzele, druk, szybkie przewijanie i ukryte układy wymagają testów.

Priorytetyzuj baner główny

Nie odkładaj prawdopodobnego LCP. Rozważ fetchpriority="high", jeśli naprawdę zasługuje na wczesne pasmo, i zapewnij odkrycie w początkowym HTML. Nie dawaj wysokiego priorytetu szeroko; potwierdź efekt w śladzie i danych.

Użyj responsywnych obrazów

srcset i sizes dają warianty i opisują slot. Przeglądarka uwzględnia viewport, gęstość, cache i implementację. sizes musi pasować do układu; błąd wybierze zbyt duży lub mały wariant.

Krok 5: regularnie kontroluj i mierz

Optymalizacja nie jest jednorazowym zadaniem. Każdy nowy obraz, który dodasz, to potencjalna regresja.

• PageSpeed Insights: uruchom PageSpeed Insights na typowych stronach. Oddziel LCP terenowe i laboratoryjne i sprawdź aktualne diagnozy, nie zmienną etykietę.
• Network DevTools: sortuj żądania według rozmiaru i sprawdzaj duże obrazy w kontekście. Dopasuj rozmiary, format, kompresję, cache i priorytet do roli zamiast wspólnego limitu KB.
• Automatyzuj: dodaj optymalizację do budowania, aby znajdować za duże obrazy przed publikacją.

Szybka lista kontrolna

• Twórz i porównuj odpowiednie JPEG, WebP, AVIF, PNG lub SVG
• Zmieniaj rozmiar do rzeczywistego wyświetlenia, nie szerzej niż trzeba
• Zacznij od ostrożnych ustawień, porównaj bajty i wygląd; nie zrównuj liczb jakości formatów
• Rezerwuj dokładny slot dla każdego <img>, zwykle przez wewnętrzne width i height
• Rozważ fetchpriority="high" dla LCP, potem mierz
• Odkładaj właściwe obrazy poza ekranem; testuj przewijanie i układ
• Używaj srcset/sizes do responsywnego dostarczania
• Ustalaj budżety na podstawie strony, odbiorców i danych terenowych
• Usuń zbędne prywatne metadane, zachowując potrzebne profile i dane — EXIF i prywatność
• Regularnie audytuj za pomocą PageSpeed Insights

Najczęściej zadawane pytania