TL;DR – Výměna JPEG/PNG za AVIF (nebo WebP tam, kde AVIF není podporován) může zmenšit velikost obrázku o 30‑80 %, zkrátit LCP až o 0,5 s a zvýšit SEO bez jakýchkoli vizuálních kompromisů. Jednoduchý <picture> fallback nebo pravidlo Accept‑header vás tam dostane během minut a většina CDN může těžkou práci provést automaticky.

Proč jsou formáty obrázků „next‑gen“ důležité právě teď

Každá milisekunda se na webu počítá. Studie od Akamai a Google ukazují, že uložených 100 ms se překládá do 1‑2 % nárůstu tržeb pro e‑commerce stránky. Obrázky jsou největším viníkem na typické stránce – > 60 % celkových bajtů (HTTP Archive, 2024).

Představte si AVIF a WebP. Oba slibují 30‑80 % menší soubory než starší JPEG/PNG a přitom zachovávají vizuální kvalitu nerozeznatelnou lidským okem. Přínos je okamžitý:

  • Nižší šířka pásma → levnější datové tarify pro mobilní uživatele.
  • Rychlejší načítání stránek → lepší Core Web Vitals, vyšší hodnocení v Google.
  • Snížené zatížení serveru → menší cache stopy, levnější účty za CDN.

Pokud již optimalizujete CSS/JS, komprese obrázků je snadno dosažitelný úkol, který přináší největší návratnost investic.

AVIF vs. WebP – rychlé srovnání

VlastnostAVIFWebP
PůvodOdvozeno od AV1 (ISO/IEC 23000‑22, 2020)Formát založený na VP8 od Googlu (2010)
KompreseZtrátová i bezztrátová (obě na bázi AV1), alfa, HDR (10‑bit)Ztrátová (VP8), bezztrátová, alfa, animace
Bitová hloubka8‑bitová a 10‑bitová (HDR)Pouze 8‑bitová
Typické zmenšení oproti JPEG45‑65 % menší (ztrátová)25‑35 % menší (ztrátová)
Typické zmenšení oproti PNG50‑70 % menší (bezztrátová)30‑45 % menší (bezztrátová)
Hardwarové dekódováníRostoucí podpora GPU (Intel Xe, AMD, ARM Mali)Nativní na většině CPU/GPU; hardwarová akcelerace na Androidu, Chrome, Safari iOS 16+
AnimaceAVIF‑A (experimentální)WebP‑A (stabilní, široce používaný)
Podpora prohlížečů (dub 2026)Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+

Závěr: AVIF vítězí v čisté kompresi a podpoře HDR, zatímco WebP má nejširší pokrytí starších prohlížečů a vyspělý animační ekosystém. Praktický přístup je poskytovat AVIF jako první, s fallbackem na WebP a poté na JPEG/PNG pro několik výjimek.

Podpora prohlížečů a fallback strategie, kterou můžete zkopírovat

1. Vzor <picture> (vyjednávání na straně klienta)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image of a sunrise over the city" loading="lazy" width="1200" height="800">
</picture>

Prohlížeč vybere první formát, který rozumí; starší prohlížeče jednoduše ignorují značky <source> a načtou JPEG fallback.

2. Vyjednávání Accept hlavičky na straně serveru (pro jedinou URL)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Pokud klient oznámí image/avif, Nginx podá hero.avif; jinak se přepne na WebP nebo JPEG.

3. Nechte CDN udělat těžkou práci

Většina edge poskytovatelů (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) má přepínač, který automaticky převádí nahrané JPEG/PNG na AVIF/WebP na základě hlavičky Accept. Zapněte ho, vyprázdněte cache a máte hotovo.

Nástroje a workflow – získání AVIF/WebP do vašeho build pipeline

ÚkolAVIF commandWebP command
Kódování bezztrátověavifenc -l -q 0 input.png output.avifcwebp -lossless input.png -o output.webp
Kódování se ztrátou (kvalita 50)avifenc -q 50 input.jpg output.avifcwebp -q 50 input.jpg -o output.webp
Dávková konverze (Node)sharp('src/**/*.png').avif({quality:50}).toFile('dist/')sharp('src/**/*.png').webp({quality:50}).toFile('dist/')
Animovaná konverzeavifenc --animation frames/*.png output.avif (still experimental)gif2webp animation.gif -o animation.webp

Jednořádkový příkaz pro většinu CI pipeline

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Tip: Uchovávejte originální vysoké rozlišení zdroj v repozitáři; generujte AVIF/WebP za běhu během kroku build. Tím můžete znovu spustit s jiným nastavením kvality bez opětovného nahrávání assetů.

Reálný dopad – čísla, která mají význam

ScénářJPEG (základ)WebP (ztrátová)AVIF (ztrátová)AVIF (bezztrátová)
1 MP foto, 90 % kvalita120 KB78 KB (‑35 %)55 KB (‑55 %)68 KB (‑43 %)
Transparentní logo (500 × 500)45 KB (PNG)28 KB (‑38 %)22 KB (‑51 %)24 KB (‑47 %)
5‑s animovaný banner (10 fps)1.2 MB (GIF)380 KB (‑68 %)340 KB (‑72 %)–

Zdroj: Audity WebPageTest + Lighthouse (2024‑2025) na maloobchodní stránce, která prováděla A/B test po dobu 4 týdnů. Varianta AVIF přinesla 0,4 s rychlejší LCP a 12 % nárůst mobilní konverze.

Případové studie, které můžete citovat

  • Obchodníci na Shopify (2025) – AVIF pro náhledy produktů snížil hmotnost stránky o 38 % a zkrátil LCP o 0,3 s na 3G.
  • The New York Times – Přepnuli inline obrázky v článcích na AVIF, ušetřili 45 % šířky pásma a zaznamenali 12 % nárůst mobilního zapojení.
  • Airbnb – Profilové obrázky hostitelů byly podávány jako AVIF na podporovaných prohlížečích, což přineslo 0,4 s rychlejší první vykreslení na pomalých sítích.

Co dál – rychlý kontrolní seznam

  1. Zkontrolujte aktuální objem obrázků – Lighthouse „Serve images in next‑gen formats“.
  2. Přidejte krok do build procesu, který generuje AVIF (a WebP jako fallback) pomocí sharp nebo avifenc.
  3. Aktualizujte HTML pomocí bloku <picture> nebo povolte vyjednávání Accept na straně serveru.
  4. Nastavte dlouhodobé cache hlavičky (Cache‑Control: max-age=31536000, immutable).
  5. Povolte lazy‑loading (loading="lazy" nebo IntersectionObserver), aby se předešlo dekódování AVIF mimo obrazovku.
  6. Zapněte konverzi na CDN edge, pokud nechcete ukládat AVIF lokálně.
  7. Sledujte Core Web Vitals – měli byste vidět pokles LCP o 0,2‑0,5 s během týdne po nasazení.

Pohled do budoucna: Do roku 2028 IDC předpovídá, že > 80 % webových obrázků bude primárně AVIF, díky podpoře HDR a nadcházející hlavičce „image format negotiation“ v Chrome 130+. Včasná adopce nejen zlepšuje výkon dnes, ale také budoucnost zajišťuje vašemu webu pro další vlnu vizuálních webových zážitků.

Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp