1. Strona główna
2. Formaty obrazów

Formaty obrazów: JPEG, PNG, WebP i AVIF

Cztery formaty pokrywają ponad 99% obrazów w nowoczesnym webie. Różnią się kompromisem między kompresją, przezroczystością, animacją i wsparciem w przeglądarkach. Poniżej praktyczny przewodnik wyboru.

Porównanie obok siebie

Najpierw skrót w tabeli, potem pełny opis każdego formatu.

JPEG — uniwersalna baza

Jak działa

JPEG (Joint Photographic Experts Group) ustandaryzowano w 1992; to najstarszy z czterech formatów. Używa stratnej transformacji cosinusowej na blokach 8×8, kwantyzacji i kodowania entropijnego. Jakość reguluje jedna liczba 1–100. Nowsze enkodery typu MozJPEG wyciskają 10–20% więcej bez zmiany bitstreamu, więc każdy dekoder JPEG to odczyta.

Najlepszy do

Zdjęć z płynnymi tonami i dużą ilością detali — portrety, krajobrazy, produkty, zdjęcia hero.

Plusy

• Obsługiwany praktycznie wszędzie.
• Dekodowanie często akcelerowane sprzętowo.
• Dojrzały ekosystem optymalizatorów (MozJPEG, jpegli).

Minusy

• Brak alfy — tła trzeba spłaszczać.
• Artefakty blokowe na tekście, liniach i ostrych krawędziach.
• Tylko 8 bitów na kanał.

PNG — bezstratny i z alfą

Jak działa

PNG (Portable Network Graphics) powstał w latach 90. jako wolna od patentów alternatywa dla GIF. Jest ściśle bezstratny: DEFLATE na filtrach wierszowych. Optymalizatory jak oxipng próbują kombinacji filtrów i kompresji, by znaleźć najmniejszy plik bez zmiany piksela.

Najlepszy do

Grafiki UI, ikon, zrzutów, diagramów, linii, logo z płaskimi kolorami i wszystkiego z prawdziwym kanałem alfa.

Plusy

• Bezstratność — piksele po drodze „tam i z powrotem” bez zmian.
• Pełna alfa 8-bitowa, do 16 bitów na kanał.
• Powszechne wsparcie.

Minusy

• Duży na zdjęciach — często wielokrotnie większy niż JPEG/WebP/AVIF.
• Brak animacji w oryginalnej specyfikacji (APNG to późniejsze rozszerzenie).

WebP — format Google „pod web”

Jak działa

WebP wypuszczony przez Google w 2010, oparty o VP8, z osobnym trybem bezstratnym. Obsługuje kompresję stratną i bezstratną w jednym kontenerze, opcjonalną alfę i animację. W trybie stratnym zwykle pokonuje JPEG o 25–35% przy tej samej jakości. Bezstratnie często o 20–30% mniej niż PNG.

Najlepszy do

Ogólnego użycia w webie, gdy AVIF jeszcze nie jest bezpieczny — zdjęcia, pliki z alfą, zamienniki animowanych GIF, warstwa rezerwowa pod AVIF.

Plusy

• Jeden format: zdjęcia, grafika, alfa, animacja.
• Znacznie mniejszy niż JPEG i PNG przy porównywalnej jakości.
• Szerokie wsparcie: współczesne przeglądarki od ~2020.

Minusy

• 8 bitów na kanał — brak HDR.
• Na części słabszych urządzeń wolniejsze dekodowanie niż JPEG.

AVIF — lider kompresji

Jak działa

AVIF to profil obrazu nieruchomego kodeka wideo AV1 (Alliance for Open Media, 2019). Do 12 bitów, pełna alfa, HDR, szeroka gama, synteza szumu filmowego. Referencyjny enkoder aom-av1 w libavif jest wolny, ale daje dziś najlepszą kompresję dla realnych zdjęć.

Najlepszy do

Zdjęć hero, galerii i wszędzie tam, gdzie transfer jest ważniejszy niż czas CPU. Dobry jako górna warstwa w <picture>.

Plusy

• Klasa kompresji — zwykle 40–60% mniej niż JPEG.
• Alfa, animacja, HDR, szeroka gama, 10/12 bitów.
• Otwarty i bez tantiem.

Minusy

• Wolne kodowanie — planuj build-time lub async.
• Safari dodał wsparcie dopiero w 16 (2022).
• Słabiej na syntetycznej grafice niż WebP lossless czy PNG.

Jakiego formatu użyć?

• Zdjęcia, pełnoekranowe obrazy hero: AVIF głównie, WebP i JPEG jako rezerwa w <picture>.
• Grafika UI z przezroczystością: PNG dla starych systemów, WebP bezstratny dla mniejszego rozmiaru.
• Linie, zrzuty, diagramy: PNG (lub WebP bezstratny) — artefakty JPEG/AVIF na ostrych krawędziach są widoczne.
• Zamiast animowanych GIF: WebP lub AVIF — znacznie mniejsze, z prawdziwą alfą.
• Jeden format „wszędzie” dziś: JPEG do zdjęć, PNG do grafiki. Nie najmniejsze pliki, ale zero długu kompatybilności.

W praktyce nie musisz wybierać jednego. Podawaj AVIF pierwszy, potem WebP, na końcu JPEG lub PNG w <picture> — każda przeglądarka weźmie najmniejszy format, który potrafi zdekodować.