AVIF je vysoce efektivní formát pro kompresi obrázků, který vyvinula skupina AOMedia (Alliance for Open Media). Jeho hlavním cílem je drasticky snížit velikost souborů při zachování vysoké vizuální kvality, což je klíčové pro rychlost načítání webu a metriky LCP.

AVIF přináší řadu vylepšení oproti tradičním formátům:

• Extrémní komprese: Dosahuje o 50 % menší velikosti než JPEG a o 20–30 % menší než WebP při srovnatelné kvalitě.
• Vysoký dynamický rozsah (HDR): Podporuje 10-bitovou a 12-bitovou barevnou hloubku (běžný JPEG má pouze 8-bit).
• Bezztrátová i ztrátová komprese: Podobně jako WebP zvládne oba režimy.
• Podpora průhlednosti (Alfa kanál): Může nahradit PNG pro grafiku s průhledným pozadím.
• Animace: Dokáže ukládat sekvence snímků (podobně jako GIF), ale s mnohem vyšší efektivitou.
• Royalty-free: Formát je zdarma pro všechny, bez nutnosti platit licenční poplatky.

—

AVIF využívá pokročilé algoritmy z video kodeku AV1, jako je například:

• Intra-prediction: Predikce obsahu bloku na základě okolních pixelů.
• Chroma subsampling: Efektivnější kódování barevných informací.
• Pokročilé filtry pro vyhlazování: Minimalizace „kostičkování“ (blocking artifacts) u velmi malých souborů.

—

Od roku 2023 je podpora AVIF již velmi široká:

• Prohlížeče: Chrome, Firefox, Opera, Edge i Safari (od verze 16).
• Grafické editory: Adobe Photoshop (s pluginem nebo v nových verzích), GIMP, Affinity Photo.
• OS: Windows 10/11 (s rozšířením), macOS Ventura, Android 12+.

—

Vzhledem k tomu, že starší prohlížeče (např. Internet Explorer nebo staré verze Safari) AVIF nepodporují, doporučuje se používat prvek <picture>. Prohlížeč si tak vybere nejlepší formát, kterému rozumí:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Popis obrázku">
</picture>

—

Použití AVIF má přímý dopad na technické zdraví webu:

• Zlepšení LCP: Menší soubory se stáhnou rychleji, což urychluje vykreslení hlavního obsahu.
• Nižší přenos dat: Šetří náklady na hosting a data uživatelů na mobilních zařízeních.
• Lepší hodnocení v Lighthouse: Nástroje od Google aktivně doporučují „Serve images in next-gen formats“, kam AVIF patří.

Související články:

• LCP – Largest Contentful Paint
• Google Lighthouse a audity webu
• Moderní webové technologie

Tagy: dev web graphics avif compression performance lcp seo