One of the results you might see when you run a Chrome dev tools lighthouse audit on your site is that you need to use a modern image format on your site such as WebP, JPEG XR or JPEG2000. What are these formats? What’s the current state of browser support for them? Let’s dive in and take a look.
WebP
WebP is a type of image format developed by Google and released in September 2010. It was developed from the VP8 video encoding that was done within frames. WepP images are optimized for web performance and can reduce the size of JPEG and PNG files.
Google offers a command line tool, cwebp that can be used to convert images into WebP format. In two quick experiments I ran, I was able to take a 11.1 MB JPEG to a 2 MB WebP file, and a 1 MB PNG to a 46 KB WebP image. (Just over 4.5% of the original size!)
The compression strategy is to look a blocks of pixels and predict what their colors will be based on a previous block. Then it takes the difference between the prediction and the actual in order to reconstruct the block later.
WebP comes in three flavors:
- Basic
Single layer, lossy like JPEG, no transparency - Extended
Support for transparency, lossless compression. - Animated
Good replacement for GIFs.
Should you be using WebP?
Much like JPEG XR, browser support for WebP varies. Chrome (both desktop and Android) supports it. Opera supports it. Microsoft Edge is (developing support)[https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webpimageformat/]. However, neither Safari nor Firefox supports WebP.
It can pay off to use WebP if you have the time and/or tooling to generate all the modern formats for the different browsers that you need. If you’re tight on time, just using a properly compressed progressive JPEG (85% compression is the recommend amount). It’s a wyas off, but now that Microsoft is going to support it, WebP may become the new standard image format in the web world.
Further reading:
https://en.wikipedia.org/wiki/WebP
https://developers.google.com/speed/webp/
https://blog.chromium.org/2010/09/webp-new-image-format-for-web.html
https://www.wired.com/2010/10/meet-webp-googles-new-image-format/
High Performance Images by Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle & Mike McCall from O’Reilly Press