Jak sprawić, by obrazy na twojej stronie ładowały się szybciej (bez rozmycia)

Dlaczego waga obrazów ma znaczenie

Najwolniejszym elementem strony jest zwykle jej największy obraz, i często właśnie to przeglądarka mierzy jako Largest Contentful Paint (LCP). Core Web Vitals od Google uznają LCP poniżej 2,5 sekundy za dobry. Jedno zdjęcie główne o wadze 3 MB w połączeniu mobilnym może samo zużyć cały ten budżet.

1. Serwuj obrazy w rozmiarze, w jakim są wyświetlane

Nie ma sensu wysyłać zdjęcia o szerokości 4000 pikseli w miejsce, które pokazuje je w szerokości 800 pikseli. Jako zasada praktyczna obraz powinien mieć co najwyżej około dwukrotność szerokości wyświetlania, co utrzymuje go ostrym na ekranach o wysokiej gęstości. Typowe szerokości: 1600–2000 px dla zdjęcia głównego na całą szerokość, 800–1200 px dla obrazów w artykułach, 300–400 px dla miniatur.

2. Używaj nowoczesnego formatu

Pliki WebP są zwykle o 25–35% mniejsze niż JPG przy podobnej jakości, a wszystkie współczesne przeglądarki je obsługują. PNG stosuj tylko tam, gdzie potrzebujesz bezstratnej grafiki lub przezroczystości. Jeśli musisz obsługiwać starsze oprogramowanie, zachowaj JPG jako rozwiązanie zastępcze. Szczegóły w JPG vs PNG vs WebP.

3. Kompresuj do rozsądnej wagi

To orientacyjne cele, nie reguły: zdjęcie główne poniżej ok. 200 KB, obrazy w artykułach poniżej ok. 100 KB i miniatury poniżej ok. 30 KB. Ustaw cel i pozwól narzędziu znaleźć najwyższą jakość, która go spełnia, zamiast kręcić suwakiem na oko.

4. Ładuj z opóźnieniem obrazy poniżej pierwszego ekranu

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Leniwe ładowanie (lazy loading) odracza obrazy do momentu, gdy odwiedzający przewinie stronę w ich pobliże. Nie stosuj go do zdjęcia głównego na górze strony — ono powinno ładować się od razu, bo zwykle jest elementem LCP.

5. Zawsze ustawiaj szerokość i wysokość

Gdy wymiary są w HTML, przeglądarka rezerwuje odpowiednią ilość miejsca, zanim obraz dotrze, dzięki czemu strona nie skacze podczas ładowania (ten skok mierzy się jako Cumulative Layout Shift). Opisowy atrybut alt pomaga w dostępności i wyszukiwaniu obrazów.

6. Oferuj kilka rozmiarów za pomocą srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

Przeglądarka wybiera najmniejszy plik, który jest dostatecznie ostry dla ekranu odwiedzającego, dzięki czemu telefon nie pobiera wersji na komputer.

Jak sprawdzić swoją pracę

Przepuść stronę przez PageSpeed Insights lub Lighthouse w narzędziach deweloperskich Chrome. Oba wskazują obrazy zbyt duże i niezoptymalizowane oraz szacują, ile dokładnie bajtów byś zaoszczędził.

Przygotowanie plików

1. Przekonwertuj obraz na WebP.
2. Ustaw potrzebną szerokość w narzędziu do zmiany rozmiaru — z zablokowanymi proporcjami.
3. Ustaw maksymalną wielkość pliku i sprawdź wynik suwakiem przed/po.
4. Wyeksportuj jeden plik dla każdej szerokości, której chcesz użyć w srcset.

Przy każdym eksporcie pracuj od oryginału. Kompresowanie już skompresowanej kopii kosztuje więcej jakości niż jednorazowe skompresowanie źródła.

Najczęściej zadawane pytania