AVIF vs JPEG XL: Souboj obrazových formátů, který by měl znát každý vývojář

Optimalizace obrázků patří mezi nejjednodušší způsoby, jak zrychlit web. Když vám jeden obrázek ušetří 100 KB a denně ho zobrazíte tisíckrát, začne se to počítat. Když navíc JPEG XL získal širokou podporu v prohlížečích, komunita vývojářů měla důvod k oslavě. Moderní formát s lepší kompresí? Snad konečně!

Realita je ale složitější než marketingová hesla. Po důkladném prozkoumání benchmarků mezi AVIF a JPEG XL v reálných scénářích vám přináším přehled toho, co data skutečně ukazují.

Hlavní zjištění pro ty, kteří nemají čas

Pro webovou optimalizaci na úrovni kvality běžného webu AVIF konzistentně poráží JPEG XL. Při standardním nastavení kvality vytváří JPEG XL soubory o 15–25 % větší než srovnatelný AVIF. Když oba enkodéry zatížíte naplno, rozdíl se zmenší na 6–20 %, ale AVIF stejně vítězí.

Hodně záleží na tom, jaký encoder používáte. Novější jixel typicky produkuje menší soubory než tradiční libjxl. Ovšem u obrázků s průhledností se tato výhoda ztrácí a obrací.

Screenshots a ilustrace? Tady AVIF dominuje

Tady jsou rozdíly opravdu výrazné. Pro screenshoty, UI mockupy a vektorové ilustrace nechává AVIF JPEG XL daleko za sebou.

Při výchozím nastavení dosahují srovnatelné JPEG XL soubory o 30–90 % větší velikosti. I při maximálním úsilí obou formátů zůstává JPEG XL o 20–70 % větší. Spousta vývojářů se mylně domnívá, že pro tento typ obsahu potřebuje lossless formát. Jenže ztrátový AVIF si s screenshoty poradí skvěle – vizuální kvalita při rozumném kompresním nastavení je vynikající.

Pokud tvoříte dashboardy, dokumentaci nebo designové náhledy, AVIF by měl být váš výchozí formát.

Průhlednost: Komplikovaná záležitost

Podpora průhlednosti se mezi formáty výrazně liší. AVIF zvládá průhlednost i se ztrátovou kompresí a udržuje rozumnou velikost souborů. Encoder libjxl produkuje při výchozím nastavení o 31–44 % větší soubory, při maximálním úsilí dokonce o 61–70 % větší než AVIF.

jixel přistupuje k průhlednosti jinak – kóduje alpha kanály lossless ve výchozím stavu. Zní to jako výhoda pro kvalitu, jenže výsledné soubory jsou 2–3x větší než srovnatelné AVIF. Někdy lossless prostě není správná volba.

Rychlost enkodování a paměť: Praktické kompromisy

Výkon matteruje, když zpracováváte stovky nebo tisíce obrázků v build pipeline. AVIF se obecně enkoduje rychleji a spotřebuje méně paměti – což znamená rychlejší CI/CD buildy a nižší náklady na výpočetní výkon.

jixel vás může překvapit – ve skutečnosti enkoduje rychleji než AVIF při menší spotřebě paměti. Ale pamatujte: ty rychlejší enkodované soubory jsou typicky větší. Úspora času se pak ztrácí v horší kompresi. Když počítáte celkové bajty doručené uživatelům, AVIF zůstává lepší volbou.

Dekódování: Tam, kde záleží nejvíc

Uživatelé se zajímají o rychlost načítání stránek, ne o rychlost vašeho build pipeline. Rychlost dekódování ovlivňuje Time to Interactive a tady AVIF opět boduje. JPEG XL typicky trvá 2–3x déle při střední kvalitě.

Zajímavé je, že rozdíl se zmenšuje při velmi vysoké kvalitě, kde Chrome občas dekóduje JPEG XL rychleji. Ale pro typickou webovou kvalitu dekóduje AVIF rychleji, což znamená rychlejší načítání stránek pro vaše návštěvníky.

Nastavení úsilí enkodéru

Ne všechny úrovně kvality jsou stejné. Vyšší nastavení úsilí (pomalejší enkodování, více kompresních pokusů) se vyplatí u AVIF i jixelu – přinášejí viditelně lepší výsledky. Ovšem u libjxl je to jiný příběh.

libjxl v režimu maximálního úsilí je dramaticky pomalejší, spotřebovává podstatně více paměti a občas produkuje dokonce větší soubory než výchozí nastavení. Když používáte libjxl, zůstaňte u výchozího úsilí. Chcete-li lepší kompresi JPEG XL, použijte raději jixel.

HDR: Rozvíjející se téma

Obsah s vysokým dynamickým rozsahem přináší odlišné výzvy. JPEG XL podpora gain map – technologie umožňující HDR vedle standardních displejů – zatím není v prohlížečích implementovaná. Enkódovací nástroje zůstávají experimentální.

AVIF zvládá HDR vyspěleji, ale ani jeden formát nenabízí dokonalé řešení pro HDR obsah, který se plynule přizpůsobí standardním displejům. Prozatím zůstává HDR na webu specializovaný případ vyžadující pečlivou implementaci.

Výhoda kompatibility s JPEG

JPEG XL nabízí něco unikátního: zpětnou kompatibilitu s existujícími JPEG soubory. Můžete převést starší JPEG obrázky do JPEG XL a dosáhnout 9–20% úspory bez jakékoli ztráty kvality. Formát obsahuje nástroje přímo pro tento převod.

To je důležité, pokud máte rozsáhlou knihovnu stávajících obrázků. Patnáctiprocentní redukce u tisíců legacy obrázků může znamenat slušnou úsporu bandwidthu.

Lossless: Tady JPEG XL září

Pro vzácné případy, kdy skutečně potřebujete lossless kompresi, je JPEG XL jasný vítěz. Lossless WebP je o 9–17 % větší pro fotografie a lossless AVIF dokonce o 30–120 % větší než srovnatelné JPEG XL.

Lossless obrázky jsou ale pro webovou distribuci téměř nikdy správnou volbou. Cenou za ničím nerušenou kvalitu jsou obrovské soubory. Pokud zobrazujete lossless obrázky na webových stránkách, znovu zvažte. Když musíte, dejte pozor na jixel encoder při vyšším nastavení úsilí – někdy produkuje soubory bolestně pomalé na dekódování.

Co to znamená pro vaše projekty

Moje praktická doporučení: zvolte AVIF s 4:4:4 chroma subsamplingem při maximálním nastavení úsilí. Kvalitní zisky stojí za pomalejší enkodování a výhody ve velikosti souborů oproti JPEG XL jsou značné ve většině scénářů.

Přesto testujte s vaším skutečným obsahem. Benchmarky ukazují výjimky, kde si JPEG XL vede srovnatelně nebo dokonce lépe. Když pracujete s konkrétními typy obrázků, kde se AVIF zdá být problematický, zkuste jixel-enkodovaný JPEG XL a porovnejte.

Oba formáty se v poslední době výrazně zlepšily. Co se jeví jako správná volba dnes, se může za půl roku změnit. Formátový landscape se rychle vyvíjí.

Širší kontext

Optimalizace obrázků není jen o výběru formátu. Zahrnuje build pipeliny, CDN konfiguraci, responzivní handling obrázků a lazy loading strategie. Výběr formátu je jen jeden z mnoha pák.

Pro vývojáře využívající moderní hostingové služby je dobrá zpráva, že současná infrastruktura tyto formáty zpracovává nativně. Komprese proběhne jednou při deployi, výkonnostní přínosy tečou automaticky každému návštěvníkovi.

Nenechte se paralyzovat rozhodováním o formátu. AVIF je dnes bezpečnější default. Ale zůstaňte informovaní – válka o formáty obrázků zdaleka nekončí a konkurence žene zlepšení, ze kterých těžíme všichni.

Jaké obrázkové formáty používáte ve svých současných projektech? Experimentovali jste už s AVIF nebo JPEG XL? Rád si přečtu vaše zkušenosti v komentářích.