Volba mezi PNG, JPEG, WebP a AVIF

Přímočarý průvodce výběrem obrazového formátu, který pokrývá průhlednost, ztrátovou kompresi proti bezeztrátové, důvod, proč se JPEG opakovaným ukládáním kazí, a hrubý odhad velikosti souborů.

Fotografie patří do JPEG, WebP nebo AVIF. Snímky obrazovky, loga, ikony, diagramy a cokoli s plochou barvou nebo ostrým textem patří do PNG, nebo do bezeztrátového režimu WebP. Pokud potřebujete průhlednost, JPEG tím zcela vypadává. Pokud dnes vybíráte formát pro web a můžete servírovat víc než jeden, dejte na první místo AVIF, WebP jako záložní a původní JPEG nebo PNG pro cokoli hodně starého.

To je celé rozhodnutí. Zbytek vysvětluje proč, abyste poznali, kdy praktické pravidlo neplatí.

V čem je každý formát dobrý

FormátKompresePrůhlednostAnimaceNejlepší naNejhorší na
PNGBezeztrátováAno, plná alfaNeSnímky obrazovky, loga, ikony, čárovou grafiku, cokoli s textemFotografie, kde soubory hodně narostou
JPEGJen ztrátováNeNeFotografie, kde záleží na univerzální podpořeOstré hrany, plochou barvu, text, cokoli budete znovu upravovat
WebPZtrátová i bezeztrátováAno, v obou režimechAnoObecnou náhradu za PNG i JPEG na webuSoftware starší zhruba než z roku 2020
AVIFZtrátová i bezeztrátováAnoAnoNejmenší soubory u fotografií, široký gamut a vysoký dynamický rozsahRychlé kódování a starší software, který ho neotevře

Bezeztrátová komprese znamená, že je dekódovaný obrázek bit po bitu totožný s tím, co do ní vstoupilo. Ztrátová znamená, že kodér natrvalo zahazuje informaci výměnou za menší soubor a zpátky dostanete aproximaci.

PNG je bezeztrátový a vždycky bude. Jeho komprese předpovídá každý pixel ze sousedů a rozdíly pak protlačí algoritmem deflate, což je skvělé, když jsou velké plochy totožné nebo se opakují, a slabé, když se každý pixel mírně liší, jako u fotografie. Fotka uložená jako PNG je často pět až desetkrát větší než dobrý JPEG téhož snímku, a to bez viditelného přínosu.

JPEG je ztrátový a nemá alfa kanál, takže průhlednost neumí uložit vůbec. Rozdělí obrázek na bloky, každý převede na frekvenční informaci a zahodí jemný detail, na který je oko nejméně citlivé. To funguje výborně na fotografiích s plynulými tóny a špatně na tvrdých hranách, kde vytváří slabé svatozáře a takzvaný moskytí šum, jaký vidíte kolem textu uloženého do JPEG.

WebP i AVIF jsou moderní kontejnerové formáty odvozené od videokodeků. Oba umějí ztrátovou i bezeztrátovou kompresi, oba podporují plnou alfa průhlednost a oba podporuje každý současný běžný prohlížeč. AVIF obecně komprimuje silněji než WebP, zvlášť při nízkém nastavení kvality, a zvládá široké barevné gamuty a vyšší bitové hloubky. Cenou je doba kódování, která může být znatelně delší, a o něco užší podpora mimo prohlížeče, ve starších desktopových aplikacích a v grafických nástrojích.

Průhlednost

Skutečný alfa kanál umějí uložit jen PNG, WebP a AVIF, což znamená, že si každý pixel nese vlastní hodnotu krytí. Právě díky tomu logo čistě sedne na libovolnou barvu pozadí.

Když průhledný obrázek převedete do JPEG, musí ta průhlednost někam zmizet. Většina nástrojů ho slije na bílou, některé na černou, a zjistíte to, až se obrázek objeví na barevném pozadí s bílým rámečkem kolem. Pokud znáte výslednou barvu pozadí, slijte ho záměrně na ni, místo abyste nechali převodník hádat.

Kdy je ztrátová komprese v pořádku a kdy ne

Ztrátová komprese je v pořádku pro finální nasazení fotografického obsahu ve velikosti, ve které se skutečně zobrazí. Při rozumném nastavení kvality je ztráta opravdu těžko vidět.

Ztrátová komprese je špatný nápad, když:

  • Obrázek obsahuje text, tenké linky nebo velké plochy jednolité barvy. Kompresní artefakty se shlukují přesně na tvrdých hranách.
  • Soubor je pracovní master, který budete později upravovat a znovu exportovat.
  • Obrázek se bude zvětšovat nebo se u něj bude následně silně upravovat barevnost, což zesílí všechno, co kodér udělal.
  • Záleží na přesných hodnotách pixelů, jako ve vědecké, lékařské nebo forenzní práci, nebo jde o snímek obrazovky, ze kterého bude někdo číst čísla.

Proč se JPEG opakovaným ukládáním pořád zhoršuje

Pokaždé, když se JPEG dekóduje a uloží znovu, kvantuje kodér data, která už kvantovaná byla, a zaokrouhlovací chyba se kumuluje. Nejde o to, že by se kvalita snižovala dvakrát z originálu; jde o to, že se s artefakty vzniklými v prvním průchodu nyní zachází jako se skutečným obrazovým detailem a znovu se aproximují.

Uložení s vyšším nastavením kvality to zpět nevrátí. Detail odstraněný při prvním uložení je pryč. Překódování ze souboru s kvalitou 60 na kvalitu 95 jen vyrobí větší soubor, který věrně uchová artefakty z kvality 60. Pokud obrázek opakovaně upravujete, držte master v bezeztrátovém formátu a JPEG, WebP nebo AVIF vyexportujte až nakonec.

Hrubý odhad velikostí

Jsou to praktická pravidla, ne měření, a skutečná čísla se podle obsahu obrázku obrovsky liší. U typické fotografie při stejné vnímané kvalitě počítejte s JPEG jako se základem, s WebP zhruba o čtvrtinu menším a s AVIF ještě menším, přičemž rozdíl roste, čím víc komprimujete. U plochých grafik bezeztrátový WebP obvykle poráží PNG, někdy výrazně. Šum a jemná textura nafukují každý ztrátový formát, takže zrnitá fotka se nikdy nezkomprimuje jako čistý ateliérový snímek.

Nejdřív změňte velikost, pak komprimujte

Největší jednotlivý zisk téměř nikdy nepřinese formát. Přinesou ho rozměry. Obrázek servírovaný v šířce 4000 pixelů a zobrazený ve sloupci širokém 800 pixelů nese asi pětadvacetkrát víc obrazových dat, než potřebuje, a s tím žádný kodér nic neudělá. Změňte velikost zhruba na tu, ve které se bude zobrazovat (na dvojnásobek, pokud cílíte na displeje s vysokou hustotou), pak vyberte formát a pak laďte nastavení kvality, dokud rozdíl nezačnete zrovna vidět, a vraťte se o krok zpět.