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:
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.
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.