On a web page, images represent on average about 50% of the total weight of the page. For many sectors (e-commerce retail, luxury, travel, media, etc.), photos are essential to promote products or information, and their quality is therefore important. But quality means kilobytes! Compressing and optimizing images is essential to save space on the server, and so that pages can load quickly. For better performance than with JPG, GIF, PNG or SVG formats, new compression formats have emerged, without neglecting visual quality. Let’s take a look at WebP, a format recommended by Google to optimize images.
Created by Google, WebP is an image format that aims to replace JPEG, PNG, GIF, SVG… What are its promises? At equal quality, a weight reduced by 26% compared to PNG; and by -25 to -34% compared to JPG.
If you use PageSpeed Insights or Lighthouse to evaluate the performance of your website, you will have certainly noticed Google’s recommendations “ Serve images in next-generation formats ” (aka WebP):
So, to understand what you can gain by optimizing your images or photos using this compression format, let’s look precisely at how WebP works, its advantages but also its limits.
The WebP image format: definition and operation
As Google explains on its support , WebP is a format that offers superior lossless and lossy compression for images on the web. Thanks to WebP, images are lighter and richer, for fast pages.
Lossless WebP supports transparency (also called alpha channel ) by adding only 22% more bytes . While lossy RGB compression is acceptable, lossy WebP also supports transparency, and typically allows for image file sizes 3x smaller than a PNG version.
Lossy WebP compression uses predictive coding to encode a frame. This is the same method used by the VP8 video codec to compress keyframes in videos.
Lossless WebP takes known image fragments to construct the new pixels, and it can also use a local palette if it doesn’t find a relevant match. If you want to dig deeper, you can find technical details on the WebP compression format here .
Also note that WebP includes a lightweight encoding and decoding library libweb , as well as command-line tools cwebp and dwebp for converting images to and from WebP. Tools for viewing, muxing, and animating WebP images are also planned (the full source code is available here) .
The gains obtained with the WebP image format
For an overview of the gains obtained with the WebP format, Google has carried out comparative studies:
- between WebP and JPEG (as mentioned at the beginning of this article, the average WebP file size is 25-34% smaller than the JPG file size, with equivalent SSIM index);
- and between WebP and PNG (when WebP is run with default settings, compression is 42% better than libpng, and 23% better than ZopfliPNG).
Note that these gains will also depend on whether lossy or lossless compression is used.
Also, in its WebP gallery , Google illustrates – with visuals to support it – the gains between JPG and WebP, which can go beyond 30%.
Obviously, the lighter the images, the faster the web pages will load. But be careful… you also have to take into account the browsing context (device and network). Indeed, a powerful computer such as a MacBook pro will be able to decompress an image 5 times faster than a mid-range mobile such as a Samsung Galaxy S6. Remember that compression is also the art of compromise!
It should be noted that while WebP represents a step forward in image compression, at present, the AVIF format offers even more interesting performance with 50% gains compared to JPG (to respond to AVIF, a WebP 2 version is currently being tested).
Also note: WebP does not allow Progressive Rendering , which means that an image can sometimes display faster in JPG than in WebP, although the latter is downloaded faster on the network side.
Now that we have seen the possible gains, but also some limitations of the WebP image format, let’s see how it is possible to implement it.
Which browsers support WebP?
All latest versions of browsers support WebP. Good news!
Google lists all browsers and versions that support WebP here ; and the Can I Use site allows you to see which version of which browser supports this image format :
WebP format support depending on browser version (source Can I Use)
Safari has (finally!) supported WebP since version 14 , as Apple has long favored support for the HEIF image format. For history buffs, Pascal Massimino traces the evolution of WebP support in his talk WebP Rewind .
Note that just because some browser versions don’t support all image compression formats doesn’t mean you should turn your back on this optimization! Depending on the browsing context, you can serve WebP files to users with a browser that supports this format via <picture> tags , and JPEG or PNG files to others.
To ensure the relevance of adopting WebP for your photos and visuals, the best way to know the proportion of your visitors who will be able to benefit from optimized images, and therefore better loading times, is to ask Google Analytics (Audience tab – Technology – Browser and OS):
Distribution of browsers used by visitors to a website in Google Analytics
In 2021, still according to Can I Use, more than 90% of Internet users will be able to benefit from the advantages of WebP , on desktop as well as on mobile.
Also, to give you an idea of the distribution of browsers used in the world, know that Chrome represents approximately ⅔ of the market share, far ahead of Safari which represents approximately 16%.
Web browser market share in 2020 (source Wikipedia)
So there’s a good chance that the majority of your users will be able to enjoy better loading times with WebP compressed images if your site serves them in this format.
And on the CMS side, how is WebP supported?
What about WebP according to CMS?
If you are counting on your CMS to speed up your web pages, be aware that a CMS does not make your site fast in absolute terms , because everything depends on what you put on it (content, photos, third-party applications, etc.)!
So, is it okay to upload only compressed images? That would be ideal, but unfortunately, not all CMSs natively support WebP . That is, you won’t be able to upload WebP images directly to your library like you would with JPEG or PNG images. You may need to install a plugin.
Once your image in JPEG or PNG version is loaded into your library, it is the plugin that will take care of the conversion to WebP if necessary, and of serving the correct format depending on the browser for those who can read this format.
This is the case for WordPress, a CMS for which plugins such as WebP Express , Jetpack, ShortPixel , Imagify , or Optimole are necessary. The same goes for Magento and Salesforce Commerce Cloud.
Be careful though, as you might expect, the more plugins your site has, the more time it is likely to take for the pages to load. So, to take advantage of image optimization features, but also all those that will allow you to have a fast and efficient site , it is better to opt for a global optimization solution for your frontend such as Fasterize. Why? Because you will be able to rely on a solution that ensures that the optimizations are intelligently linked to each other. This option ensures you both a saving of time and resources for better performances that are maintained over time !
In short, compressing your images is essential to speed up the loading of your web pages. To do this, WebP is a format that offers interesting performances. But also keep in mind that by promoting it, Google is promoting a faster web… and at the same time preaching for its own parish.
To delve deeper into the topic of image compression and optimization , we invite you to discover the interview with Anthony Barré , Software Engineer at Fasterize. You will learn more about the issues and challenges, and effective techniques for processing large volumes at a lower cost.
And to follow the latest news on Web Performance, our new features, and more broadly the developments and innovations in this field, subscribe to our monthly newsletter:
