WebP, AVIF a JPG v praxi: kolik místa ušetří?
Shrnutí: V testu pěti obrázků měl AVIF nejmenší soubor ve čtyřech případech, u jednoduché ploché grafiky vyhrálo PNG. Jde o výsledky konkrétních nastavení kompresoru Websio, nikoli o srovnání formátů při stejné obrazové kvalitě. Před výběrem nejmenšího souboru zkontrolujte jemné detaily, text a průhlednost: právě tam se v testu ukázaly rozdíly.
Obsah článku
Jaké obrázky prošly testem?
Sada obsahuje dvě skutečné fotografie a tři vytvořené testovací grafiky. Každý vstup se převedl do JPG, WebP, AVIF a PNG bez změny rozměrů. Všechny vstupní soubory jsou PNG, což je důležité hlavně u fotografií: velká úspora proti fotografii uložené v PNG neříká, kolik ušetříte proti již úspornému JPG.
| Vzorek | Co na něm sledovat | Rozměry |
|---|---|---|
| Kočka Chelsea | Jemnou srst, oči a rozostřené pozadí | 451 × 300 px |
| Šálek kávy | Hranu porcelánu, pěnu a kresbu dřeva | 600 × 400 px |
| Textová grafika | Písmo od 14 do 28 px, diakritiku a tenké linky | 960 × 540 px |
| Plochá ilustrace | Jednobarevné plochy a šikmé hrany | 960 × 540 px |
| Průhledná grafika | Barevný přechod, zaoblený okraj a poloprůhledný stín | 960 × 540 px |
Kočku fotografoval Stefan van der Walt, šálek kávy Rachel Michetti; oba snímky zveřejňuje scikit-image pod CC0. Šálek zastupuje produktové zátiší, nikoli studiovou fotografii na bílém pozadí. Textový vzorek je uměle vytvořená grafika, ne screenshot skutečné aplikace.
Fotografie jsou malé webové obrázky. Výsledky nelze přenést na plné fotografie z mobilu, noční snímky ani všechny produktové katalogy. U většího zdroje nejprve vyřešte potřebné rozměry obrázku.
Kolik bajtů zůstalo po kompresi?
Tabulka uvádí velikost celého souboru v desetinných kB, kde 1 kB = 1 000 bajtů. Výstupy lze otevřít přímo z buněk; přesná měření v bajtech obsahují také nastavení a kontrolní součty souborů.
| Vzorek | Vstupní PNG | JPG | WebP | AVIF | Výstupní PNG |
|---|---|---|---|---|---|
| Kočka | 240,51 | 20,01 | 18,87 | 11,39 | 90,65 |
| Káva | 466,71 | 41,67 | 41,25 | 22,82 | 150,25 |
| Text | 32,61 | 24,94 | 16,40 | 10,99 | 11,40 |
| Plochá ilustrace | 12,48 | 12,74 | 6,07 | 4,38 | 3,34 |
| Průhledná grafika | 31,25 | 11,95 | 15,01 | 8,20 | 18,31 |
U kávy je rozdíl mezi JPG a WebP pouhých 425 bajtů. Převádět podobný obrázek jen kvůli tak malé úspoře nemusí mít praktický přínos. AVIF zde zabral přibližně polovinu velikosti JPG, ale liší se i zachování detailů.
Plochá ilustrace dopadla jinak: nejmenší bylo PNG a JPG se dokonce zvětšilo proti vstupu. Převod tedy sám o sobě nezaručuje úsporu. Pokud už máte malý soubor s několika barvami, vyzkoušejte i zachování jeho formátu.
Co se změní, když už vstupem je JPG?
Stejné fotografie prošly druhým kolem: nejprve byly z původního PNG uloženy jako JPG v kvalitě 90 přes mozjpeg a teprve potom kompresorem. Jde o model již exportované fotografie, nikoli původní soubor z fotoaparátu. Rozměry zůstaly stejné.
| Vzorek | Vstupní JPG | Výstupní JPG | WebP | AVIF |
|---|---|---|---|---|
| Kočka | 28,72 | 19,32 | 17,40 | 11,27 |
| Káva | 59,80 | 39,51 | 37,86 | 22,67 |
Hodnoty jsou opět v kB. AVIF u kočky ušetřil přibližně 61 % proti vstupnímu JPG; proti PNG v první tabulce to bylo přibližně 95 %. Procento úspory závisí i na tom, z jakého souboru začínáte. Nový JPG byl u obou snímků přibližně o třetinu menší než vstup, ale jeho kvalita klesla z nastavení 90 na 82 a proběhlo další ztrátové uložení. Menší výstup proto nelze vydávat za stejný obraz v úspornějším obalu.
Co se změnilo v obraze?
Velikost souborů je přesné měření; následující posouzení obrazu je vizuální. Kontrola proběhla na stejných výřezech, včetně dvojnásobného zvětšení bez vyhlazování. Takové zvětšení pomáhá hledat vady, ale konečné rozhodnutí má vycházet i z velikosti, ve které obrázek uvidí návštěvník.
- Fotografie: u AVIF je v jemných detailech srsti a pěny patrné vyhlazení. Paletové PNG naopak přidává viditelnou tečkovanou strukturu do některých přechodů. Zachování přípony PNG zde neznamená zachování všech původních barev.
- Text: všechny varianty zůstaly čitelné. Kolem drobných písmen v JPG je však více nečistot; PNG v tomto vzorku zachovalo čistší kresbu. AVIF byl proti PNG menší jen o 409 bajtů, takže samotná úspora nemusí převážit požadavek na co nejčistší text.
- Plochá ilustrace: u JPG se kolem šikmé modré hrany objevuje světlý lem. PNG bylo současně nejmenší a při vizuální kontrole mělo čistou hranu.
- Průhledná grafika: PNG po omezení palety viditelně změnilo přechod a stín. JPG vyplnilo průhledné okolí bíle. WebP a AVIF zachovaly průhledné okolí i stín, takže je lze položit na tmavý podklad; jejich barevné přechody přesto nejsou totožné se zdrojem.
U průhledných obrázků proto porovnávejte výstup na světlém i tmavém pozadí. Menší JPG s bílým obdélníkem není rovnocennou náhradou průhledného souboru. Praktickou kontrolu popisuje návod na zmenšení PNG.
Proč to není žebříček nejlepších formátů?
Test spustil stejnou funkci, kterou používá kompresor obrázků Websio. JPG a WebP mají nastavenou kvalitu 82, AVIF 55 a PNG používá paletu s nastavením kvality 80. Číslo kvality není společná stupnice pro různé formáty. Z těchto výsledků nelze říct, který formát je nejmenší při totožné vizuální kvalitě.
Vstupy se převedly do barevného prostoru sRGB; rozměry se při kompresi nezměnily. Úplný protokol uchovává přesné parametry i verze knihoven pro opakování měření.
Pro volbu do konkrétního webu zůstává důležité také to, které formáty přijme cílová služba a zda potřebujete průhlednost. Test pomáhá vybrat varianty k vyzkoušení, nenahrazuje kontrolu vlastního obrázku.
Co když je původní soubor už menší?
Doplňkový pokus použil silně komprimované JPG kočky o velikosti 3 908 bajtů. Při zachování JPG vrátil nástroj původní soubor, protože nové kódování by ho zvětšilo. Ověření po bajtech potvrdilo shodu, včetně přidaného testovacího údaje EXIF.
Převod téhož souboru do WebP vytvořil 8 976 bajtů, tedy více než dvojnásobek. Nový formát neobnovil detaily ztracené předchozí kompresí. Tento příklad ukazuje také hranici ochrany před zvětšením: kompresor vrací menší originál při zachování stejného formátu, ale při požadovaném převodu dodá i větší soubor.
Vrácený originál si ponechal metadata. Nástroj proto nepoužívejte jako záruku odstranění EXIF. Pro běžné zmenšení fotografie pracujte z nejkvalitnějšího dostupného zdroje a původní soubor si ponechte.
Často kladené otázky
O kolik menší obrázky zrychlí web?
Samotný rozdíl v bajtech nestačí k výpočtu času. Záleží na připojení, mezipaměti a tom, které obrázky se skutečně načítají. Porovnejte stejnou stránku před výměnou a po ní za stejných podmínek; součet úspor v této tabulce není měření rychlosti webu.
Má smysl porovnání po čase opakovat?
Ano, pokud změníte exportní nastavení, kompresní nástroj nebo typ obrázků. Uložte si původní vstupy a porovnávejte s nimi, ne s už jednou zmenšenými výstupy. Nový encoder může dát jiné výsledky; proto protokol obsahuje jeho verzi.
Použité zdroje a metodika
Srovnání vychází z měření velikosti souborů a vizuální kontroly fotografií, textu, plochých barev a průhlednosti. Vlastnosti nastavení doplňuje primární dokumentace knihovny použité ke kompresi.
- Websio. Vlastní měření kompresoru, nastavení, verze knihoven a kontrolní součty. Úplná naměřená data. Měřeno 23. 9. 2026.
- scikit-image. Sample data: Chelsea a Coffee, původ snímků a licence CC0. Dokumentace datové sady. Přístup dne 23. 9. 2026.
- sharp. Output options: parametry JPEG, PNG, WebP a AVIF a zacházení s metadaty. Dokumentace výstupních formátů. Přístup dne 23. 9. 2026.
