WebP a AVIF: moderní formáty obrázků na web
WebP a AVIF jsou formáty obrázků navržené pro web. Při stejné viditelné kvalitě bývají soubory menší než u JPG a PNG, takže se stránka rychleji načte, hlavně na mobilu. Pro firemní web s galerií nebo e-shop s tisíci fotkami je to jeden z nejjednodušších způsobů, jak zrychlit načítání.
Aktualizováno
Srovnání formátů
| Formát | Kdy použít | Poznámka |
|---|---|---|
| JPG | Fotky, záloha pro staré prohlížeče | Univerzální, ale soubory bývají větší. |
| PNG | Grafika s průhledností, snímky obrazovky | Bezeztrátový, u fotek zbytečně velký. |
| WebP | Fotky i grafika na webu | Umí ztrátovou i bezeztrátovou kompresi a průhlednost. |
| AVIF | Fotky, kde chcete co nejmenší soubor | Obvykle ještě menší než WebP, kódování je pomalejší. |
| SVG | Loga, ikony, jednoduché ilustrace | Vektor, ostrý v každé velikosti. |
O kolik menší soubor vyjde, záleží na obrázku a nastavení kvality. Proto nevěřte obecným procentům a porovnejte výsledek na vlastních fotkách: stejný obrázek uložte v JPG, WebP a AVIF a podívejte se na velikost i na detaily (tváře, text, jemné přechody).
Jak je na web nasadit se zálohou
Aby obrázek zobrazil každý prohlížeč, používá se prvek picture. Prohlížeč vezme první formát, kterému rozumí:
<picture>
<source srcset="fasada.avif" type="image/avif">
<source srcset="fasada.webp" type="image/webp">
<img src="fasada.jpg" alt="Zateplená fasáda rodinného domu"
width="1200" height="800" loading="lazy">
</picture>Moderní systémy to dělají samy. Generují několik velikostí a formátů a prohlížeči pošlou tu nejvhodnější. Spolu s lazy loadingem a CDN to bývá to, co udělá největší rozdíl v rychlosti stránky s fotkami.
Na co si dát pozor
- Správná velikost je důležitější než formát. Fotka z foťáku v plném rozlišení zůstane těžká i ve WebP. Nejdřív zmenšete na rozměr, ve kterém se zobrazí.
- Příliš silná komprese rozmaže detaily; u produktových fotek, kde zákazník zkoumá materiál, šetřete opatrně.
- Sdílení na sociálních sítích a náhledové obrázky (og:image) dávejte v JPG nebo PNG; ne každá služba WebP a AVIF zpracuje.
- Originály si schovejte. Na web patří zmenšené verze, do archivu plné rozlišení.
Jak fotky připravit, jakou mají mít velikost a co fotit, popisuje průvodce fotky na web. Jak změřit výsledek, ukazuje test rychlosti webu. Weby, které stavíme, převádějí obrázky do moderních formátů automaticky; u stávajícího webu to nastavíme v rámci hodinové práce za 1 000 Kč.
Časté otázky
Jak převést obrázek WebP na JPG?
Nejjednodušší je otevřít ho v prohlížeči nebo grafickém programu a uložit či exportovat jako JPG. Většina současných editorů fotek formát WebP otevře. Pokud obrázek potřebujete do starého programu nebo pro tisk, převod nic nezkazí, jen bude soubor větší.
Podporují WebP a AVIF všechny prohlížeče?
Současné verze běžných prohlížečů (Chrome, Edge, Firefox, Safari) zobrazí oba formáty. Problém mohou mít jen hodně staré verze, hlavně starší Safari na neaktualizovaných zařízeních. Proto se na webu používá záloha v JPG nebo PNG, kterou prohlížeč dostane, když moderní formát nezná.
Mám fotky na web nahrávat rovnou ve WebP?
Pokud to váš systém neumí sám, ano. Řada redakčních systémů a frameworků ale převod dělá automaticky: nahrajete kvalitní JPG a web vytvoří menší verze ve WebP nebo AVIF. Pak je lepší nahrávat originál a nechat převod na systému.