JPG vs WebP vs AVIF: porównanie formatów kompresji

Jeśli interesujesz się wydajnością webową i zaglądałeś ostatnio w temat optymalizacji obrazów, widziałeś te trzy formaty wymieniane w kółko: JPG, WebP i AVIF. Wszystkie trzy robią w zasadzie tę samą robotę - kompresują zdjęcia - ale zajmują bardzo różne punkty na skali kompromisu między kompatybilnością a kompresją.

Praktyczne porównanie: jak działają, ile faktycznie są mniejsze, gdzie są wspierane i kiedy używać którego.

W skrócie

Format	Wydany	Rozmiar (zdjęcie, ta sama jakość)	Wsparcie przeglądarek	Prędkość kodowania
JPG	1992	Baza (100%)	100%	Szybkie
WebP	2010	65-75%	~96%	Średnie
AVIF	2019	40-55%	~92%	Wolne

JPG wygrywa na kompatybilności i prędkości kodowania. WebP to obecny złoty środek dla webu. AVIF produkuje najmniejsze pliki, ale kodowanie zajmuje znacząco więcej czasu.

Jak działają pod maską

JPG

JPG kompresuje obrazy, dzieląc je na bloki 8×8 pikseli i transformując każdy blok w komponenty częstotliwościowe przez dyskretną transformację kosinusową. Wysokoczęstotliwościowe komponenty (drobne szczegóły) są kwantyzowane agresywnie - tu dzieje się kompresja stratna. Efektem są charakterystyczne artefakty: widoczne granice bloków przy niskiej jakości, “dzwonienie” wokół ostrych krawędzi, rozmyte drobne szczegóły.

Leżąca u podstaw matematyka jest praktycznie niezmieniona od lat 90. Format jest prosty, uniwersalnie wspierany i szybki w kodowaniu i dekodowaniu.

WebP

WebP (Google, 2010) używa predykcji opartej na blokach, wywiedzionej z kodeka wideo VP8. Zamiast niezależnych bloków 8×8, każdy blok może odwoływać się do sąsiadów - znacznie wydajniejsze dla obrazów naturalnych. WebP wspiera również kompresję bezstratną, przezroczystość alfa i animację.

Przy tej samej postrzeganej jakości co JPG plik WebP jest zwykle 25-35% mniejszy. Ustawienia jakości od 0 do 100, tak jak JPG.

AVIF

AVIF (Alliance for Open Media, 2019) jest oparty na kodeku wideo AV1 - najnowszej generacji open-source’owej kompresji. Używa większych i zmiennej wielkości bloków, więcej trybów predykcji i lepszego kodowania entropijnego.

Przy tej samej postrzeganej jakości co JPG plik AVIF jest zwykle 45-55% mniejszy. AVIF wspiera przezroczystość, HDR, szerokie gamuty barw i animację.

Ale uwaga - kodowanie AVIF jest wolne. Stworzenie AVIF ze zdjęcia może zająć 2-10× więcej niż WebP i 10-30× więcej niż JPG. Dekodowanie jest szybsze, ale wciąż bardziej wymagające niż JPG.

Porównanie rozmiaru pliku w rzeczywistości

Typowe zdjęcie (4000×3000 px, wyjście z aparatu) przy wizualnie równoważnej jakości:

Format	Rozmiar pliku	vs JPG
PNG (bezstratny)	28 MB	+2400%
JPG (jakość 85)	1,2 MB	100%
JPG (jakość 75)	620 KB	52%
WebP (jakość 85)	780 KB	65%
WebP (jakość 75)	380 KB	32%
AVIF (jakość 85)	540 KB	45%
AVIF (jakość 75)	250 KB	21%

Oszczędności są dramatyczne. Przejście z JPG-85 na AVIF-75 to ponad 4× mniejszy plik - dla strony ładującej 10 obrazów to różnica wielu megabajtów.

Wsparcie przeglądarek i narzędzi w 2026

JPG: Universalne. Każda przeglądarka, klient poczty, system operacyjny, edytor dokumentów, CMS i przeglądarka obrazów. Jeśli system potrafi w ogóle wyświetlać obrazy, obsłuży JPG.

WebP: Wspierany we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge, Opera, Samsung Internet) i zasadniczo wszystkich głównych systemach operacyjnych. WebP jest teraz bezpieczny jako podstawowy format obrazów webowych. Pozostałe luki są w starszych narzędziach: niektóre edytory obrazów, klienty poczty i CMS-y firm trzecich obsługują WebP niezgrabnie.

AVIF: Wspierany w Chrome, Firefox, Safari, Edge i większości nowszych przeglądarek. Globalne wsparcie około 92%. Luka to głównie starsze Safari, starszy Firefox (przed 93) i starsze przeglądarki enterprise. Wsparcie AVIF w edytorach i narzędziach projektowych jest bardziej łatane niż WebP.

Do dostarczania webowego zarówno WebP, jak i AVIF są bezpieczne, jeśli zapewnisz fallback JPG przez element <picture>:

<picture>
 <source type="image/avif" srcset="photo.avif">
 <source type="image/webp" srcset="photo.webp">
 <img src="photo.jpg" alt="...">
</picture>

Przeglądarka wybiera najlepszy format, który obsługuje.

Prędkość kodowania w praktyce

Kompresujesz jeden obraz do wpisu na blogu? Różnica w prędkości kodowania nie ma znaczenia - mowa o sekundach. Przetwarzasz katalog 50 000 zdjęć produktów? Ma ogromne znaczenie.

Przybliżone czasy kodowania dla zdjęcia 4000×3000 na nowoczesnym laptopie:

• JPG (jakość 75): 0,1 sekundy
• WebP (jakość 75): 0,3 sekundy
• AVIF (jakość 75): 3-8 sekund (zależnie od kodera i ustawienia “effort”)

Kodery AVIF mają ustawienie “effort” lub “speed”. Wyższy wysiłek = mniejsze pliki, ale znacznie wolniej. Dla przetwarzania wsadowego niższe ustawienie wysiłku często czyni AVIF praktycznym kosztem 5-15% większego wyjścia.

Kiedy używać którego

JPG - gdy potrzebujesz gwarantowanej kompatybilności z dowolnym narzędziem gdziekolwiek (email, dokumenty Office, stare systemy), eksportujesz obrazy do workflow drukarskich lub fotografii stockowej, kodujesz w locie i potrzebujesz maksymalnej prędkości, albo priorytetem jest po prostu kompatybilność.

WebP - gdy dostarczasz obrazy webowe i możesz zapewnić fallback JPG, potrzebujesz przezroczystości w obrazie fotograficznym (JPG jej nie obsługuje), chcesz zastępnika drop-in dla JPG i PNG jednocześnie, albo balansujesz kompresję i prędkość kodowania.

AVIF - gdy chcesz najmniejszych możliwych plików i prędkość kodowania nie ma znaczenia (wstępnie przetworzone obrazy hero, zcache’owana zawartość CDN), celujesz konkretnie w nowoczesne przeglądarki, pracujesz z zawartością HDR lub szerokim gamutem barw, albo potrzebujesz wysokiej jakości animacji.

Co się stanie, jeśli serwujesz WebP/AVIF bez fallbacka?

Starsze przeglądarki lub klienty niebędące przeglądarkami pokażą ikonę zepsutego obrazu albo nic. Użytkownik widzi brakującą zawartość. Zawsze używaj <picture> z fallbackiem JPG lub PNG, chyba że kontrolujesz klienta i wiesz, że obsługuje format.

Zalecany setup dla typowej strony

Rozsądna domyślna konfiguracja na 2026:

1. Trzymaj master każdego obrazu w oryginalnym formacie
2. Eksportuj JPG w jakości 85 jako uniwersalny fallback
3. Eksportuj WebP w jakości 75 jako podstawowy format webowy
4. Opcjonalnie eksportuj AVIF w jakości 70 dla maksymalnych oszczędności
5. Używaj <picture>, żeby przeglądarka sama wybrała

Jeśli chcesz zachować prostotę i pominąć AVIF, samo WebP daje 25-35% oszczędności vs JPG przy minimalnym narzucie operacyjnym.

Nasz Image Compressor akceptuje JPG, PNG i WebP i zachowuje format wejściowy. Do samej konwersji formatu sparowałbyś go z dedykowanym konwerterem, ale do redukcji rozmiaru w obecnym formacie - to szybkie narzędzie z suwakiem jakości na żywo.

Jakichkolwiek formatów ostatecznie użyjesz, najważniejsze jest jedno: przestań serwować nieskompresowane obrazy. JPG w jakości 95 na stronie webowej to trochę jak wysyłanie dokumentu faksem z rozdzielczością fotograficzną, gdy wystarczyłby PDF.