WebP obrázky: datově úsporná alternativa k JPEG, PNG i GIF

Naposledy upraveno: 10. 6. 2018 – Autor: Martin Michálek

WebP je formát bitmapových obrázků, který představil Google v roce 2010.

Není sice podporovaný všemi prohlížeči, i tak je ale při vývoji dnešních webů velmi použitelný. 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: Jen partička kolem Google

Jde o formát z dílny Google, takže jej aktuálně finálně podporují pouze všechny prohlížeče postavené na Chrome. Pokud to dobře počítám, může jít ke dni psaní textu v Česku kolem 60 - 70 % uživatelů.

  • Chrome, Opera, Samsung Internet a stařičký Android Browser jej umí
  • Edge nedávno ohlásil, že na podpoře začíná pracovat
  • Safari a Firefox mají nějakou formu podpory na úrovni betaverze

Více informací o podpoře: caniuse.com/webp.

Jenže – co uděláme s třetinou uživatelů, kteří používají prohlížeče bez podpory WebP? Žá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 nedávno 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?

Necháme si poradit od skvělého průvodce images.guide, kde je o WebP fakt hodně užitečných informací:

  • Grafické aplikace: Sketch, Pixelmator nebo GIMP mají přímý export, Photoshop a další nástroje od Adobe jej nemají, ale existuje plugin.
  • Na příkazové řádce: Oficiální libwebp nebo třeba plugin typu imagemin-webp pro Grunt, Gulp či jiné sestavovače.

Komentáře