Confronted with a "Serve images in modern format" message from PageSpeed Insights? This post is your guide to transitioning images to the WebP format, which can shrink file sizes by up to 34% compared to traditional PNG or JPEG formats, leading to quicker load times and enhanced user experiences. We cover how to utilize Google's cwebp command-line tool across Windows, Linux, and macOS, offering step-by-step instructions for setup and execution. Additionally, we delve into WebP's lossless and lossy compression techniques that maintain image quality while significantly reducing file size. With browser compatibility expanding, we also discuss implementing fallbacks for older browsers using the element to ensure no visitor is left behind. By adopting WebP, you're not just optimizing images; you're elevating your website's performance and visitor satisfaction.
You’ve been met with the “Serve images in modern format” message on PageSpeed Insights, and you’re not quite sure where to begin?
In this post, we’re going to talk about converting and serving images into WebP format. You might be asking yourself why is this important in the first place? To clarify, images in WebP format can have 34% smaller file size than their PNG or JPEG counterparts. Consequently, images will load faster on your website and provide a better user experience to your visitors.
How to convert images to WebP
You can start converting images by using the cwebp command-line tool that Google released for free. Furthermore, you can download a precompiled version for Windows, Linux or macOS. However, Google doesn’t really explain how to use these precompiled versions of this tool, so we’ll look into this part first.
Windows
To make this tool work on Windows, you should go through the following steps.
- Download the ZIP file of the latest precompiled version
- Extract its contents on your computer somewhere, preferably on your main drive
- Copy the absolute path of the bin folder from extracted files
- Add the path to the Path environmental variable on your system
After that, you should be able to use the cwebp command inside a command-line.
Linux
For Linux, you’ll first need to install the webp package by using the APT package manager.
sudo apt install webp
Next, you’ll need to navigate to the folder where you downloaded the archive file. Once you’re in the same directory, you’ll need to extract the files and navigate to the bin folder. You can do so by using the following commands.
tar -xvf libwebp-0.6.1-linux-x86-32.tar.gz
cd libwebp-0.6.1-linux-x86-32/
cd bin/
lsYou can use the cwebp command from here.
MacOS
Easiest way to make this tool work on macOS is by installing it with homebrew by using the following command.
brew install webpSimilar to the Linux process, you’ll need to extract the downloaded archive file and navigate to the bin directory. You can go a little further and add the these new packages into your shell config file such as .bashrc or .zshrc.
To know which path to add, you can check with the following command.
which cwebpThen add the bin directory path to the environmental variable PATH.
cd ~/.bashrc
PATH=$PATH:"path/to/bin"
export PATHHow to use cwebp tool
This tool allows you to work with a variety of different settings. However, in most cases, you’ll only need to care about the quality setting. This setting accepts a single value ranging from 0 to 100, 0 being the worst and 100 the best. It’s worth trying out different values to find the best tradeoff between image quality and file size for your needs.
The following example shows how to use it.
cwebp -q 50 images/flower.jpg -o images/flower.webpIf you want to see the entire list of compression settings, you can use cwebp -longhelp command.
How WebP works
WebP provides us with superior lossless and lossy compression techniques. Therefore, they allow us to create images with much smaller file sizes without sacrificing their quality.
Lossless compression technique will produce images that are up to 26% smaller in size compared to their counterparts in PNG format. Moreover, it uses already image fragments to exactly reconstruct new pixels.
If you want to compress images even further, you can go with lossy compression, which will produce up to 34% smaller image file sizes. It uses predictive coding to encode an image, which is the same method that is used by the VP8 video codec to compress keyframes in videos. Furthermore, it uses the values from neighbouring blocks of pixels to predict the values in the current block and encode the difference between them.
Browser compatibility
Currently, WebP is supported by the latest versions of Chrome, Firefox, Safari, Edge, and Opera. This means that we can serve images of this format normally as you would do with JPEG and PNG images.
However, if you’d like to take older browsers in consideration, you will need to add to the HTML markup of your img tags. More specifically, you’ll need to give the browser a fallback option, which should be the image in older formats like JPEG or PNG.
The following example demonstrates how to take care of this.
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>As you can see, we need to wrap the img tag with a picture block, which allows us to add source tags for other image sources. Furthermore, we can assign an arbitrary amount of source tags inside the picture block. And if none are compatible with the browser, it will fall back to the img tag defined at the end.On the other hand, the browser will always select the first compatible source from top down.
Conclusion
To wrap it up, we explained why serving images in modern formats like WebP is important, how to do it, and how the conversion process works. Main reason to serve images in modern formats is to provide your visitors with the best possible user experience, by improving your website’s performance wherever you can.
