1. Kezdőlap
2. Képformátumok

Képformátumok: JPEG, PNG, WebP és AVIF

Négy formátum fedi le a modern web képeinek több mint 99%-át. Más-más kompromisszumot kötnek tömörítés, átlátszóság, animáció és böngésző támogatás terén. Íme egy gyakorlati útmutató a megfelelő választáshoz.

Összehasonlítás egymás mellett

Először áttekintés; a részletes leírások lent következnek.

JPEG — az univerzális alap

Hogyan működik

A JPEG (Joint Photographic Experts Group) 1992 óta szabványos, és a négy közül a legrégebbi. 8×8 pixeles blokkokon diszkrét koszinusz transzformációt alkalmaz veszteségesen, majd kvantálást és entrópia kódolást. A minőség 1–100 között állítható. Modern kódolók, mint a MozJPEG, 10–20%-kal jobban kihasználják a formátumot a bitfolyam megváltoztatása nélkül, így minden JPEG dekódoló el tudja olvasni őket.

Legjobb

Fotós tartalom sima tónusátmenetekkel és sok részlettel — portrék, tájképek, termékfotók, hero képek.

Előnyök

• Minden képnéző támogatja.
• Hardveres gyorsított dekódolás szinte mindenhol.
• Érett optimalizáló ökoszisztéma (MozJPEG, jpegli).

Hátrányok

• Nincs alfa csatorna — a hátteret egy síkba kell olvasztani.
• Blokkos artefaktumok szövegnél, vonalgrafikánál és éles éleknél.
• Csak 8 bit csatornánként.

PNG — veszteségmentes és átlátszó

Hogyan működik

A PNG (Portable Network Graphics) az 1990-es évek közepén született ingyenes, szabad GIF helyettesítőként. Szigorúan veszteségmentes: DEFLATE tömörítés soronkénti pixelfilterekkel. Az oxipng (Rust port az optipng-ből) megpróbálja az összes filter/tömörítés kombinációt a legkisebb méretért egyetlen pixel megváltoztatása nélkül.

Legjobb

Felületgrafika, ikonok, képernyőképek, diagramok, vonalgrafika, egyszínű logók és bármi, ami valódi alfa csatornát igényel.

Előnyök

• Veszteségmentes — a pixelek érintetlenül megmaradnak oda-vissza.
• Teljes 8 bites alfa, akár 16 bit csatornánként.
• Univerzálisan támogatott.

Hátrányok

• Nagy fájl fotókon — gyakran többszöröse a JPEG/WebP/AVIF méretnek.
• Nincs animáció az eredeti specifikációban (az APNG későbbi kiterjesztés).

WebP — a Google „web-first” formátuma

Hogyan működik

A WebP-t a Google 2010-ben adta ki, a VP8 videó kodekre építve, később külön veszteségmentes móddal. Támogat veszteséges és veszteségmentes tömörítést egy konténerben, opcionális alfával és animációval. Veszteséges módban tipikusan 25–35%-kal kisebb, mint a JPEG azonos minőségnél. Veszteségmentes módban gyakran 20–30%-kal kisebb, mint a PNG.

Legjobb

Általános webes kiszolgálás, ha az AVIF használata a célközönség böngészőiben még nem tekinthető kockázatmentesnek — fotók, átlátszó sprite-ok, animált GIF helyett, és visszalépési szint az AVIF alatt.

Előnyök

• Egy formátum fotóra, grafikára, alfára és animációra.
• Jelentősen kisebb, mint a JPEG és PNG hasonló minőségnél.
• Széles támogatás: minden aktuális böngésző 2020 óta.

Hátrányok

• 8 bit csatornánként — nincs HDR ebben az értelemben.
• Egyes gyenge eszközökön lassabb dekódolás, mint a JPEG.

AVIF — jelenleg a tömörítés élmezőnye

Hogyan működik

Az AVIF (AV1 Image File Format) az AV1 videó kodek állóképes profilja, 2019-ben az Alliance for Open Media-tól. Akár 12 bites szín, teljes alfa, HDR, széles színtér és filmszemcsézettség-szintézis. A referencia kódoló (aom-av1, libavif-fel) lassú, de a legjobb gyakorlati tömörítést adja ma valós fotókhoz.

Legjobb

Hero képek, galériák és bárhol, ahol a sávszélesség fontosabb, mint a CPU idő. Jól működik felső szintként egy <picture> elemben.

Előnyök

• Kiemelkedő tömörítés — gyakran 40–60%-kal kisebb, mint a JPEG.
• Alfa, animáció, HDR, széles színtér, 10/12 bites mélység.
• Royalty-free és nyílt.

Hátrányok

• Lassú kódolás — érdemes build időben vagy aszinkron módon tervezni.
• A Safari csak a 16-os verziótól támogatja (2022).
• Szintetikus grafikán kevésbé kedvező, mint a veszteségmentes WebP vagy PNG.

Melyik formátumot válasszam?

• Fotók, teljes szélességű hero képek: AVIF elsődlegesként, WebP és JPEG visszalépésként <picture>-ben.
• UI grafika átlátszósággal (ikonok, logók): PNG kompatibilitásért, veszteségmentes WebP kisebb méretért.
• Vonalgrafika, képernyőképek, diagramok: PNG (vagy veszteségmentes WebP) — JPEG/AVIF artefaktumai éles éleknél szigorúak.
• Animált GIF helyett: WebP vagy AVIF — mindkettő sokkal kisebb és támogat valódi alfát.
• Egy formátum minden böngészőre, ma: JPEG fotókhoz, PNG grafikához. Nem a legkisebb, de nulla kompatibilitási adósság.

Gyakorlatban nem kell egyet választani. Szolgálja ki először AVIF-fel, másodikként WebP-vel, utoljára JPEG-cel vagy PNG-vel egy <picture> elemben — minden böngésző a legkisebb dekódolható verziót kapja.