WebP vs AVIF vs JPEG vs PNG: který formát obrázků zvolit a jak zmenšit velikost souborů?

V roce 2026 mají všechny čtyři formáty své místo, ale pro odlišné úkoly:

• AVIF nejčastěji vítězí velikostí přenosu u fotografií a složitých obrazů.
• WebP nabízí velmi dobrý poměr komprese, funkcí, kompatibility a nákladů na nasazení.
• JPEG zůstává nejbezpečnějším fallbackem pro fotografie a systémy s neznámými požadavky.
• PNG se hodí hlavně pro bezztrátovou rastrovou grafiku, screenshoty rozhraní, přesné pixely a kvalitní průhlednost.

TL;DR: pro fotografie servírujte nejprve AVIF, potom WebP a JPEG ponechte jako fallback. U screenshotů, jednoduchých grafik a průhlednosti porovnejte bezztrátový WebP nebo AVIF s PNG. Pro ikony a loga je obvykle lepší SVG než kterýkoli z těchto rastrových formátů.

Funkce, kompatibilita a doporučení byly naposledy ověřeny 23. července 2026.

Hlavní rozdíly

AVIF podporuje ztrátovou i bezztrátovou kompresi, průhlednost, animaci, HDR a široký barevný gamut. WebP kombinuje ztrátový a bezztrátový režim, alfa kanál a animaci. PNG je bezztrátový a podporuje částečnou průhlednost, ale u fotografií obvykle vytváří příliš velké soubory.

Rychlá volba podle typu assetu

Jeden formát by se neměl vnucovat všem obrázkům. Nejlepší výsledek přináší politika podle typu assetu, nikoli pravidlo „všechno převést do AVIF“.

1. JPEG: stále užitečný, ale zřídka nejlepší hlavní volba

JPEG byl navržen pro fotografie. Používá ztrátovou kompresi, která odstraňuje informace méně viditelné lidským okem. Fotografie tak mohou být výrazně menší než bezztrátové PNG, ale příliš silná komprese vytváří bloky, barevné posuny a ztrátu detailů.

Výhody JPEG

• téměř univerzální podpora v prohlížečích, editorech, CMS a externích platformách,
• spolehlivý fallback pro fotografie,
• rychlé kódování a dekódování,
• podpora progressive JPEG,
• vyzrálé optimalizační nástroje, například MozJPEG.

Progressive JPEG nejprve zobrazí hrubší verzi přes celou plochu a poté ji postupně zpřesňuje. Může být o něco menší než baseline JPEG a při pomalém připojení působí rychleji.

Omezení JPEG

• bez alfa kanálu,
• bez animace,
• komprese je ztrátová,
• ostré čáry, text a prvky UI rychle získávají artefakty,
• opakované ukládání snižuje kvalitu,
• WebP a AVIF bývají při podobné kvalitě menší.

Oficiální studie týmu WebP naměřila WebP soubory o 25-34 % menší než JPEG při srovnatelném SSIM. Nejde o univerzální garanci, protože výsledek závisí na zdroji, verzi enkodéru, nastavení a použité metrice kvality.

Kdy zvolit JPEG v roce 2026?

JPEG dává smysl, když:

• jeden soubor musí fungovat v co největším počtu systémů,
• nemáte kontrolu nad klientem, který obrázek přijímá,
• soubor míří do staršího CMS, e-mailu, dokumentu nebo externí platformy,
• potřebujete fallback v <picture>,
• proces generování AVIF/WebP ještě není připraven.

Na moderním frontendu je však obvykle vhodné nejprve servírovat novější formát.

2. PNG: bezztrátová kvalita, ostrost a průhlednost za cenu velikosti

PNG používá bezztrátovou kompresi a zachovává pixely bez ztráty způsobené kódováním. Podporuje také alfa kanál s mnoha úrovněmi průhlednosti.

Výhody PNG

• velmi ostrý text, čáry a prvky rozhraní,
• plná alfa průhlednost,
• žádná generační ztráta při opakovaném uložení,
• univerzální kompatibilita,
• dobrý referenční rastrový formát.

Omezení PNG

• fotografie bývají výrazně větší než JPEG, WebP nebo AVIF,
• klasické PNG není animované; animovanou variantou je APNG,
• raster se škáluje hůře než SVG,
• zbytečná metadata, kanály nebo nevhodná paleta soubor zvětšují,
• samotná průhlednost už není automatickým důvodem pro PNG.

web.dev uvádí, že PNG téměř nikdy není správným formátem pro doručování fotografií. Jednoduché poloprůhledné grafiky by se měly porovnat s WebP nebo AVIF.

Kdy PNG stále vyhrává?

• screenshot obsahuje malý text a tenké čáry,
• potřebujete bezztrátovou rastrovou kopii,
• cílová platforma přijímá PNG, ale ne WebP/AVIF,
• grafika má malou paletu barev,
• dokonalá reprodukce je důležitější než přenos,
• soubor slouží jako zdroj pro další kódování.

U log, ikon, grafů a jednoduchých ilustrací nejprve vyzkoušejte SVG.

3. WebP: nejpraktičtější výchozí formát

Google vyvinul WebP jako efektivnější alternativu JPEG a později doplnil bezztrátový režim, průhlednost a animaci. WebP tak může nahradit fotografie JPEG, mnoho PNG a některé animace GIF.

Výhody WebP

• ztrátový i bezztrátový režim,
• průhlednost,
• animace,
• široká podpora v aktuálních prohlížečích,
• vyzrálý ekosystém CMS, knihoven a obrazových CDN,
• obvykle menší než JPEG nebo PNG,
• často jednodušší a rychlejší kódování než AVIF.

Omezení WebP

• bez progresivního zobrazení,
• starší software a některé publikační procesy stále vyžadují JPEG nebo PNG,
• hodnota „quality“ není mezi formáty přímo srovnatelná,
• WebP není vždy menší než dobře zakódovaný AVIF,
• bezztrátový WebP neporazí u každé jednoduché grafiky optimalizovaný PNG.

Kdy je WebP nejlepší volbou?

WebP je ideální, pokud chcete:

• rychle zmenšit fotografie bez složité pipeline,
• zachovat průhlednost,
• obsloužit téměř všechny aktuální prohlížeče jedním moderním formátem,
• zpracovávat obrázky lokálně nebo na vyžádání,
• omezit počet produkčních formátů,
• vyvážit kvalitu, velikost a náklady kódování.

POLPROG Konvertor a optimalizátor obrázků zpracovává PNG, JPG a WebP lokálně v prohlížeči a podporuje konverzi, kompresi, změnu rozměrů i odstranění metadat.

4. AVIF: minimální přenos a nejširší moderní funkce

AVIF je založen na kodeku AV1 a kontejneru HEIF. Podporuje ztrátovou i bezztrátovou kompresi, alfa kanál, animaci, HDR a široký barevný gamut.

Výhody AVIF

• velmi vysoká účinnost komprese,
• dobrá vizuální kvalita při nízkém bitrate,
• ztrátový i bezztrátový režim,
• průhlednost a animace,
• 8-, 10- a 12bitové obrázky a HDR,
• podpora ve všech aktuálních hlavních prohlížečích,
• dobré výsledky u fotografií, gradientů a složitých obrazů.

AVIF je funkcí Baseline od ledna 2024, což znamená podporu v aktuálních verzích hlavních browserových enginů.

Omezení AVIF

• bez progresivního vykreslování,
• kódování může být výpočetně náročnější než JPEG nebo WebP,
• výsledek silně závisí na enkodéru, rychlosti, chroma subsamplingu a nastavení,
• některé externí systémy stále odmítají .avif,
• velmi malé grafiky nemusí být menší než SVG, PNG nebo WebP,
• nevhodné nastavení může rozmazat textury nebo drobný text.

MDN uvádí, že AVIF může nabídnout o něco lepší kompresi než WebP, ale nepodporuje progresivní vykreslování. Pevný slib typu „AVIF je vždy o 50 % menší“ není správný.

Kdy AVIF nasadit?

• obrázky tvoří velkou část přenosu,
• web používá mnoho produktových nebo hero fotografií,
• tým má automatickou obrazovou pipeline,
• assety se kódují jednou a mnohokrát doručují,
• je důležité HDR, široký gamut nebo vyšší bitová hloubka,
• lze zachovat WebP/JPEG jako fallback.

5. Je AVIF vždy menší než WebP?

Ne. web.dev ho označuje za velmi silnou volbu pro fotografické katalogy, s WebP jako moderním fallbackem a JPEG jako nejspolehlivějším výchozím formátem. Výsledek závisí na:

• obsahu a rozlišení,
• šumu,
• textu a tenkých čarách,
• ztrátovém či bezztrátovém režimu,
• bitové hloubce a subsamplingu,
• implementaci a verzi enkodéru,
• nastavení rychlosti,
• použité metrice kvality.

Porovnávejte při ekvivalentní vizuální kvalitě, nikoli podle stejného čísla posuvníku. quality=75 neznamená v JPEG, WebP a AVIF totéž.

6. Core Web Vitals a LCP

Moderní formát může zkrátit dobu stahování a zlepšit část LCP související s přenosem. Nevyřeší pozdní objevení obrázku, pomalý server, špatné rozměry ani vykreslování řízené JavaScriptem.

Pro LCP obrázek:

• nepoužívejte loading="lazy",
• umístěte jej do HTML co nejdříve,
• zvažte fetchpriority="high",
• uveďte správné width a height,
• dodejte správné rozlišení pomocí srcset a sizes,
• omezte přesměrování a závislosti,
• nestahujte současně nepoužité varianty.

web.dev nedoporučuje lazy loading pro obrázky nad foldem, zejména pro kandidáty LCP. fetchpriority="high" může pomoci s dřívější prioritizací.

Více v článcích Audit webu v roce 2026 a Core Web Vitals v praxi.

7. Správná implementace pomocí <picture>

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-800.avif 800w,
            /images/hero-1280.avif 1280w,
            /images/hero-1920.avif 1920w"
    sizes="100vw"
  >
  <source
    type="image/webp"
    srcset="/images/hero-800.webp 800w,
            /images/hero-1280.webp 1280w,
            /images/hero-1920.webp 1920w"
    sizes="100vw"
  >
  <img
    src="/images/hero-1280.jpg"
    srcset="/images/hero-800.jpg 800w,
            /images/hero-1280.jpg 1280w,
            /images/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="1080"
    fetchpriority="high"
    alt="Panel analýzy výkonu webu"
  >
</picture>

Prohlížeč vybere první podporovaný <source>, proto má být AVIF před WebP a běžný <img> zajišťuje fallback.

Google může najít obrázek z atributu src prvku <img>, i když je uvnitř <picture>. Google Search podporuje JPEG, PNG, WebP a AVIF.

Pro obrázky mimo viewport lze použít:

<img
  src="/images/example.webp"
  width="960"
  height="640"
  loading="lazy"
  decoding="async"
  alt="Srovnání velikosti obrazových souborů"
>

Lazy loading nepřidávejte automaticky k hero obrázkům, hlavním produktovým fotografiím ani kandidátům LCP.

8. Responzivní obrázky jsou důležitější než samotný formát

Konverze obrázku 2400 × 1600 do AVIF problém neřeší, pokud telefon zobrazuje pouze 360 px. Správný počet pixelů může ušetřit více než samotná změna kodeku.

Zvažte:

• šířkové varianty v srcset,
• správné sizes,
• samostatný mobilní ořez,
• vysokou hustotu jen tam, kde je viditelná,
• limity rozměrů v CMS,
• skutečné miniatury místo CSS zmenšení velkého zdroje.

Formát, rozměry a komprese tvoří jeden systém.

9. Jak férově porovnávat kvalitu?

1. Začněte originálem nebo bezztrátovým zdrojem.
2. Vygenerujte více úrovní kvality pro každý formát.
3. Kontrolujte v cílové velikosti zobrazení.
4. Prohlédněte tváře, vlasy, gradienty, text, hrany a tmavé oblasti.
5. Změřte náklady kódování a dekódování.
6. Vyberte nejmenší soubor s přijatelnou kvalitou.
7. Test opakujte pro různé typy obrázků.

SSIM může pomoci automatizaci, ale nenahrazuje vizuální kontrolu.

10. Časté chyby

Překódování již silně komprimovaného JPEG

AVIF neobnoví ztracené detaily. Použijte originál nebo bezztrátový zdroj.

Jedna hodnota kvality pro vše

Portrét, screenshot, noční fotografie a gradient reagují odlišně. Pipeline by měla mít profily nebo kontrolu kvality.

Chybějící rozměry

Bez width a height může vzniknout CLS bez ohledu na formát.

Lazy loading hero obrázku

I malý AVIF dorazí pozdě, pokud je objeven až po renderingu nebo má loading="lazy".

Příliš mnoho variant

Mnoho šířek ve čtyřech formátech zvyšuje úložiště a čas buildu. Generujte pouze používané varianty.

PNG pro každou průhlednost

WebP a AVIF také podporují alfa kanál. PNG zachovejte, když dává lepší hrany, menší soubor nebo je vyžadován platformou.

Raster pro ikony a loga

SVG je obvykle lehčí, škálovatelné a snadněji stylovatelné.

11. SEO obrázků

Google Search podporuje všechny čtyři formáty. Neexistuje zdokumentovaný rankingový bonus pouze za .avif nebo .webp. Přínos je nepřímý přes výkon a uživatelskou zkušenost.

Prověřte také:

• stabilní a popisnou URL,
• příponu odpovídající skutečnému typu,
• správný MIME typ,
• užitečný alternativní text,
• viditelný textový kontext,
• přístup pro Googlebota,
• správné rozměry,
• image sitemap u obrazově orientovaných webů,
• licenční metadata, pokud jsou relevantní.

Použijte Kontrolu stavu webu pro techniku a výkon a Náhled Open Graph pro sociální karty.

12. Doporučená obrazová politika

Jednoduchá varianta

• WebP jako hlavní formát,
• JPEG fallback pro fotografie,
• PNG jen pro vybrané grafiky,
• SVG pro loga a ikony,
• srcset pro důležité obrázky.

Optimální varianta

• AVIF první,
• WebP druhý,
• JPEG fallback,
• bezztrátový WebP/AVIF nebo PNG pro screenshoty,
• automatické šířkové varianty,
• rozpočet kvality a přenosu,
• monitoring LCP a RUM.

E-commerce

• produktové fotografie v AVIF a WebP,
• JPEG fallback,
• oddělené velké a thumbnail varianty,
• zoomový obrázek až po interakci,
• kritická fotografie bez lazy loadingu,
• test jemných textur, barev a průhlednosti,
• cache a obrazové CDN.

Závěr

AVIF je nejlepší, když je prioritou minimální přenos a máte kvalitní pipeline. WebP je nejlepší univerzální formát pro jednoduchost, kompatibilitu a silnou kompresi. JPEG zůstává nejbezpečnějším fallbackem pro fotografie a PNG má být používán cíleně pro bezztrátovou grafiku a průhlednost.

Doporučená strategie:

AVIF → WebP → JPEG

pro fotografie a:

bezztrátový AVIF/WebP ↔ PNG

pro ostré nebo průhledné assety po skutečném srovnání.