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.

Original Image

JPEG

WebP

AVIF

Rocker.jpg - 2560px x 1707px

5500kb

206kb

92kb

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.

92kb JPEG vs 92kb AVIF


As the AVIF compression is now part of our standard image pipeline, pretty much every image you’ll see through our site is now served as AVIF. So you should hopefully get an even snappier experience than normal.


This site uses cookies that enable us to make improvements, provide relevant content, and for analytics purposes. For more details, see our Cookie Policy. By clicking Accept, you consent to our use of cookies by us and third party code embedded within this site. To change your consent, click the "Update Cookie Consent" link at the bottom of the webpage at any time.