How to get started with AVIF using HTML

04.11.20 · 8 min read
I won't waste your time with 10.000 word text passages about how awesome AVIF is just to boost my SEO rankings. AVIF is a file format based off a video codec that support high bit depth while keeping a low file size. You can find plenty of articles about how fantastic AVIF is right here, as well as everywhere else on the web. Or you can just enjoy my countless, occasionally irritating about this site. You clicked this article because you would like to learn how to use AVIF in HTML, so let's get riiiiiight into the topic.

Browser Support

The most important thing you should be aware of when using AVIF is that it unfortunately isn't supported everywhere yet. This is a shame, right? It took ten years for webP (another excellent image format, but not good enough to match avif) to become fully supported due to Apple's unwillingness to implement the format in Safari. But still, there's only 90% support. By the time of writing, AVIF has 25% support on browsers. Google Chrome and Opera support it. Firefox supports it if you enable the AVIF image format in the settings. Safari has no AVIF support yet. However, AVIF is an invention by the non-profit industry consortium Alliance of Open Media (AOM). The largest browser-creating giants Apple, Mozilla and Google are all part of the project, so you can expect support quite quickly.

The picture element

For the time-being, you can still use the format in its almost-complete glory with the native <picture> element in HTML. Why, you may ask? Well, the <picture> element allows for progressive support. You can simply put all the image files in the order in which you want them to be loaded. The wanky browsers of your visitors will only load one image at the same time, thus reducing the load on the server. Also, there's no need for a script to handle multiple images. Everyone is happy.

Implementation

At the moment, 96% of browsers support the picture element. Still, even if your grandma is visiting your website with her disgusting Internet Explorer 6, her browser will simply fall back to using the default image format if you provide it. Take a look at the following example and copy it if you want it for your website:
1<picture>
2  <source srcSet="image.avif" type="image/avif" />
3  <source srcSet="image.webp" type="image/webp" />
4  <img
5  width="1280" height="720" decoding="async" loading="lazy"
6  src="image.jpg" alt="an avif image" />
7</picture>
PS: The lazy loading attribute is supported by 75% of all browsers, make use of it! Also, don't forget to add width & height to avoid a Layout Shift. Providing width and height is more important than ever.
This is a nice set up for all visitors. Just make sure the first source tag is an AVIF image for the browser to display the first media type it can handle.

Responsiveness

At this point, it seems to be great, right? Well, no, not yet. That is because our platform still lacks support for different types of devices. Creating an optimal experience for Retina displays is a little more challenging. Also, we would want to make sure that mobile devices do not download images that are way larger than their screen.
1<picture>
2
3<source
4sizes="(max-width: 640px) 100vw, 640px"
5srcSet="/image-1280.avif 1280w, /image-640.avif 640w, /image-320.avif 320w"
6type="image/avif" />
7
8<source
9sizes="(max-width: 640px) 100vw, 640px"
10srcSet="/image-1280.avif 1280w, /image-640.webp 640w, /image-320.webp 320w"
11type="image/webp" />
12
13<source
14sizes="(max-width: 640px) 100vw, 640px"
15srcSet="/image-1280.avif 1280w, /image-640.jpg 640w, /image-320.jpg 320w"
16type="image/jpg" />
17
18<img
19width="1280" height="720" decoding="async" loading="lazy"
20src="/image.jpg" alt="an avif image" />
21
22</picture>
Okay, this is probably not as challenging as we originally believed, but creating AVIF images for every viewport with every format can be exhausting. Nevertheless, if your website does not have many images, it's a good way to prepare for the future. Please remember to provide fallback images for older versions of browsers or experimental usage like in Firefox. Else your User Experience might be suffering as images won't get rendered. AVIF is good for backgrounds as well. Check out the . How about ? Enjoy this article featuring the different types of frameworks you can use. :)

Related topics, websites and sources

Related Questions, tags and headlines

(files)
(image avif)
(img src)
(image format)
(avif support)
(image webp)
(sizes)
(firefox)
(avif images)
(webp image)
(file size)
(avif files)
(google)
(file format)
(google chrome)
(image file)
(picture)
(AVIF Image Format – The Next-Gen Compression Codec)
(Future Of AVIF: Browser Compatibility for Chrome and Firefox)
(File sizes: AVIF vs WebP vs PNG/JPEG)
(A More Optimal Image Format)
(A way to leverage new image formats)
(How to Create AVIF Files?)
(Is AVIF worth an investment from you as a developer/company? Ready for prime time?)
(What I decided about image formats)
(How to Use AVIF: The New Next-Gen Image Compression Format)
(Is your browser capable of displaying AVIF images?)
(How to convert images to the AVIF file format)
(How to create AVIF images)

Related articles

#css
Fully support AVIF in your CSS today.
Learn how to boost your website by using the new AVIF image format in the `background-images` of your CSS.
#Frameworks
Use AVIF in Frameworks like Vue, React & Angular
Serving AVIF images via JavaScript frameworks is quite easy - find out more here.
#firefox
The Complete Guide about AVIF in Firefox for 2021
Learn about the current state of AVIF in Firefox and how to enable support with a simple tutorial.
Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.