Obrazy: jak zdjąć połowę wagi strony w jednym sprincie

Formaty, rozmiary, leniwe ładowanie i priorytety. Praktyczna kolejność prac, która zmniejsza wagę strony o połowę bez utraty jakości.

Wydajność · Opublikowano: 27 maja 2026 · 2 min czytania · Анна Ковалёва

W typowym serwisie obrazy to 50–70% wagi strony. Niemal zawsze ładują się przy tym w rozdzielczości, której użytkownik nie zobaczy, w formacie sprzed dekady i bez podanych wymiarów. To najbardziej przewidywalne źródło przyspieszenia.

Krok 1: przestańcie wysyłać zbędne piksele

Obraz o szerokości 2400 px w kontenerze 600 px to szesnastokrotność potrzebnych danych (powierzchnia rośnie kwadratowo). Rozwiązaniem jest srcset z prawdziwymi punktami załamania układu:

<img src="/img/hero-800.jpg" srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 800px" width="800" height="450" alt="…">

Atrybuty width i height są obowiązkowe: bez nich przeglądarka nie zna proporcji i strona skacze — bezpośredni wkład w CLS.

Krok 2: zmieńcie format

AVIF jest średnio o 40–50% lżejszy od JPEG przy tej samej jakości, WebP o 25–30%. Oba obsługują wszystkie aktualne przeglądarki. Układ z <picture> daje wariant zapasowy:

<picture> <source type="image/avif" srcset="/img/hero.avif"> <source type="image/webp" srcset="/img/hero.webp"> <img src="/img/hero.jpg" width="800" height="450" alt="…"> </picture>

Dla zrzutów interfejsu i wykresów z płaskimi wypełnieniami PNG bywa lżejszy od AVIF — sprawdzajcie, zamiast ślepo trzymać się reguły.

Krok 3: ustawcie priorytety

Leniwe ładowanie nie jest darmowe. loading="lazy" na obrazie pierwszego ekranu spowalnia LCP, bo odkłada najważniejsze żądanie. Reguła jest prosta:

• obrazy nad linią zgięcia — fetchpriority="high", bez lazy;
• cała reszta — loading="lazy" i decoding="async".

Krok 4: usuńcie to, co zbędne

Najskuteczniejsza optymalizacja to nie optymalizować, tylko skasować. Dekoracyjne tło niewidoczne na mobile; karuzela ośmiu bannerów, do której trzeciego dociera 4% użytkowników; ikony w PNG, które powinny być SVG.

Co mierzyć

Patrzcie nie na „wynik", lecz na dwie liczby: wagę obrazów na stronie i czas do LCP w sieci mobilnej. Jeśli waga spadła o połowę, a LCP nie drgnęło — wąskie gardło nie jest w obrazach, tylko w kolejce żądań albo w odpowiedzi serwera, i dalsza optymalizacja grafiki nie ma sensu.

Ustalcie budżet: na przykład nie więcej niż 400 KB obrazów na stronę listingu. Budżet sprawdzany w CI działa lepiej niż jakiekolwiek ustalenia.