How to make your website load lightning fast with WebP images

What is WebP?

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.

Google claims that a WebP lossless image is 26% smaller than its PNG equivalent, and that a WebP lossy image is 25–34% smaller than its JPG equivalent (as of Feb. 2019).

Let’s take WebP images for a test. When I ran my JPG image through the WebP converter, I got the following results:

  • JPG image (already compressed): 279 KB
  • WebP at 100% lossless: 451 KB (yes, this is higher — more on why below!)
  • WebP at 80% lossy: 156 KB (56% of the original size)

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.

Using WebP — with JPEG/PNG As a Fallback

Just because Apple doesn’t support WebP, doesn’t mean you shouldn’t use the format. It’s possible to deliver WebP files to visitors who use supported browsers while displaying JPEGs and PNGs as a fallback to Safari users. This way, rather than deliver WebP to all users and risk Safari users seeing broken images, you can ensure all visitors to your site see your images — while users with supported browsers get a faster experience.

Leave a comment

You must be logged in to post a comment.