Stane se formát Avif novým standardem pro webové prohlížeče?

Co je to AVIF?

AVIF je formát grafického souboru využívající kódování AV1. Jedná se o otevřený, bezpoplatkový formát. Nabízí mnoho moderních vlastností, jako je průhlednost nebo HDR.

Nejdůležitější ale je, že AVIF zvládá bezztrátovou kompresi s mnohem větší efektivností než konkurence. Obrázek ve formátu AVIF může mít až o 50 % menší velikost než běžně známé formáty, jako je JPG.

Na začátku roku vydal Netflix článek, kde zmiňuje AVIF jako vhodnou alternativu pro kompresi jejich obrazového obsahu. Firmám jako Netflix hodně záleží na objemu přenesených dat a jejich redukce v řádech desítek procent pro ně může mít radikální přínos.

Proč je to důležité pro webové vývojáře?

Google v poslední době začal klást velký důraz na rychlost načítání stránek při vyhodnocování výsledků ve vyhledávání. To znamená, že i perfektně nadesignovaná stránka s kvalitním SEO může na Google snadno zapadnout, protože je prostě... pomalá.

A právě obrázky mají velmi často na svědomí pomalé načítání webu. Neupravené obrázky mívají velikost řádově v megabajtech. Pokud byste chtěli takové obrázky zobrazovat na webu, uživatel s pomalým mobilním datovým připojením vám pravděpodobně uteče dřív, než se mu stihnou načíst. A ještě k tomu vám dá Google na zadek.

Proto se snažíme uživatelům zobrazovat obrázky, které mají co nejmenší velikost, ale zároveň rozumnou vizuální kvalitu. Koncem roku 2020 vydal prohlížeč Google Chrome aktualizaci, která nový formát AVIF podporuje. Tím získáváme možnost použít ten nejlepší formát kódování obrázků na webu.

Podpora prohlížečů

Formát AVIF k aktuálnímu datu podporuje pouze jeden prohlížeč, a to Google Chrome. I když se jedná o jediný prohlížeč, má obrovské zastoupení na trhu, takže s klidem dokáže pokrýt až polovinu uživatelů.

Předchůdcem formátu AVIF je WebP vytvořený firmou Google. Přestože je na světě už přibližně deset let, trvalo poměrně dlouho, než ho začaly podporovat i ostatní prohlížeče. Například Safari jej implementoval teprve minulý rok.

Vývoj front-endových technologií je pomalý. Jejich nasazení je ale ještě pomalejší. Podle w3techs používá k aktuálnímu datu formát WebP pouze 0,6 % webů. Na začátku minulého roku to bylo dokonce 0,2 %. Můžeme tedy čekat, že pro nové formáty nebudou raketovým tempem vznikat ani knihovny, balíčky a podpora CDN služeb.

Google vrací úder: WebP 2.0

Pokud jste webový vývojář, je dost možné, že jste teprve v procesu nasazování WebP na váš web. Pokud s obrázky nepracujete, nejspíš jste o formátu WebP v souvislosti s webem ještě ani neslyšeli. A teď tu máme již zmíněný AVIF. Aby toho nebylo málo, koncem minulého roku se objevil repozitář pro WebP 2.0.

Byl to Google, který implementoval podporu pro AVIF do svého prohlížeče jako první. Přesto to vypadá, že nehodlá zůstat pozadu, a vydává další verzi svého obrázkového formátu. Zdá se, že si Google potřebuje mermomocí prosadit vlastní řešení, a vytváří v celé situaci chaos.

Mnohokrát se ale ukázalo, že konkurence může být prospěšná – když se ukáže jeden směr jako slepá větev, budeme mít k dispozici alternativu. WebP 2.0 totiž slibuje několikanásobné zrychlení komprese, což je zatím hlavní problém formátu AVIF.

Příkladem může být Facebook, kterému vadil nízký výkon jazyka PHP, a vytvořil tzv. Hip Hop Virtual Machine. Nástroj, využívající just-in-time (JIT) kompilaci, zrychloval výkon jazyka přibližně o 20 %. Vývojáři PHP na to zareagovali vydáním verze 7, která byla nativně ještě rychlejší než za použití HHVM od Facebooku. V důsledku toho Facebook vývoj tohoto projektu ukončil. Stalo by se ale tohle všechno bez prvotního impulzu konkurenčního boje?

AVIF na webu v praxi

To, že podpora AVIF zatím není velká, už víme. Jelikož ale v MadFox design máme snadno rozšiřitelnou infrastrukturu pro manipulaci s obrázky, rozhodli jsme se dát novému formátu šanci a vyzkoušet ho naostro. Jelikož pro jediný obrázek používáme desítky jeho různých variant, negenerujeme obrázky dopředu, ale až tehdy, když jsou potřeba. A tady jsme s AVIF narazili na jeho největší problém.

AVIF dokáže dosahovat velmi dobrých výsledků, ale není to zadarmo. Používá AV1 enkodér, který implementuje složité algoritmy pro kódování obrázku, a díky tomu je převod obrázku na AVIF a operace s ním podstatně pomalejší než u konkurenčních formátů. V praxi to může znamenat, že zpracování průměrného obrázku s velikostí 1 200 px může trvat až 10 sekund. Tolik času ale uživatelé nemají.

V případě generování obrázků tzv. „on the fly“ (tedy až tehdy, když jsou potřeba) je pro nás formát AVIF nepoužitelný. Co se týče statických obrázků, které si můžeme dopředu předgenerovat, je AVIF výbornou volbou. Například na webu objednávkového systému Campos Catering, kde se obrázky prakticky nemění, nám AVIF nabídl možnost získat technologický náskok.