Compressing with WebP

One of the biggest bottlenecks for everyday sites, are images. When you run a chrome audit now, one of the biggest hits on performance, is your images. Images are treated like render blocking assets by a lot of browsers. Which means, your page is going to appear as though it’s taking longer to load while it waits on images.

You know what it’s like when you visit a page and the page loads, before the image in the background, and you watch the white transition away to reveal the image. That’s not really ideal. The faster your page loads, the better for your users, which in turn is better for your page views.

When you run the chrome audit, one of the recommendations to improve performance is to . I was ignoring that advice for a while for a lack of understanding, due to google’s poor documentation of how to set it up. However one day I just decided to give it a go, and here is how you can go ahead and do it yourself for those sweet performance improvements.

Install on Unix

1. First grab the files you’ll need for install from here. Get the newest tar.gz
2. Follow the instructions here to install on unix.

tar xvzf libwebp-0.6.0.tar.gz
cd libwebp-0.6.0 ./configure make sudo make install

Use Webp

cwebp -lossless before.png -o after.webp

Now when you use them, you need to keep in mind that not all browsers support webp. Because of that you need to build in some fallback

With this implemented instead of your old simple <img> tag, it'll load the smallest available file. You can check in chrome if it's working by looking at the Network tab, or by running another audit and seeing the new score for Serve images as WebP

If you want to read more, there’s a great article here

Originally published at https://devinmatte.me.