WebP je formát bitmapových obrázků, který představil Google v roce 2010.
Dnes už je podporovaný prakticky všemi prohlížeči, když nepočítáme zastaralý a obvykle málo nepoužívaný Internet Explorer.
Pojďme si projít hlavní přínosy:
- možnost výrazného snížení datového objemu v porovnání s JPEG i PNG
- alfa průhlednost, kterou dosud nabízel jen formát PNG
- podpora animací, kterou umí jen dědeček GIF
WebP naopak oproti JPEG neumí například subsampling chroma kanálu a progresivní vykreslování.
WebP je také prý pomalejší pro dekódování a více zatěžuje procesor. Ale na images.guide se píše:
Back in 2013, the compression speed of WebP was ~10× slower than JPEG but is now negligible (some images may be 2× slower). For static images that are processed as part of your build, this shouldn’t be a large issue. Dynamically generated images will likely cause a perceivable CPU overhead and will be something you will need to evaluate.
Takže by to mělo být ke zvážení, jen pokud obrázky generujete v reálném čase.
Podpora v prohlížečích: Partička kolem Chrome a Edge
Jde o formát z dílny Google, i proto jej podporují všechny prohlížeče postavené na jádru Chrome – například Microsoft Edge, Opera nebo prohlížeč od Seznam.cz – a Firefox. Nově také Safari. Pokud to od oka dobře počítám, může jít ke dni psaní textu v Česku mezi 90 - 98 % uživatelů.
- Podporují: Chrome a prohlížeče postavené na Chromiu, Firefox, Safari od verze 14.
- Nepodporují a podporovat nebudou: Internet Explorer všech verzí.
Více informací o podpoře: caniuse.com/webp.
Co tedy uděláme s menší částí uživatelů, kteří používají prohlížeče bez podpory nového formátu? Žádné stresy, web bez obrázků jim dodávat nemusíme.
Fallback do JPEG
Řešením je vygenerovat dvě sady obrázků – ve WebP i JPEG formátu a pomocí značky PICTURE nechat na prohlížečích výběr té správné:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…">
</picture>
Chrome a jeho parta tady stáhnou jen WebP, zbývající třetina uživatelů dostane své „jépégéčko“.
Pokud toto řešení nemůžete nasadit, je zde ještě například možnost detekce na serveru nebo přes .htaccess. Řešení s <picture>
ale bude výkonnostně nejefektivnější.
Detekci podpory formátu WebP, ale i jeho jednotlivých vlastností, pro obrázky linkované z CSS lze obstarat knihovnou Modernizr. Zápis v CSS by pak mohl vypadat takto:
.box {
background-image: url("image.jpg");
}
.webp .box {
background-image: url("image.webp");
}
Jednoduchý detekční skript nabízí také Google na stránkách o WebP.
Má kvůli WebP smysl zdvojovat obrázky? Záleží od situace, ale hlavně u větších webů se to myslím velmi vyplatí.
Jaké množství dat WebP vlastně ušetří?
O případu mého klienta, e-shopu VašeČočky.cz jsem psal:
Když kolegové nasadili WebP obrázky, ušetřili 30 % datového objemu úvodní stránky (1250 kB › 950 kB) a o pětinu snížili čas pro Page Load (19,8 s › 16,8 s).
Podobné zkušenosti mám i z jiných testů a klientských projektů. Není výjimkou ani větší než poloviční ušetření obrázkových dat.
Jinak obecné studie od Googlu říkají, že WebP je menší následovně
- u bezztrátových obrázků typu PNG o 26 %
- u ztrátových obrázků typu JPG o 25-34 %
Jak WebP získat?
K červenci 2020 je už možností, jak generovat WebP obrázky opravdu hodně:
- Grafické aplikace: Sketch, Pixelmator nebo GIMP mají přímý export, Photoshop a další nástroje od Adobe jej nemají, ale existuje plugin.
- Specializované knihovny jako cwebp pro kodek libwebp.
- Pluginy do knihoven jako ImageMin typu imagemin-webp pro Grunt, Gulp či jiné sestavovače.
- PHP knihovny jako ImageMagick.
- online služby jako Kraken.io (Mají vynikající výsledky komprese, ale jsou většinou za peníze a to nemalé).
Další možnosti najdete na web.dev nebo images.guide.
Komentáře
Novinka
Nyní je možné přidávat komentáře.
Pro přidání názoru se prosím
přihlaste nebo si zřiďte účet.