I Have Never Heard of WebP

TL;DR

WebP is an image format for the web, developed by Google and initially release in 2010. All the major browsers natively support WebP.

I have never heard of

I have never heard of the modern image fromat WebP before. Just recently when I was developing my new personal website, I stumble over this modern image format from Google. But what is it and why should we care and use it anyway instead of the good oldies JPEGs and PNGs?

Why should we care?

WebP provides an image format which has excellent compression. WebP mages are much smaller in size than other older image formats and this at a comparable quality. But why did I stumbled over it? Well as I was buidling this new website here, I used Google Lighthouse to check whether my site audits well for performance, accessibility, progressive web apps, SEO and more. At first the performance score I got, was at around 30 - which is really poor. One action I then took then, was to convert all the used images from JPEGs/PNGs into the WebP format. This massively increased my performance score to now up to 99%! But I guess that's not only the image format which fosters this high score, there is also some other magic tricks like the used tech stack and the hosting service behind this.

These here are my current scores I get from measurements with Google Lighthouse! Honestly, I am super proud of them 😅

lighthouse report

I really like the WebP compression technique for adding much smaller images to the web. Especially when it comes to mobile devices where images can consume a lot of bandwidth and battery life, small compressed images are a must.

How to use

How am I going to use wepb to convert existing jpg/png images? Well, there are a lot of different ways how you can use webp. I will briefly mention two of them in here.

CLI tool

A pretty stright foward way is using the encoder cwebp on the command line to convert images:

cwebp -q 80 flower.png -o flower.webp

Or use the decoder dwebp to do the vice versa:

dwebp flower.webp -o flower.png

Check the full documentation for a detailed guide on all the detailed compression settings.

Imagemin WebP Plugin

The Imagemin WebP plugin can be used to convert your existing images on the fly right in your code when building the site.

Verify WebP usage

As I already mentioned, you can use Lighthouse to verify that all images on your site are being served using WebP. Run the Lighthouse Performance Audit (Lighthouse > Categories > Performance) and look for the results of the Serve images in the audit. Lighthouse will list any images that are not being served in WebP.

Lighthouse

Animated WebP, what?

Sure you can also do that! If you can see the animated Nyan Cat below in your browser, then your browser supports animated WebP! Here some advantages and disavantages of using animated webp. Lighthouse

Closing

WebP is an excellent replacement for JPEG, PNG, and GIF images. With that being said, WebP offers both lossless and lossy compression. My key takeaway is, that using .webp instead of .png or .jpg, allows my website to load much faster than before. The overall user experience gains tremendously and the user won't be reminded of the bad old days of dial-up anymore. Especially browsing via mobile networks, is now much more of a joy. Well then, its up to you to also give it a try, go forward and put WepP to your webs content!

Cheers, take care and smile once in a while 🙂

Resources/References

WebP Wiki
Using WebP Images (by Jeremy Wagner)
Use WebP images (by Katie Hempenius)
WebP in its 10th year
FAQ about WebP

© 2021 Simon Berner • Crafted with ❤️

v1.0.0