====== AVIF (AV1 Image File Format) ======

**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 [[it:dev:lcp|LCP]].



===== 1. Hlavní výhody AVIF =====

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.

---

===== 2. Technické pozadí =====

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ů.

---

===== 3. Podpora v prohlížečích a software =====

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+.

---

===== 4. Implementace na webu =====

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í:

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

---

===== 5. Vliv na výkon a SEO =====

Použití AVIF má přímý dopad na technické zdraví webu:
  * **Zlepšení [[it:dev:lcp|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 [[it:dev:lighthouse|Lighthouse]]:** Nástroje od Google aktivně doporučují "Serve images in next-gen formats", kam AVIF patří.

----
//Související články://
  * [[it:dev:lcp|LCP – Largest Contentful Paint]]
  * [[it:dev:lighthouse|Google Lighthouse a audity webu]]
  * [[it:dev:web_tech|Moderní webové technologie]]

//Tagy: {{tag>dev web graphics avif compression performance lcp seo}}//