Even Faster Images with Duocms8 + AVIF

Fast web page downloads are crucial for maintaining user engagement and satisfaction. Slow-loading pages lead to increased bounce rates and decreased conversion rates. A quick-loading website enhances user experience, boosts search engine rankings, and improves overall website performance, ultimately benefiting both businesses and users.

Image by far make up the vast majority of the data needed to be downloaded by most webpages. 3 Years ago we addd the WebP image format to Duocms7. This made images up to 4x quicker to download. Since then technology has moved on and we’re pleased to announce that DuoCMS 8.1 now supports the AVIF image format.

About AVIF

AVIF is an advanced, high-performance image format developed by the Alliance for Open Media. It leverages the modern video codec AV1, allowing for significant compression while maintaining excellent image quality. AVIF utilizes cutting-edge techniques like intra-frame, inter-frame, and transform coding, as well as support for dynamic and static metadata. This format supports various color spaces, HDR, and alpha channels, making it ideal for web content. Additionally, AVIF provides superior compression compared to other formats like JPEG and WebP. Its rising popularity is attributed to its efficiency, cross-platform compatibility, and ability to reduce file sizes without compromising visual fidelity.

Header Images 50x Smaller

The image in the header is the same image, one with standard jpeg compression (on the right) and the other AVIF compressed. The JPEG version is 5,500kb vs only 92kb for the AVIF version, thats over 50x smaller. If you drag the slider across the image you can compare them in detail. Apart from a very slight lack of detail in places the images are difficult to differentiate. To get the above jpeg to display as a jpeg and not be auto converted to an avif we’ve had to mess with the filename, which prevents our other image compression features kicking in. With those in place it would have gone down to 500kb, but still nowhere near the optimisation AVIF brings.

AVIF Images are relatively slow to convert. Unlike WebP they take a few seconds to generate. For this reason when new images are uploaded to a Duocms site, we first serve them in their original JPEG format, converting to AVIF once the conversion is complete.

Can Everyone Get Optimised Images?

At the time of writing around 83% of visitors will get the AVIF version of the image. If you’re using Microsoft Edge, AVIF is unsupported so you’ll get the WebP version. If your browser doesn’t support either of these formats you’ll get the original JPEG. All of this is done automatically to give your website visitors the best possible experience.

What if We Compress the JPEG to 92kb?

Its worth noting that JPEG compression is variable. So we can increase the compression until it’s the same file size, but the results speak for themselves.