A Google szerint a weblapok 65%-át képek teszik ki, így a jelenlegi eszközök teljesítménye mellett, elérkezett az idő egy hatékonyabb képtömörítési eljárás alkalmazásához.
Online eszköz a webp előállításához
A Google online képkonvertáló szolgáltatását ajánlom az online konvertáláshoz. Teljesen ingyenes és több ismert képformátum között képes konvertálni. A SQUOOSH weboldalán behúzhatod vagy betallózhatod a szerkeszteni kívánt képeidet, opcionálisan átméretezheted azokat és csökkentheted a színpalettájukat, végül pedig a tömörítési beállítások konfigurálását követően lementheted JPEG, PNG, WebP, és BMP formátumba a konvertált képeidet.
Használata HTML-BEN
ha egy böngésző támogatja a webp formátumot, könnyű a helyzet. A szokásos módon használod
<!-- beillesztés a hagyományos módon -->
<img< span=""> src="/img/mypicture.webp" alt="Szép az élet" />
A probléma az, hogy – bár már egyre több – nem mindegyik böngésző támogatja. Ha a weboldaladat tallózó felhasználó böngészője nem támogatja, akkor kínos módon, kép helyett egy üres részt lát.
Alegegyszerűbb mód az, hogy a <picture> elem segítségével megadjuk a képeket, például:
<picture>
<source srcset="/img/awesomeWebPImage.webp" type="image/webp">
<source srcset="/img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="/img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
Ez valószínűleg a lehető legjobb a lehető legszélesebb körű kompatibilitás érdekében, mert minden egyes böngészőben működni fog, nem csak azokban, amelyek támogatják a <picture> elemet. Ennek oka az, hogy a <picture> -t nem támogató böngészők csak azt jelenítik meg, amelyik a címkében van megadva. Ha teljes <picture> támogatásra van szükséged, használhatod Scott Jehl Picturefill szkriptét .
Forrás: CSS-Trick.com