Next-generation image formats offer much better performance for loading speed than JPEG, PNG, SVG, or GIF. Among Google’s recommendations on the PageSpeed ​​Insights results page, the search engine suggests using these next-generation image formats to optimize the loading of web pages. It refers to the WebP compression format, but it turns out that the AVIF format offers even better results… and that Fasterize provides image compression in both formats! Let’s compare these two image compression formats and take a closer look at how Fasterize allows you to take advantage of their advantages for your loading speed, and all in just a few clicks.

The WebP image compression format

WebP is a format that allows lossy or lossless compression of images and photos, for higher quality and better loading speed compared to JPEG, PNG, SVG and GIF. It is recommended by Google in the “ Opportunities ” section of the PageSpeed ​​Insights results page .

Google PageSpeed ​​Insights tool recommendation
on using next-generation image formats (WebP)

Depending on whether you use lossy or lossless compression, the gains vary. As a guide, Google has conducted comparative studies between image formats, and reports the following performance.
At equal quality:

• WebP reduces image weight by 26% compared to PNG; 
• and -25 to -34% compared to a JPEG version.

All recent versions of browsers support the WebP image format, however, this is not the case for all CMS . Indeed, some of them do not allow you to directly upload images in WebP format and require the installation of a plugin – which potentially adds processing time, and therefore loading time to your web pages – while you are aiming for the opposite. This is particularly the case for CMS Magento (with for example Mageplaza, Apptrian, Amasty…), WordPress (with the plugins Smush, Optimole, Imagify, EWWW Image Optimizer…), or Salesforce Commerce Cloud.

To avoid adding a plugin and also benefit from the optimization of all your resources (images, photos, but also HTML, JavaScript, CSS, etc.), we will see a little later how Fasterize can help you to effectively compress your images .

To learn more about the WebP image compression format, you can check out this detailed article .

But now let’s look at an even more recent and efficient image format: AVIF.

The AVIF image compression format

Google recommends the WebP image compression format (it originated it), but be aware that the AVIF format offers even better performance with 50% gains compared to a JPEG version .

AVIF is an open and royalty-free compression format, based on the AV1 video format. It compensates for the weaknesses of JPEG, particularly in the treatment of fine lines and solid colors. It offers a compression quality similar to JPEG XL, another format currently being adopted and set to become a standard (free, reversible, responsive, and rendering details and colors with high fidelity).

It is also one of the first image formats to support HDR colors – for higher brightness, depth and color gamuts compared to JPEG which is limited to 8-bit depth (vs. 12-bit for AVIF).

Browsers that support the AVIF image format are:

Chrome, Firefox, Safari, Opera, Samsung Internet and Android Browser support AVIF

The AVIF format was announced in 2019, Chrome has supported it since version 85 , Firefox is finalizing its implementation (it is already available behind the image.avif.enabled flag in about:config ), Opera supports it, and if Safari took almost 10 years to support WebP, the delay will probably not be as long for AVIF (Apple is part of the group at the origin of the AV1 format). 

Regardless, you should definitely consider this format now to optimize your images and photos, and provide the best quality and display speed to your users . Users whose browsers don’t support it will still be able to access the JPEG version using content negotiation, as suggested for example here by Jake Archibald , Developer advocate at Google Chrome. This is also the method used by the Fasterize engine to optimize image files:

Note that like WebP, AVIF does not yet support Progressive Rendering ; furthermore, while decompression can be fast, the time required for compression can be significant. However, the time saved by AVIF makes it possible to do without Progressive Rendering , even for users with poor network performance.

AVIF therefore outperforms its predecessors (JPEG, WebP, PNG, SVG…) in terms of performance. Here are some comparative studies to observe the results in practice.

Performance comparison between WebP and AVIF image formats

On average, an image file compressed with AVIF is 50% smaller than a JPEG image, while WebP achieves about 30% better performance.

Regarding the weight difference between JPEG, WebP and AVIF versions, we also conducted the investigation:

Daniel Alaksandersen also conducted an experiment on a set of 600 photos and images on his blog and obtained the following distribution:

Based on a reference JPEG file, at equal quality:

• the median size of WebP images is reduced by 31.5% , the 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% , the 85th percentile images are reduced by 39.6%, and none of the images are larger than the reference JPEG file.

The numbers are obviously telling, and they are useful for evaluating performance in terms of loading times. Also, if you are curious to discover the visual rendering according to the image formats, Jake Archibald has drawn up a detailed comparison with supporting illustrations (you will even see that AVIF is more efficient than large SVG files).

Note that while optimal image quality is crucial for certain uses, such as product pages with visuals that visitors will zoom in on an e-commerce site, you sometimes have to compromise on visual quality in favor of weight and therefore loading speed. Thus, an image that is only used to illustrate a web page can easily support lossy compression, without impacting the quality of the user experience (and they will probably be grateful to you for it).

In any case, this optimization work must be automated because it is not manually maintainable due to the volume to be processed. Furthermore, as multiple teams can work on a website without always having webperf knowledge, the fact that optimizations are applied automatically and continuously guarantees that performance is maintained. 

Distribute your images in next-generation formats: the best compression to optimize your performance 

Fasterize takes care of optimizing images on the fly, and transforming image tags into picture tags with WebP and/or AVIF sources.

The advantage: you save time, and you also benefit from the performance of the AVIF format which is not yet supported by most CMS.
In practice, know that our engine offers several image formats to the browser, which then favors the format it can support, making sure to choose the most efficient one. Thus, if the AVIF format is not supported by certain browsers, the user still accesses the image content that offers the best possible performance.
Finally, note that the compression is adapted according to the browsing context. For example, on mobile, the compression will be greater, while taking advantage of the MPE (Mean Pixel Error) algorithm, based on the characteristics of the human eye.

But what is happening technically?

[pastacode lang= »markup » manual= »%3Cimg%20src%3D%22image2.jpg%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]

becomes :

[pastacode lang= »markup » manual= »%3Cpicture%3E%20%20%0A%09%3Csource%20src%3D%22https%3A%2F%2Fwww.domain.com%2Ffstrz%2Fs%2Fc%2Fwww.domain .com%2Fimage1.png.avif%22%20type%3D%22image%2Favif%22%3E%0A%20%20%3Csource%20src% 3D%22https%3A%2F%2Fwww.domain.com%2Ffstrz%2Fs%2Fc%2Fwww.domain.com%2Fimage1.png.webp%22%20type%3D%22image%2Fwebp%22%3E%0A%20% 20%3Cimg%20src%3D%22image2.jpg%22%20%2F%3E%0A%3C%2Fpicture%3E » message= » » highlight= » » provider= »manual »/]

Another possible case if there is already a picture tag :

[pastacode lang= »markup » manual= »%3Cpicture%3E%0A%20%20%3Csource%20src%3D%22image1.png%22%20type%3D%22image%2Fpng%22%3E%0A%20%20 %3Cimg%20src%3D%22image2.jpg%22%20%2F%3E%0A%3C%2Fpicture%3E » message= » » highlight= » » provider= »manual »/]

becomes :

[pastacode lang= »markup » manual= »%3Cpicture%3E%20%20%0A%09%3Csource%20src%3D%22https%3A%2F%2Fwww.domain.com%2Ffstrz%2Fs%2Fc%2Fwww.domain .com%2Fimage1.png.avif%22%20type%3D%22image%2Favif%22%3E%0A%20%20%3Csource%20src%3D%22https%3A%2F%2Fwww.domain.com%2Ff strz%2Fs%2Fc%2Fwww.domain.com%2Fimage1.png.webp%22%20type%3D%22image%2Fwebp%22%3E%0A%20%20%3Csource%20src%3D%22image1.png%22% 20type%3D%22image%2Fpng%22%3E%0A%20%20%3Cimg%20src%3D%22image2.jpg%22%20%2F%3E%0A%3C%2Fpicture%3E » message= » » highlight= » » provider= »manual »/]

Note that the engine may modify existing picture tags .

How to enable image compression with Fasterize?

Here’s a look at the Fasterize dashboard, with format choices and image compression options:

As you can see, image compression to new generation formats is particularly easy to activate to make your pages light and fast! A few details to guide you:

• In the 1st block: “Convert an image to a modern format” You will see 4 options. They allow you to modify the HTML code, to select the different desired formats, and to plan for cases depending on whether the browser supports WebP or AVIF versions or not. Simply check the boxes according to the image formats present on your pages (PNG or JPG), and the format in which you want to compress them.
• In the 2nd block: “JPG / PNG options in WebP” You can define the compression parameters in WebP if you have chosen to compress your images in this format. This is to define the percentage of degradation to apply to the images. For example, the “Lossless” choice necessarily sets the quality to 100%, and your compressed images may possibly be heavier than the originals. If you choose lossy compression, you must then define the desired level of loss, and carry out tests to evaluate the results. The “Alpha quality” choice concerns the quality of the transparency of the images in PNG version. By checking the smart subsampling box , an algorithm automatically reduces the weight of the image.

• In the 3rd block: “JPG / PNG to AVIF Options” Here you choose the compression settings in AVIF. Note that if you compress without loss, in the end, the weight can also be greater than that of your original image. You can also perform tests to identify the level of loss that is visually acceptable, and relevant to your performance objectives. Finally, you can define the chrominance subsampling (here is what you need to understand the subject in more detail ). Note here also that the weight of the image can be modified accordingly.

Just like automatic image resizing , on-the-fly image compression is one of the many smart features offered by our engine.
Discover all the others here (reducing page weight and the number of requests, managing JavaScript and load peaks, optimizations dedicated to mobile…) – in short, everything you need for a fast site and to boost your conversions !

To learn more about the many techniques
that can help you optimize your loading speed: