Design & Grafika

WebP

Moderní webový formát obrázků od Googlu – menší velikost souboru než JPG/PNG při stejné kvalitě

(Web Picture format)

Co je WebP

WebP je obrázkový formát od Googlu, který při srovnatelné vizuální kvalitě vytváří menší soubory než JPG i PNG. Nabízí ztrátovou i bezztrátovou kompresi, průhlednost a dokonce animaci, takže jediným formátem pokryjete skoro všechno, co na web dáváte.

Proč to řeším jako marketér

Obrázky bývají nejtěžší část stránky. Lehčí soubory znamenají dřívější vykreslení hlavního obsahu, což měří Core Web Vitals, a rychlejší stránka udrží víc lidí na cestě k objednávce. U placené návštěvnosti jde dopad ještě dál: pomalá vstupní stránka zhoršuje hodnocení kvality v reklamních systémech a zvedá cenu za proklik. Za formát obrázku tak nepřímo platíte v rozpočtu kampaně.

Jak je to s podporou prohlížečů

Kdysi hlavní argument proti, dnes prakticky vyřešená věc. Aktuální verze Chrome, Firefoxu, Edge i Safari WebP zobrazí bez problémů. Potíž zbývá jinde: v e-mailových klientech, kde je podpora roztříštěná, a v reklamních systémech, které při nahrávání kreativ často pořád chtějí JPG nebo PNG. Podklady si proto nechávám dodat i v klasickém formátu a WebP nasazuju až na samotném webu.

Nasazení bez zásahu do kódu

Většina platforem to zvládne sama. Shoptet i WordPress s běžným optimalizačním pluginem vygenerují WebP variantu a pošlou ji prohlížečům, které si o ni řeknou; ostatním doručí původní soubor. Ruční řešení přes element picture s alternativou dává smysl u webů na míru. V obou případech platí jedna věc: převod nespraví obrázek nahraný v šířce čtyř tisíc pixelů do místa širokého čtyři sta. Nejdřív rozměr, potom formát.

Nejdřív rozměry, potom formát

U webů, kde mám na starost rychlost, si vždycky nechám vypsat seznam největších souborů, které stránka stahuje. Skoro pokaždé jsou nahoře obrázky a aspoň jeden z nich je zbytečně těžký. Převod do WebP nechávám až jako druhý krok, po zmenšení rozměrů, protože jinak jenom chytře komprimuju data, která na stránce stejně nikdo neuvidí. Bývá to jedna z prvních položek, které řeším v rámci technického SEO.

Časté otázky

Podporují WebP všechny prohlížeče?

Běžné prohlížeče v aktuálních verzích ano, Safari nevyjímaje. Weby proto WebP nasazují jako výchozí variantu a starším klientům posílají původní JPG nebo PNG. Jinak je to v e-mailu, kde se na podporu spoléhat nedá.

Nahradí WebP úplně JPG a PNG?

Na webu z velké části ano. Mimo web ne: do reklamních systémů, na tisk i do e-mailových šablon se pořád posílá JPG nebo PNG, takže si zdrojové soubory držte v obou podobách.

Zhorší se kvalita obrázku převodem do WebP?

Záleží na režimu. Ztrátový převod část informace zahodí podobně jako JPG, jen si za stejnou velikost souboru udrží víc detailu. Bezztrátový režim kvalitu nemění a hodí se na grafiku, kterou byste jinak ukládali do PNG.