What is WebP?

WebP is a modern image format from Google that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3x smaller file sizes compared to PNG.

The type attribute of source can be used to load alternative image file formats that might not be supported in all browsers. For example, you can serve an image in WebP format to browsers that support it, while falling back to JPEG or PNG on other browsers:

<picture>
    <source srcset="theImage.webp" type="image/webp">
    <img src="theImage.png" alt="Fallback when browser doesnt support WebP">
</picture>

Want to know more?