WebP je formát bitmapových obrázkov, ktoré v roku 2010 predstavil Google. Nie je síce podporovaný všetkými prehliadačmi, ale i tak je pri vývoji dnešných webov veľmi použiteľný. Poďme si ukázať hlavné prínosy:

  • možnosť výrazného zníženia dátového objemu v porovnaní s JPEG a PNG
  • alfa priehľadnosť, ktorú doteraz ponúkal len formát PNG
  • podpora animácií, ktorú vie len “dedko” GIF

WebP naopak oproti JPEG nevie napríklad subsampling chroma kanálu a progresívne vykresľovanie.

WebP je vraj pomalší v dekódovaní a viac zaťažuje procesor. Ale na images.guide sa 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.

Čo urobíme s menšou časťou užívateľov, ktorá používa prehliadače bez podpory nového formátu? Žiaden stres, web bez obrázkov im dodávať nemusíme.

Späť na JPEG

Riešením je vygenerovať dve sady obrázkov – WebP i JPEG formát a pomocou značky <PICTURE> nechať na prehliadačoch výber tých správnych:

<picture>

  <source srcset=“image.webp” type=“image/webp”>

  <img src=“image.jpg” alt=“…”>

</picture>

Chrome teda stiahne len WebP a zvyšná tretina užívateľov dostane svoje „jépégéčko“.

Pokiaľ toto riešenie nemôžete nasadiť, je tu ešte možnosť detekcie na serveru alebo cez .htaccess. Riešenie s <picture> ale bude výkonnostne najefektívnejšie.

Detekcia podpory formátu WebP  a jeho jednotlivých vlastností, pre linkované obrázky z CSS. Zápis v CSS by mohol vyzerať takto:

.box {

  background-image: url(“image.jpg”);

}

.webp .box {

  background-image: url(“image.webp”);

}

Jednoduchý detekčný skript ponúka aj Google na stránkach o WebP.

Má zmysel kvôli WebP zdvojovať obrázky? Záleží od situácie, ale hlavne pri väčších weboch sa to veľmi vyplatí.

Aké množstvo dát WebP vlastne ušetrí?

Podobné skúsenosti mám aj z iných testov a klientskych projektov. Nie je výnimkou ani viac než polovičné ušetrenie obrázkových dát.

Štúdie Googlu hovoria, že WebP je menší:

  • pri bezstratových obrázkov typu PNG o 26 %
  • pri stratových obrázkov typu JPG o 25-34 %

Ako WebP získať?

Necháme si poradiť od skvelého images.guide, kde je o WebP  veľa užitočných informacií:

  • Grafické aplikácie: Sketch, Pixelmator alebo GIMP majú priamy export, Photoshop a ďalšie nástroje od Adobe ich nemajú, ale existuje plugin.
  • Na zobrazenie WebP obrázkov sú tieto programy: Oficiálny libwebp alebo plugin typu imageminwebp pre Grunt, Gulp a iné…
  • Zobrazenie na Windows: WebP Codec

ZDROJ:

https://www.vzhurudolu.cz/prirucka/webp?fbclid=IwAR3PwLgR3i0EJr9BXkNKyLkoDUhFoLJb6Mw7Q70qqbs9X-S8EbnFcUIAXxE

O autorovi

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Vittek.eu

Michal Vittek

Michal Vittek
Komenského 10
919 04, Smolenice

Galéria

Sledujte nás

Fanpage