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í

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

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

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