This is arguably the most exciting development, with the most creative potential, to emerge in the web design arena in recent years.
WebP is an image format that has been developed by Google. It was created to provide an alternative to existing formats like PNG, JPG and GIF, producing much smaller file sizes while maintaining similar image quality. At the time of writing, WebP is supported in 72% of browsers globally used.
The example below shows an online WebP image conversion tool with a fairly large Jpeg image uploaded and converted to WebP. The original Jpeg on the left is 3.92MB in size while the resulting WebP on the right is only 332kB, that’s 91% smaller than the original image.
Loading of the WebP image in the browser will be faster than the original Jpeg and as you can see there is no discernible difference in the quality of the image.
Why use WebP?
WebP is an incredibly useful format because it offers both performance and features. Unlike other formats, WebP supports both lossy and lossless compression, as well as transparency and animation. Which makes it the perfect tool for web designers to produce rich visual content that will only enhance the user experience.
Even with these features, WebP provides consistently smaller file sizes than its alternatives. In a comparative study of these image formats, it was found that WebP lossy images were on average 30% smaller than JPGs and WebP lossless images were on average 25% smaller than 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 neighbouring 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.
WebP Support
WebP is natively supported in Google Chrome, Firefox, Edge, the Opera browser, and by many other tools and software libraries. Developers have also added support to a variety of image editing tools such as Photoshop with the WebPShop plugin.
Although this is good enough to make a compelling case to use WebP, it isn’t good enough to rely on the format without providing fallbacks. In browsers that don’t support this file format, the image will appear broken.
We can provide fallbacks to images using the picture element. This HTML5 element allows us to provide multiple sources for a single image.
Why should I use Animated WebP?
WebP is an absolutely amazing animated image format, and it would be a mistake not to utilize WebP’s impressive quality-to-size ration on your website. When it comes to animated images WebP is the rockstar of image formats for web designers. It will make your site load faster and look better.
The example below was converted from a source 20s mp4 video with a file size of 24MB, the result is a 20s animated WebP with a file size of 2.4MB. That is an astounding result and the quality holds up for its purpose.
So, if you aren’t already using WebP, try it. We’re willing to bet that you will see a performance jump.