WebP is a modern format for images. It’s a great way to improve both web performance and the user experience.
Image optimization is vital for web performance. Why? Simply because the file size is a considerable part of the total rendering time.
Be aware it’s not magic, though, and formats are not the only way to improve your images, but it’s a good start.
Lighter images lead to less bandwidth consumption, making a massive difference, especially in some parts of the world where the Internet is slow and quite expensive.
Besides, it’s great for the environment too.
WebP is an image format. Comparing to PNG or JPEG, WebP significantly reduces the file size (~ 30% smaller). Fewer bytes lead to faster web pages load.
Like PNG, JPEG, or GIF, WebP is a bitmap format. Sometimes the documentation refers to raster images or matrices, but it’s the same thing. Unlike vectors, it has pixels.
There are lossy formats (JPEG) and lossless formats (PNG, GIF). “Lossy” means you will lose the original image quality.
Many browsers such as Chrome, Opera, Android, and the latest Firefox and Edge support WebP as well as PNG, JPEG, JPG, or GIF.
Browser support for WebP is quite good, especially in the mobile world. Even Safari 14 will support WebP!
It can be a game-changer.
WebP uses the same core features as Webm videos. It works with the same VP8 video codec.
Roughly speaking, in lossy mode, the algorithm splits the image and reconstructs new pixels based on already-seen blocks of pixels. Google calls this operation a “predictor transform.”
Unless you are a Hero from the MCU (Marvel Cinematic Universe), you won’t see the difference with the naked eye, so it’s perfectly fine for the web.
The difference between lossless and lossy modes is a trade-off between file size and image quality, but WebP is better than other formats in any case.
Besides, it supports transparency (like PNG) and animation (like GIF)!
You can use the following HTML markup :
<picture> <source srcset="/path/to/img-webp" type="image/webp"> <source srcset="/path/to/img" type="image/jpeg"> <img src="/path/to/img" alt="" /> </picture>
there’s a fallback in case WebP is not supported. The
<picture> element allows us to define multiple assets under specific circumstances. The above markup is convenient when assets should look different on different devices.
Wait, what about responsive WebP? You can do the following :
<picture> <source type="image/webp" srcset="/path/to/img-300.webp 300w, /path/to/img-600.webp 600w, /path/to/img-800.webp 800w, /path/to/img.webp 1000w" /> <source srcset="/path/to/img-300.jpg 300w, /path/to/img-600.jpg 600w, /path/to/img-800.jpg 800w, /path/to/img.jpg 1000w" /> <img src="/path/to/img-300.jpg" alt="" /> </picture>
Once you have that HTML markup with fallbacks and all the things, it might be hard to check if it’s working as intended.
One of the easiest ways to check if the browser takes your WebP images into account is to right-click on any image and open it in another tab. It should download the WebP image, not the fallback in PNG or JPEG.
It’s also possible to check it with the Lighthouse audit. Check the “passed audits” tab and look for “next-gen formats” audits.
There are indeed free online converters, but the easiest way to use it is never to have to convert to the format on your own.
Webpack and Node.js are your friends. There are fancy libraries and plugins.
If you want more control or prefer command lines, you can use the
cwebp is part of
libwebp and was written by the WebP team. Read the documentation. You can install the package on your machine and the server.
Browser support has been an issue for a long time, but, as I ever said, Safari 14 will support it. Only Internet Explorer does not understand it, so use jpeg XR for that browser instead.
Storage might be an issue. You will need more space, and it is not free.
Nevertheless, even with those drawbacks in mind, it’s still worth it, give it a try.
Adding WebP to your site is an excellent optimization. It gives you a little bit more work, but it’s pretty useful and rewarding.