AVIF obrázky: až 40 % úspora dat oproti WebP

Formát WebP je skvělý. Ale co když chcete ještě víc? AVIF je jako WebP, ale s turbem v motoru.

Tento formát založený na video kodeku AV1 dokáže ušetřit o 30–40 % více dat než WebP, a to při stejné nebo lepší kvalitě.

AVIF (AV1 Image File Format) vznikl v roce 2019 jako společný projekt Alliance for Open Media. Stejně jako WebP využívá technologii z videokodeků, ale tentokrát z modernějšího AV1. Výsledek? Ještě efektivnější komprese a menší soubory.

Pokud už používáte WebP a chcete posunout optimalizaci obrázků o level výš, AVIF je logický další krok.

AVIF (AV1 Image File Format) – moderní formát pro ještě efektivnější kompresi obrázků.

Proč používat AVIF?

AVIF nabízí několik výhod oproti starším formátům:

• Lepší komprese než WebP
  AVIF typicky ušetří o 20–30 % více dat než WebP při stejné kvalitě. Oproti JPEG je úspora ještě výraznější – až 50 % a více.
• Podpora průhlednosti
  Stejně jako WebP podporuje AVIF alfa kanál, takže můžete používat průhledné obrázky bez nutnosti použít už zastaralý formát PNG.
• Nekostičkuje
  Zatímco JPEG při vysoké kompresi „kostičkuje“ (blocking artifacts), AVIF má tendenci obraz spíše jemně rozmazat, což je pro lidské oko mnohem snesitelnější.
• Podpora HDR
  AVIF umí zobrazit obrázky s vyšším dynamickým rozsahem, což ocení zejména fotografové.
• Více barevných prostorů
  Podporuje širší škálu barevných prostorů včetně Rec2020.

Podpora v prohlížečích

Podpora AVIF v prohlížečích se rychle zlepšuje. V současnosti ho podporují všechny moderní prohlížeče:

• Chrome (od verze 85) a další prohlížeče založené na Chromiu
• Firefox (od verze 93)
• Safari (od verze 16)
• Edge (od verze 85)

Viz Podpora AVIF podle CanIUse. Stále ale existují starší verze prohlížečů, které AVIF nepodporují, proto je doporučujeme sledovat vaše statistiky prohlížečů a implementovat fallback na WebP nebo JPEG.

Jak implementovat s fallbackem do WebP

Pro zajištění kompatibility se staršími prohlížeči můžete použít HTML element <picture> s více zdroji. Prohlížeč si automaticky vybere formát, který podporuje:

<picture>
	<source srcset="obrazek.avif" type="image/avif" />
	<source srcset="obrazek.webp" type="image/webp" />
	<img src="obrazek.jpg" alt="Popis obrázku" width="1600" height="900" loading="lazy" />
</picture>

Prohlížeč projde zdroje shora dolů a použije první, který podporuje. Pokud nepodporuje AVIF, sáhne po WebP. Pokud nepodporuje ani WebP, použije JPEG jako poslední možnost.

Vždy uvádějte atributy width a height u obrázku, abyste předešli problémům s CLS. To platí i pro obrázky v elementu <picture>.

Automatizace převodu

Ideální je automatizovat generování AVIF obrázků. Možností je několik:

• Cloudflare
  Cloudflare v konkrétním nastavení automaticky převádí obrázky do AVIF, pokud prohlížeč podporuje tento formát. Nemusíte řešit nic na vlastním serveru.
• PHP 8.1+
  Od PHP 8.1 je k dispozici nativní funkce imageavif() pro generování AVIF obrázků. Můžete nastavit parametry quality a speed.
• ImageMagick
  Nástroj ImageMagick podporuje převod do AVIF pomocí příkazu magick convert.
• Externí služby
  Můžete využít služby jako AWS Lambda s CloudFront, které automaticky převádějí obrázky na vyžádání.

Generování AVIF obrázků je pomalejší než generování WebP. Pokud převádíte obrázky na vyžádání (on-the-fly), může to zpomalit odezvu serveru. Lepší je generovat obrázky předem nebo použít CDN službu. Stejně tak může být pomalejší i dekódování na straně klienta, hlavně na velmi pomalých zařízeních.

Naše zkušenosti z praxe

V rámci našich konzultací k rychlosti webu jsme v PageSpeed.ONE pomáhali implementovat AVIF na několika projektech. Zde jsou naše zkušenosti a doporučení:

Očekávaná úspora dat

S formátem AVIF je možné dosáhnout úspory datové velikosti obrázků v rozsahu cca 30 až 40 % oproti WebP. To se samozřejmě liší podle typu obrázku – u fotografií je úspora obvykle vyšší než u grafik s ostrými hranami.

Doporučené nastavení parametrů

Na základě našich testů doporučujeme následující nastavení:

• Quality (kvalita): zhruba 50
• Effort: hodnota 4

Vyšší hodnota effort zvyšuje dobu generování obrázku, ale také potenciální úsporu dat. Doporučujeme toto nastavení otestovat na vašich konkrétních obrázcích, protože optimální hodnoty se mohou lišit podle typu obsahu.

Praktické porovnání úspor datového objemu při použití AVIF oproti WebP. Zdroj: report Technické v monitoringu PLUS na obsahovém webu klienta PageSpeed.ONE. Nástroj: Squoosh

Možnosti implementace

Existují dvě hlavní cesty, jak AVIF nasadit:

1. Vlastní generování
   Pokud máte kontrolu nad serverem, můžete generovat AVIF obrázky sami. Výhodou je plná kontrola, nevýhodou je vyšší zátěž serveru.

2. Externí služby
   Je to velmi různorodé, někdy se hodí Cloudflare, někdy CloudFront a AWS Lambda. Doporučujeme si udělat vlastní odhad podle vašich potřeb a objemu obrázků.

3. Ruční převod
   Pro menší statické weby komprimujte obrázky do formátu AVIF ručně, například pomocí nástrojů jako Squoosh, Image to Avif na Cloudinary nebo známý TinyPNG.

Monitoring dopadu

Stejně jako u WebP, i u AVIF je důležité monitorovat datový objem obrázků a jejich vliv na metriku LCP. V našem monitoringu PLUS můžete sledovat, jak se mění velikost obrázků v čase a jaký mají dopad na rychlost načtení stránky.

Vždy monitorujte datový objem obrázků. I změna jediného obrázku může způsobit výkyvy v rychlosti a projevit se na konverzích vašeho webu. Zdroj: report Technické v monitoringu PLUS.

Kdy použít AVIF vs WebP?

AVIF není vždy lepší volba než WebP. Zde je rychlý návod, kdy co použít:

• Použijte AVIF, pokud: Chcete maximální úsporu dat.Cílíte na moderní prohlížeče. A máte čas a prostředky na testování nastavení.

• Zůstaňte u WebP, pokud: Potřebujete univerzální řešení s maximální kompatibilitou. Generování AVIF by zpomalilo váš server. A chcete jednodušší implementaci.

• Ideální řešení:
  Použijte AVIF s fallbackem do WebP. Prohlížeče, které AVIF podporují, dostanou nejmenší soubory. Starší prohlížeče dostanou WebP. Všichni jsou spokojení.

Shrnutí

AVIF je logický další krok po WebP. Nabízí výrazně lepší kompresi, ale vyžaduje trochu více práce s implementací a testováním nastavení.

Pokud už používáte WebP a chcete posunout optimalizaci ještě dál, AVIF stojí za zvážení. Zejména pokud máte možnost využít automatizaci přes Cloudflare nebo podobné služby.

Vždy ale myslete na fallback pro starší prohlížeče a monitorujte dopad na rychlost webu. Každý ušetřený kilobajt se počítá, ale ne na úkor kompatibility.

Zde najdete další tipy pro optimalizaci obrázků na webu a detailní informace o formátu WebP.