Images take up more than half of the weight of pages. So, to make your pages as light as possible and load quickly, optimizing images and photos is an essential lever. Photos are essential to enhance the product catalog of your online business, or to illustrate your articles, but if they degrade your loading times, your conversion rates risk paying the price. So, how do you find a compromise between optimal visual quality and a page weight that guarantees loading speed? New image formats have emerged to meet these needs, and Fasterize allows you to deploy them very easily on your website. Let’s take a closer look at the advantages of WebP and AVIF .
Exit JPEG, PNG, SVG and GIF… make way for WebP and AVIF
Images are essential for your website, but if they are not optimized, they can contribute to a poor user experience by slowing down page loading.
Remember that if a page is not loaded after 3 seconds, more than half of Internet users will leave it (source Google). Slow pages also mean the risk of seeing your visitors abandon your website to go to your competitors, not to mention the impact on your bounce rates (Etsy did the experiment: by adding 160 kB of images to its pages on mobile, the bounce rate increased by 12% ).
Furthermore, when it comes to a website that offers a bad user experience, 88% of Internet users say they will not come back. Do not, under any circumstances, let images be responsible for the drop in engagement, and the drop in your technical and business performance!
Here’s an example of the gains you can make by displaying optimized image files on your site’s pages: Revelry (bridesmaid dresses) optimized the images on their e-commerce site; the result: the site loads 43% faster, bounce rates decreased by 8% , and conversions increased by 30% . If you were in doubt about the value of optimizing your images, you see that it is no longer allowed.
Generally speaking, for our clients, frontend optimization can lead to up to 30% more conversions, and this of course involves compressing images to reduce the weight of the pages, and also relieve the servers .
You are probably familiar with the classic formats for image files such as JPEG (or JPG), PNG, SVG or GIF… Although they are supported by all browsers (Chrome, Firefox, Safari, Internet Explorer, Edge, etc.), they do not offer the best performance, which is why you must compress them to improve the loading speed of your pages, without degrading the quality perceived by your users!
We’ll see how Fasterize helps you compress all your images on the fly , and improves your website speed with next-generation image formats, even the latest ones.
A feature for compressing image files to next-generation formats for fast pages
Fasterize’s frontend optimization engine allows you to automatically compress all your images to next-gen formats in just a few clicks. But what exactly is it?
If you have already tested the performance of your pages with PageSpeed Insights or Lighthouse , you will certainly have noticed the line “Serve images in next-generation formats” among Google’s recommendations (more than tips, these tips range from best practices to point techniques that will allow you to optimize the online shopping experience).
In this case, the tool refers to the WebP image compression format . However, it is not the only one, and it is not the most efficient either. AVIF offers even more interesting results. Let’s see the differences between these two formats.
For the record, WebP is a format designed by Google (so it makes sense that it promotes it); as for AVIF, it is based on the AV1 video format, and compensates in particular for the shortcomings of JPEG in terms of processing flat tints and fine lines, and in terms of the richness of color ranges.
Be aware that performance gains change depending on whether you use lossy or lossless compression , the famous trade-off between visual quality and image weight. According to tests carried out by Google, at equal quality, WebP reduces image weight by 26% compared to PNG and by -25 to -34% compared to a JPEG version.
Furthermore, an image compressed with AVIF is on average 50% lighter than an image in JPEG version.
The compression match is therefore won hands down by AVIF!
For an overview of the differences between JPEG, WebP and AVIF versions of the same image, we also conducted a survey – the differences are clearly visible between these three formats:
Whatever image compression format you adopt to optimize your page weight and loading speed, you are obviously not going to perform the operation manually, image by image.
Indeed, you need to automate the compression of your images , and for that, you may have already explored options on the side of plugins and extensions linked to the different CMS on the market Magento, WordPress, Salesforce Commerce Cloud…
This is an essential first step, and you need to go even further to act effectively on all the levers for optimizing your performance (images, but also HTML code, JavaScript, CSS, mobile, etc.). To do this, a global frontend optimization solution such as Fasterize will allow you to take advantage of the most advanced techniques and formats, and to intelligently articulate all these features.
Need to efficiently optimize your images,
want to dig into the technical aspects of WebP and AVIF, and learn more about Fasterize’s dedicated functionality and how to enable it?