Obrazy to ponad 40% wagi strony. WebP i AVIF dają lepszą kompresję niż JPG/PNG — porównanie formatów, element <picture> z fallbackiem i szybka ściągawka do codziennej pracy.
Format graficzny to nie rozszerzenie pliku — to decyzja o wydajności
Obrazy odpowiadają za ponad 40% średniej wagi strony internetowej (dane HTTP Archive, 2024). Format, w jakim je serwujesz, wpływa bezpośrednio na czas ładowania (LCP w Core Web Vitals), zużycie transferu mobilnego i pozycję w wynikach wyszukiwania. JPG i PNG nadal dominują w internecie, ale WebP i AVIF oferują lepszą kompresję przy porównywalnej lub wyższej jakości — a przeglądarki obsługują je od lat.
W tym artykule porównujemy formaty graficzne z perspektywy praktycznej: co wybrać do zdjęć, co do ikon, jak serwować obrazy w wielu formatach i na co uważać przy migracji.
Kompresja stratna i bezstratna — krótkie przypomnienie
Kompresja stratna usuwa dane obrazu, które oko ludzkie trudno rozróżnia — szczegóły w cieniach, subtelne przejścia kolorystyczne, szum. Wynik: mniejszy plik, ale przy agresywnej kompresji widoczne artefakty (rozmazanie, bloki). Formaty: JPG, WebP (tryb stratny), AVIF.
Kompresja bezstratna zachowuje każdy piksel. Plik jest większy, ale jakość identyczna z oryginałem. Formaty: PNG, WebP (tryb bezstratny), AVIF (tryb bezstratny), TIFF. Stosujemy ją do grafik z ostrymi krawędziami (ikony, logo, screenshoty UI), gdzie artefakty kompresji stratnej byłyby widoczne.
WebP — praktyczny standard od 2018 roku
WebP to format opracowany przez Google, który obsługuje kompresję stratną, bezstratną, przezroczystość (kanał alfa) i animacje. Według testów Google przy kompresji stratnej WebP daje pliki o 25–34% mniejsze niż JPG przy porównywalnej jakości (SSIM). Przy kompresji bezstratnej — o 26% mniejsze niż PNG.
Wsparcie przeglądarek jest dziś pełne: Chrome, Firefox, Edge, Safari (od wersji 16, 2022), Opera. Jedyny istotny brak to starsze wersje Safari na iOS 15 i wcześniejszych — ale ich udział rynkowy spadł poniżej 2%.
W naszych projektach WebP jest domyślnym formatem dla zdjęć na stronach. W aplikacjach webowych serwujemy go przez element <picture> z fallbackiem na JPG:
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="..." loading="lazy">
</picture>AVIF — lepsza kompresja, wolniejsze kodowanie
AVIF (AV1 Image File Format) bazuje na kodeku wideo AV1 i oferuje jeszcze agresywniejszą kompresję niż WebP. Netflix, który współtworzył AV1, opublikował testy pokazujące 50% oszczędności rozmiaru w porównaniu z JPG przy zachowaniu porównywalnej jakości.
Wsparcie przeglądarek: Chrome (od 85, 2020), Firefox (od 93, 2021), Safari (od 16.4, 2023). Edge przez silnik Chromium.
Zalety AVIF:
- Lepsza kompresja niż WebP, szczególnie przy niskich bitrate'ach (wyraźna przewaga w zdjęciach z gradientami i dużymi jednolitymi obszarami).
- Obsługa HDR (10-bit, 12-bit) i szerszych gamutów (Display P3, Rec. 2020).
- Przezroczystość i animacje.
Ograniczenia:
- Czas kodowania — AVIF koduje się wielokrotnie wolniej niż WebP lub JPG. Przy dużej liczbie obrazów (e-commerce, portale) potrzebny jest pipeline z kolejkowaniem i cache'owaniem.
- Maksymalny rozmiar — specyfikacja ogranicza wymiary kafelka do 8193×4320 px. Większe obrazy wymagają tilingowania, co nie wszystkie narzędzia obsługują transparentnie.
- Edytory graficzne — wsparcie rośnie (Photoshop od 2023, GIMP od 2.10.32), ale nie jest jeszcze tak powszechne jak dla JPG/PNG.
PNG — nadal niezastąpiony w swojej niszy
PNG nie zamiera — jest standardem dla grafik wymagających bezstratnej kompresji i przezroczystości: ikony, logo, elementy UI, screenshoty z ostrymi krawędziami tekstu. W CSS sprite'y, favicony i proste ilustracje nadal serwujemy w PNG (lub SVG, jeśli grafika jest wektorowa).
Wada: rozmiar. PNG z przezroczystością bywa 3–5× większy niż WebP bezstratny z tym samym obrazem. Jeśli serwujesz dużo ikon jako PNG, warto rozważyć migrację na SVG (dla wektorów) lub WebP bezstratny (dla rastrów).
SVG — wektor, nie raster
SVG to osobna kategoria — format wektorowy, nie rastrowy. Skaluje się bez utraty jakości do dowolnego rozmiaru, waży kilkaset bajtów do kilkunastu KB (po optymalizacji SVGO) i jest indeksowalny przez wyszukiwarki. Idealne zastosowania: ikony, logotypy, schematy, proste ilustracje, wykresy.
SVG nie nadaje się do zdjęć — fotografii nie da się sensownie zwektoryzować. Ale jako format do ikon i grafik UI jest lżejszy i bardziej elastyczny niż PNG. Więcej o SVG pisaliśmy w artykule SVG — N rzeczy, których możesz nie wiedzieć.
GIF i jego następcy
GIF (256 kolorów, bezstratny, z animacją) technologicznie przegrał — animowany WebP i AVIF dają lepszą jakość przy mniejszym rozmiarze. Ale GIF wciąż żyje jako format kulturowy (memy, reakcje) i jest wspierany przez każdą platformę. W kontekście technicznym — jeśli potrzebujesz animacji na stronie, rozważ animowany WebP, Lottie (animacje wektorowe) lub po prostu wideo w formacie MP4 z atrybutem autoplay muted loop.
HEIC — format Apple, problem kompatybilności
HEIC (High Efficiency Image Container) to domyślny format zdjęć na iPhone'ach (od iOS 11). Oferuje kompresję porównywalną z WebP, ale poza ekosystemem Apple jest słabo wspierany — przeglądarki go nie obsługują, Windows wymaga dodatkowego kodeka. Jeśli przyjmujesz zdjęcia od użytkowników (np. w aplikacji), musisz liczyć się z HEIC na wejściu i konwertować do WebP/JPG po stronie serwera.
JPEG 2000 — egzotyka w przeglądarce, standard w archiwizacji
JPEG 2000 oferuje lepszą kompresję niż JPG i wsparcie dla progresywnego ładowania, ale nigdy nie zdobył przeglądarek — jedynym wyjątkiem był Safari (do wersji 16). Dziś jego nisza to archiwizacja (biblioteki cyfrowe, muzea), medycyna (DICOM) i geoinformatyka (GeoTIFF/JP2). W kontekście webowym — nie ma powodu, żeby go używać.
Jak serwować obrazy w wielu formatach
Element <picture> z wieloma <source> pozwala przeglądarce wybrać najlepszy format, który obsługuje. Kolejność ma znaczenie — przeglądarka bierze pierwszy pasujący:
- AVIF (najlepsza kompresja, jeśli przeglądarka wspiera).
- WebP (dobra kompresja, pełne wsparcie).
- JPG/PNG (fallback dla najstarszych przeglądarek).
Po stronie serwera można też użyć negocjacji przez nagłówek Accept — serwer sprawdza, czy przeglądarka wysyła image/avif lub image/webp, i serwuje odpowiednią wersję pod tym samym URL. Apache, Nginx i CDN-y (Cloudflare, Fastly) wspierają to natywnie.
Co wybrać — szybka ściągawka
- Zdjęcia na stronie → WebP (stratny), z AVIF jako upgrade i JPG jako fallback.
- Ikony, logo, schematy → SVG. Jeśli musi być raster → WebP bezstratny lub PNG.
- Screenshoty UI, grafiki z tekstem → PNG lub WebP bezstratny.
- Animacje → animowany WebP, Lottie lub MP4.
- Druk i archiwizacja → TIFF (bezstratny, z profilem ICC) lub JPEG 2000.
Optymalizacja grafik to jeden z najszybszych sposobów na poprawę wydajności strony — i pozycji w wynikach wyszukiwania. Jeśli budujesz system dedykowany lub stronę internetową i chcesz mieć pewność, że obrazy nie spowalniają ładowania — porozmawiajmy.
Źródła
- MDN Web Docs — Image file type and format guide — przewodnik po formatach graficznych w przeglądarkach.
- Google Developers — WebP — oficjalna dokumentacja formatu WebP.
- W3C — PNG Specification — specyfikacja formatu PNG.
- Google — Najlepsze praktyki dotyczące obrazów w Google — wytyczne SEO dla grafik.
- HTTP Archive — Page Weight Report — dane o średniej wadze stron i udziale obrazów.
LinkedIn/desi9n-pl 
FB/desi9npl 
@desi9n.pl