Next-generation image formats offer much better loading speed than JPEG, PNG, SVG or GIF. Among Google’s recommendations on the PageSpeed Insights results page, the search engine suggests using these new-generation image formats to optimise web page loading. It refers to the WebP compression format, but it turns out that the AVIF format offers even better results... and Fasterize compresses images in these two formats in order to optimise images! Let’s compare these two image compression formats and take a closer look at how Fasterize enables you benefit from their advantages for your loading speed, in just a few clicks.
WebP image compression format
WebP is a format for compressing lossy or lossless images and photos, for higher quality and faster loading than JPEG, PNG, SVG and GIF. It is recommended by Google in the ‘Opportunities’ section on the results page of PageSpeed Insights.
Recommendation from Google’s PageSpeed Insights tool
on the use of next-generation image formats (WebP)
Depending on whether you use lossy or lossless compression, the gains vary. As an indication, Google has carried out comparative studies between image formats, and reports the following performance:
Equal quality:
- WebP reduces the size of images by 26% compared to PNG;
- and by 25 to 34% compared to a JPEG version.
All recent versions of browsers support the WebP image format, but not all CMSs do. Some of them do not allow you to upload images directly in WebP format and require you to install a plugin – which potentially adds processing time, and therefore loading time, to your web pages – whereas you are aiming for the opposite. This is particularly the case for Magento CMS (with Mageplaza, Apptrian, Amasty, etc.), WordPress (with the Smush, Optimole, Imagify, EWWW Image Optimizer, etc. plugins) and Salesforce Commerce Cloud.
To avoid having to add a plugin and take advantage of the optimisation of all your resources (images, photos, as well as HTML, JavaScript, CSS, etc.), we’ll look at how Fasterize can help you compress your images efficiently later on.
To find out more about the WebP image compression format, read this detailed article.
But now let’s take a look at an even more recent and powerful image format: AVIF.
The AVIF image compression format
Google recommends the WebP image compression format (it created it), but you should know that the AVIF format offers even better performance, with a 50% improvement over a JPEG version.
AVIF is an open, royalty-free compression format based on the AV1 video format. It compensates for the JPEG’s weaknesses, particularly when it comes to processing fine lines and flat areas of colour. It offers a compression quality similar to JPEG XL, another format currently being adopted and set to become a standard (free, reversible, responsive, and restoring details and colours with high fidelity).
It was also one of the first image formats to support HDR colour – for higher brightness, depth and colour gamut than JPEG, which is limited to 8-bit depth (vs 12-bit for AVIF).
The following browsers support the AVIF image format:
Chrome, Firefox, Safari, Opera, Samsung Internet and Android Browser support AVIF
AVIF format was announced in 2019, Chrome has supported it since version 85, Firefox is finalising its implementation (it is already available behind the image.avif.enabled flag in about:config), Opera supports it, and although Safari took nearly 10 years to support WebP, the delay will probably not be as long for AVIF (Apple is part of the group behind the AV1 format).
In any case, it’s worth looking into this format now to optimise your images and photos and offer your users the best possible quality and display speed. Users whose browsers do not support it will still be able to access the JPEG version using content negotiation, as suggested for example here by Jake ArchibaldAdvocate Developer at Google Chrome. This is also the method used by the Fasterize engine to optimise image files:
Note that, like WebP, AVIF does not yet support Progressive Rendering, and while decompression may be fast, the time required for compression can be considerable. Nevertheless, the time saved thanks to AVIF means that Progressive Rendering can be dispensed with, even for users with poor network performance.
AVIF therefore outperforms its predecessors (JPEG, WebP, PNG, SVG, etc.) in terms of performance. Here are a few comparative studies to see the results in practice.
Performance comparison between WebP and AVIF image formats
On average, an AVIF-compressed image file is 50% lighter than a JPEG image, while WebP delivers around 30% higher performance.
We also investigated the difference in weight between the JPEG, WebP and AVIF versions:
Daniel Alaksandersen also carried out an experiment on a set of 600 photos and images on his blog and obtained the following breakdown:
Based on a reference JPEG file of equal quality:
- the median size of WebP images is reduced by 31.5%, 85th percentile images are reduced by 20%, and 2.7% of images are larger;
- the median size of AVIF images is reduced by 50.3%, 85th percentile images are reduced by 39.6%, and none of the images are larger than the reference JPEG file.
The figures obviously speak for themselves, and they are useful for assessing performance in terms of loading times. So, if you’re curious to discover how different image formats render visually, Jake Archibald has drawn up a detailed comparison with supporting illustrations (you will even see that AVIF performs better than large SVG files).
Note that while optimal image quality is crucial for certain uses, for example for product pages with visuals that visitors will zoom in on an e-commerce site, it is sometimes necessary to compromise on visual quality in favour of weight and therefore loading speed. For example, an image whose sole role is to illustrate a web page can easily withstand lossy compression, without affecting the quality of the user experience (and they will probably thank you for it).
In all cases, this optimisation work must be automated, as it cannot be maintained manually due to the volume to be processed. What’s more, as multiple teams can work on a website without always having webperf knowledge, the fact that optimisations are applied automatically and continuously ensures that performance is maintained.
Distributing your images in next-generation formats: the best compression to optimise your performance
Fasterize optimises images on the fly, and transforms image tags into picture tags with WebP and/or AVIF sources.
The advantage is that you save time, and you also benefit from the performance of AVIF format, which is not yet supported by most CMS. In practice, our engine suggests several image formats to the browser, which then selects the format it can support, making sure to choose the highest performing one. So if AVIF format is not supported by certain browsers, the user can still access image content with the best possible performance.
Finally, note that compression is adapted according to the browsing context. For example, on mobile devices, compression will be higher, while taking advantage of the MPE (Mean Pixel Error) algorithm, based on the characteristics of the human eye.
But what’s going on technically?
becomes :
Another possibility is if there is already a picture tag:
becomes :
Note that the engine can modify existing picture tags.
HOW TO ACTIVATE IMAGE COMPRESSION WITH FASTERIZE
Here is an overview of the Fasterize dashboard, with the choice of formats and image compression options:
As you can see, image compression in new-generation formats is particularly easy to activate, making your pages light and fast! A few details to guide you:
- In the first block: “Convert an image into a modern format”
- You will see 4 options. They can be used to modify the HTML code to select the different formats required and to anticipate whether or not the browser supports the WebP or AVIF versions. Simply tick the boxes according to the image formats on your pages (PNG or JPG), and the format in which you want to compress them.
- In the second block: “JPG/PNG options in WebP”
- You can set the compression parameters to WebP if you have chosen to compress your images in this format.
- Here you define the percentage of degradation to be applied to the images.
- For example, choosing ‘Lossless’ necessarily sets the quality to 100%, and your compressed images may be heavier than the originals.
- If you choose lossy compression, you then need to define the desired level of loss, and carry out tests to evaluate the results.
- The ‘Alpha Quality’ choice concerns the transparency quality of PNG images.
- By ticking the intelligent sub-sampling box, an algorithm automatically reduces the weight of the image.
- In the third block: “JPG/PNG to AVIF options”
- Here you choose the AVIF compression parameters.
- Note that if you compress without loss, the final weight may be greater than that of your original image. You can also carry out tests to identify the level of loss that is visually acceptable and relevant to your performance objectives.
- Finally, you can define the chroma sub-sampling (here’s how to understand the the subject in more detail). Note that the image weight can be modified accordingly.
Just like automatic image resizing on-the-fly image compression is just one of the many intelligent features offered by our engine.
Discover all the others here (reducing page weight and the number of requests, managing JavaScript and load peaks, dedicated mobile optimisations, etc.) – in short, everything you need for a fast site and to boost your conversions!
To find out more about the many techniques
for optimising your loading speed:
