WebP is a modern image format 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 3× smaller file sizes compared to PNG.
How WebP Works
Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference.
Lossless WebP compression uses already seen image fragments in order to exactly reconstruct new pixels. It can also use a local palette if no interesting match is found.
A WebP file consists of VP8 or VP8L image data, and a container based on RIFF. The standalone libwebp library serves as a reference implementation for the WebP specification, and is available from our git repository or as a tarball.
Using WebP Images in CSS
The picture gets more complex when you need to use WebP images in CSS. Unlike the element in HTML which falls back gracefully to the element in all browsers, CSS doesn’t provide a built-in solution for fallback images that’s optimal. Solutions such as multiple backgrounds end up downloading both resources in some cases, which is a big optimization no no. The solution lies in feature detection.
Modernizr is a well-known feature detection library that detects available features in browsers. WebP support just so happens to be one of those detections. Even better, you can do a custom Modernizr build with only WebP detection at https://modernizr.com/download, which allows you to detect WebP support with very low overhead.
When you add this custom build to your website via the
- The webp class is added when the browser supports WebP.
- The no-webp class is added when the browser doesn’t support WebP.
With these classes, you’ll be able to use CSS to load background images according to a browser’s capability by targeting the class on the tag:
.no-webp .bgImage {
background-image: url("img.jpg");
}
.webp .withBgImage{
background-image: url("img.webp");
}That’s it. Browsers that can use WebP will get WebP. Those that can’t will just fall back to supported image types.
WebP is a versatile image format that we can serve in place of PNG and JPEG images (if it’s supported.) It can yield a substantial reduction in the size of images on your website, and as we know, anything that results in transferring less data lowers page load time.
Are there cons? A few. The biggest one is that you’re maintaining two sets of images to achieve the best possible support, which may not be possible for your website if there’s a huge set of imagery that you need to convert over to WebP. Another is that you’ll have to manage a bit of JavaScript if you need to use WebP images in CSS. Another notable one is that users who save your images to the disk may not have a default program set up to view WebP images.
The takeaway is that the relatively low effort is worth the savings you’ll realize, savings that will improve the user experience of your website by allowing it to load faster. Users browsing via mobile networks will benefit especially. Now go forward and WebP to your heart’s content!