Jak zoptymalizować obrazy dla stron internetowych
Obrazy zazwyczaj stanowią większość wagi strony. Pięć decyzji rozwiązuje większość problemów.
Zaktualizowano 1 września 2026
Obrazy są największym czynnikiem wpływającym na wagę strony na większości witryn, a element Largest Contentful Paint to obraz na większości stron. Ich optymalizacja to najbardziej efektywna praca nad wydajnością, a większość z niej to decyzje, a nie narzędzia.
To jest kolejność, która ma znaczenie, od największego do najmniejszego efektu.
Kroki
- 1
1. Podawaj właściwe wymiary
Zmierz największą szerokość CSS, jaką zajmuje obraz, i wyeksportuj go w około dwukrotnie większej rozdzielczości dla wyświetlaczy o wysokiej gęstości. Obraz główny o szerokości 1200 pikseli CSS potrzebuje źródła 2400 pikseli, a nie oryginalnego zdjęcia z aparatu o rozdzielczości 6000 pikseli. Ten pojedynczy krok zazwyczaj przewyższa wszystkie inne razem wzięte.
- 2
2. Używaj WebP, z AVIF tam, gdzie to możliwe
WebP jest o 25–35% mniejszy niż JPEG przy tej samej jakości wizualnej i jest obsługiwany wszędzie. AVIF idzie jeszcze dalej, ale koduje wolniej. Zachowaj awaryjny plik JPEG, jeśli musisz obsługiwać bardzo starych klientów.
- 3
3. Ustaw jakość według treści, a nie nawyku
75–85 dla zdjęć. Wyższa dla grafik z ostrymi krawędziami, gdzie artefakty kompresji są bardziej widoczne. Sprawdź wynik w rzeczywistym rozmiarze wyświetlania.
- 4
4. Zawsze ustawiaj szerokość i wysokość
Jawne wymiary pozwalają przeglądarce zarezerwować miejsce przed załadowaniem obrazu, co zapobiega przesunięciom układu. Jest to poprawka Cumulative Layout Shift, która nic nie kosztuje.
- 5
5. Leniwe ładowanie poniżej zagięcia, nigdy powyżej
Dodaj loading="lazy" do obrazów znajdujących się niżej na stronie. Nie stosuj lazy-loadingu dla obrazu LCP — to opóźnia dokładnie to, co jest mierzone.
Usuń metadane podczas eksportu
Profile kolorów EXIF i osadzone profile kolorów zwiększają wagę bez korzyści dla renderowania w sieci.
Używaj SVG dla logo i ikon
Logo wektorowe to zazwyczaj kilka kilobajtów i pozostaje ostre w każdym rozmiarze i gęstości.