Compressing with WebP

Devin Matté
Jun 12, 2019 · 2 min read

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

Devin Matté

Written by

Software Engineering Student at Rochester Institute of Technology with a focus on Full Stack Web Development and DevOps

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade