How to use AVIF images with WebP as a fallback on your website

AVIF or AV1 images as they are also called have been growing in popularity over the past couple of years. In 2022 we saw a 76% support rate in major web browsers which means you can almost safely use them on your website without having to think about adding a fallback image type. They are on the other side, not 100% supported yet, and that is why I have written this article. I will teach you how you can use AVIF images on your website safely by providing a fallback that can be used in case AVIF isn't supported.

What is AVIF/AV1?

The AVIF image format is groundbreaking and in 2019 Alliance for Open Media released its first 1.0.0 stable version. Since then the image has been growing in popularity faster than its older brother WebP which was invented by Google.

One of the reasons AVIF is growing so fast in popularity is because of its groundbreaking technology and compression. When you compare the image quality AVIF images automatically become 30% lighter than WebP. The format also allows greater compression without compromising the quality which means your images become even lighter.

It is not only the compression that is great. AVIF also supports 12-bit depth and HDR which means you can edit high-quality images. It also supports animations and even Live Photos such as those you take on an iPhone. There are lots of opinions about AVIF as an image format, but one thing goes again almost every time, and that is that AVIF will be the future go-to format.

Why is AVIF the new go-to format in sustainable web design?

When working with sustainable web design you look at two aspects; The environmental side and the ethical side. On the environmental side, your job is to reduce the environmental impact that your website has on our environment. At the same time as you reduce the impact, you also focus on making it more accessible and creating a better user experience (UX).

AVIF/AV1 has become the new go-to format in sustainable web design because of its great ability to compress images up to 10 times the size of its JPG version. With this format, you can show images in better quality on your website, but without the massive weight added to them. You now no longer have to compress the images so much that you see pixelation because of the degraded quality. You can of course keep doing the same thing, but then you will save +30% compared to before.

How to use AVIF images on your website

Using AVIF images on your website is very easy, and you can even create a fallback that will be used in case the image format isn't supported in your users' web browser. To create the fallback we will use the HTML5 Picture element. This element allows us to create fallbacks that will be used when the first image source isn't supported. The way we do it is by adding the AVIF image first in the source. If the AVIF version isn't supported the web browser will fall back to the next image source in the element. So you can create multiple image formats and add them as you like.

<picture>
   <source type="image/avif" srcset="/IMAGE-SOURCE.avif">  
   <source type="image/webp" srcset="/IMAGE-SOURCE.webp"> 
   <img src="/IMAGE-SOURCE.jpg" /> 
</picture>

By using the example above you will have created a picture element that first tries to render the AVIF version. If that fails it will go with a WebP and lastly, it will use the JPG version.

If you want to learn more about how you can export images as AVIF in Adobe Photoshop, then I have written an article about the matter here: How to export images as AVIF in Adobe Photoshop.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.