Don't miss out on AVIF when using Netlify

25.11.20 · 6 min read

Users wish for native support

Many users of Netlify wished for a native solution, which would allow them to deliver images in WebP or AVIF format at any time. However, at the time of writing this article in February 21, there is no easy way to enable this feature. Instead, you can enable AVIF files via the header tag of Netlify, and you can then serve AVIF files by using a native picture HTML tag, as we explained here:

Defining custom headers with netlify.toml

While using the picture tag on Netlify seems to work, there was a problem when using .avif files. When attempting to view the images within Firefox, we noticed that the images were not showing up. This problem did not happen in Chrome, but it did happen in Firefox. We found that the Response Headers were returning the Content-Type: application/octet-stream which caused Firefox to refuse to display any data. We resolved the bug by defining custom headers within the Netlify configuration file (Netlify.toml).
1[[headers]]
2for = "*.avif"
3[headers.values]
4Content-Type = "image/avif"

Summary

Enabling AVIF support on Netlify is not easy as simply clicking a single button. But it can be easily achieved by customizing the configuration file to satisfy your specific needs. If this is your first time hearing about the configuration file, I suggest you to take a look at their to find more ways to utilize this file.

Related topics, websites and sources

Related Questions, tags and headlines

(Netlify)
(Netlify / Netlify Large Media)
(Netlify Analytics)
(Netlify Functions)
(browser compatibility)
(next-gen image compression format)
(Using AVIF in Web Development Today)
(AVIF Content-Type Headers + Netlify)

Related articles

#cloudflare
Do you benefit from Cloudwork's AVIF support?
Cloudflare has added support for AVIF, a new image format. Learn how to optimize images and convert them to WebP or AVIF on demand.
#Frameworks
Use AVIF in Frameworks like Vue, React & Angular
Serving AVIF images via JavaScript frameworks is quite easy - find out more here.
#WordPress
How To Use AVIF Images In WordPress
WordPress doesn't allow uploading AVIF files. Learn how to still use AVIF images on your website today.
Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.