1. Domů
2. Formáty

Formáty obrázků: JPEG, PNG, WebP a AVIF

Čtyři formáty pokrývají přes 99 % obrázků na moderním webu. Výrazně se liší v kompresi, průhlednosti, animaci a podpoře v prohlížečích. Zde je praktický průvodce výběrem.

Srovnání vedle sebe

Nejprve rychlý přehled, podrobnosti u každého formátu níže.

JPEG — univerzální výchozí bod

Jak to funguje

JPEG (Joint Photographic Experts Group) byl standardizován v roce 1992 a je nejstarší ze čtyř formátů. Používá ztrátovou diskrétní kosinovou transformaci na blocích 8×8 pixelů, po ní kvantizaci a entropické kódování. Kvalita se ovládá jedním číslem 1 až 100. Moderní kodéry jako MozJPEG z formátu vytěží o 10–20 % víc bez změny bitového proudu, takže je přečte každý dekodér JPEG.

Nejlépe pro

Fotografický obsah s plynulými přechody tónů a spoustou detailu — portréty, krajiny, produktové fotky, velké titulní obrázky.

Výhody

• Podporuje téměř každý prohlížeč obrázků.
• Dekódování hardwarově urychleno téměř všude.
• Zralé ekosystémy optimalizátorů (MozJPEG, jpegli).

Nevýhody

• Žádný alfa kanál — pozadí musí být srovnáno do jedné vrstvy.
• Blokové artefakty u textu, kreseb a ostrých hran.
• Pouze 8 bitů na kanál.

PNG — bezeztrátový a s průhledností

Jak to funguje

PNG (Portable Network Graphics) vznikl v 90. letech jako svobodná náhrada za GIF. Je striktně bezeztrátový: komprese DEFLATE nad filtrací pixelů po řádcích. Optimalizátory jako oxipng (Rustová varianta optipng) zkoušejí kombinace filtrů a komprese, aby byla reprezentace nejmenší, aniž by se změnil jediný pixel.

Nejlépe pro

Grafiku UI, ikony, snímky obrazovky, diagramy, kresby, loga s plochými barvami a cokoli, co potřebuje skutečný alfa kanál.

Výhody

• Bezeztrátově — pixely zůstávají beze změny.
• Plný 8bitový alfa, až 16 bitů na kanál.
• Univerzální podpora.

Nevýhody

• Velké u fotek — často mnohonásobně oproti JPEG/WebP/AVIF.
• Žádná animace v původní specifikaci (APNG je pozdější rozšíření).

WebP — formát Google pro web

Jak to funguje

WebP vydalo Google v roce 2010, založeno na videokodeku VP8 a později rozšířeno o samostatný bezeztrátový režim. Podporuje ztrátovou i bezeztrátovou kompresi v jednom kontejneru, volitelnou alfa a animaci. V ztrátovém režimu typicky porazí JPEG o 25–35 % při stejné kvalitě. V bezeztrátovém režimu obvykle porazí PNG o 20–30 %.

Nejlépe pro

Obecné doručování na web, kdy ještě není jisté AVIF — fotky, sprity s průhledností, náhrady za animované GIF, záložní vrstva pod AVIF.

Výhody

• Jeden formát pro fotky, grafiku, alfa i animace.
• Výrazně menší než JPEG a PNG při srovnatelné kvalitě.
• Široká podpora: aktuální prohlížeče od roku 2020.

Nevýhody

• 8 bitů na kanál — žádné HDR.
• Pomalejší dekódování než JPEG na některých slabých zařízeních.

AVIF — špička v kompresi

Jak to funguje

AVIF (AV1 Image File Format) je profil stacionárního obrazu z videa AV1, vydaný v roce 2019 konsorciem Alliance for Open Media. Až 12bitové barvy, plná alfa, HDR, široké barevné prostory, zrnění. Referenční kodér (aom-av1 v libavif) je pomalý, ale dosahuje dnes u reálných fotek nejlepší komprese.

Nejlépe pro

Velké titulní obrázky, galerie a všude, kde na šířce pásma záleží víc než na CPU. Hodí se jako horní vrstva v prvku <picture>.

Výhody

• Nejlepší komprese v třídě — typicky o 40–60 % menší než JPEG.
• Alfa, animace, HDR, široké gamuty a 10/12bitová hloubka.
• Bez licenčních poplatků a otevřený formát.

Nevýhody

• Pomalé kódování — plánujte build nebo asynchronní kódování.
• Safari přidala podporu až ve verzi 16 (2022).
• Méně vhodné pro syntetickou grafiku než bezeztrátový WebP nebo PNG.

Jaký formát použít?

• Fotky, celostránkové titulky: AVIF jako primární, WebP a JPEG jako zálohy přes <picture>.
• Grafika UI s průhledností (ikony, loga): PNG pro starší prostředí, bezeztrátový WebP pro menší soubory.
• Kresby, snímky obrazovky, diagramy: PNG (nebo bezeztrátový WebP) — JPEG/AVIF trestají ostré hrany.
• Náhrada animovaných GIF: WebP nebo AVIF — oba mnohem menší a s plnou alfou.
• Jeden formát pro všechny dnešní prohlížeče: JPEG u fotek, PNG u grafiky. Ne nejmenší, ale nulový dluh kompatibility.

V praxi často nevolíte jen jeden. Podávejte nejdřív AVIF, pak WebP a nakonec JPEG nebo PNG uvnitř <picture> — každý prohlížeč dostane nejmenší verzi, kterou umí dekódovat.