1. Domov
2. Formáty

Formáty obrázkov: JPEG, PNG, WebP a AVIF

Štyri formáty pokrývajú viac než 99 % obrázkov na modernom webe. Výrazne sa líšia v kompresii, priehľadnosti, animácii a podpore v prehliadačoch. Tu je praktický sprievodca výberom.

Porovnanie vedľa seba

Najprv rýchly prehľad, podrobnosti pri každom formáte nižšie.

JPEG — univerzálny východiskový bod

Ako to funguje

JPEG (Joint Photographic Experts Group) bol štandardizovaný v roku 1992 a je najstarší zo štyroch formátov. Používa stratovú diskrétnu kosínusovú transformáciu na blokoch 8×8 pixelov, po nej kvantizáciu a entropické kódovanie. Kvalita sa ovláda jedným číslom 1 až 100. Moderné kodeky ako MozJPEG z formátu vytiahnu o 10–20 % viac bez zmeny bitového prúdu, takže to prečíta každý dekodér JPEG.

Najlepšie pre

Fotografický obsah s plynulými prechodmi tónov a veľa detailu — portréty, krajiny, produktové fotky, veľké titulné obrázky.

Výhody

• Podporuje takmer každý prehliadač obrázkov.
• Dekódovanie hardvérovo zrýchlené takmer všade.
• Zrelé ekosystémy optimalizátorov (MozJPEG, jpegli).

Nevýhody

• Žiadny alfa kanál — pozadie musí byť zrovnané do jednej vrstvy.
• Blokové artefakty pri texte, kresbách a ostrých hranách.
• Len 8 bitov na kanál.

PNG — bezstratový a s priehľadnosťou

Ako to funguje

PNG (Portable Network Graphics) vznikol v 90. rokoch ako slobodná náhrada za GIF. Je striktne bezstratový: kompresia DEFLATE nad filtráciou pixelov po riadkoch. Optimalizátory ako oxipng (rustová varianta optipng) skúšajú kombinácie filtrov a kompresie, aby bola reprezentácia najmenšia, pričom sa nezmení jediný pixel.

Najlepšie pre

Grafiku UI, ikony, snímky obrazovky, diagramy, kresby, logá s plochými farbami a čokoľvek, čo potrebuje skutočný alfa kanál.

Výhody

• Bezstratovo — pixely zostávajú bez zmeny.
• Plný 8bitový alfa, až 16 bitov na kanál.
• Univerzálna podpora.

Nevýhody

• Veľké pri fotkách — často viacnásobne oproti JPEG/WebP/AVIF.
• Žiadna animácia v pôvodnej špecifikácii (APNG je neskoršie rozšírenie).

WebP — formát Google pre web

Ako to funguje

WebP vydalo Google v roku 2010, založené na videokodeku VP8 a neskôr rozšírené o samostatný bezstratový režim. Podporuje stratovú aj bezstratovú kompresiu v jednom kontajneri, voliteľnú alfa a animáciu. V stratovom režime typicky porazí JPEG o 25–35 % pri rovnakej kvalite. V bezstratovom režime zvyčajne porazí PNG o 20–30 %.

Najlepšie pre

Všeobecné doručovanie na web, keď ešte nie je isté AVIF — fotky, sprity s priehľadnosťou, náhrady za animované GIF, záložná vrstva pod AVIF.

Výhody

• Jeden formát pre fotky, grafiku, alfa aj animácie.
• Výrazne menší než JPEG a PNG pri porovnateľnej kvalite.
• Široká podpora: aktuálne prehliadače od roku 2020.

Nevýhody

• 8 bitov na kanál — žiadne HDR.
• Pomalšie dekódovanie než JPEG na niektorých slabých zariadeniach.

AVIF — špička v kompresii

Ako to funguje

AVIF (AV1 Image File Format) je profil stacionárneho obrazu z videa AV1, vydaný v roku 2019 konzorciom Alliance for Open Media. Až 12bitové farby, plná alfa, HDR, široké farebné priestory, zrnenie. Referenčný kodek (aom-av1 v libavif) je pomalý, ale dosahuje dnes u reálnych fotiek najlepšiu kompresiu.

Najlepšie pre

Veľké titulné obrázky, galérie a všade, kde na šírke pásma záleží viac než na CPU. Hodí sa ako horná vrstva v prvku <picture>.

Výhody

• Najlepšia kompresia v triede — typicky o 40–60 % menší než JPEG.
• Alfa, animácia, HDR, široké gamuty a 10/12bitová hĺbka.
• Bez licenčných poplatkov a otvorený formát.

Nevýhody

• Pomalé kódovanie — plánujte build alebo asynchrónne kódovanie.
• Safari pridala podporu až vo verzii 16 (2022).
• Menej vhodné pre syntetickú grafiku než bezstratový WebP alebo PNG.

Aký formát použiť?

• Fotky, celostránkové titulky: AVIF ako primárny, WebP a JPEG ako zálohy cez <picture>.
• Grafika UI s priehľadnosťou (ikony, logá): PNG pre staršie prostredia, bezstratový WebP pre menšie súbory.
• Kresby, snímky obrazovky, diagramy: PNG (alebo bezstratový WebP) — JPEG/AVIF trestajú ostré hrany.
• Náhrada animovaných GIF: WebP alebo AVIF — oba oveľa menšie a s plnou alfou.
• Jeden formát pre všetky dnešné prehliadače: JPEG pri fotkách, PNG pri grafike. Nie najmenší, ale nulový dlh kompatibility.

V praxi často nevyberáte len jeden. Podávajte najprv AVIF, potom WebP a nakoniec JPEG alebo PNG vnútri <picture> — každý prehliadač dostane najmenšiu verziu, ktorú vie dekódovať.