Don't miss out on AVIF when using Netlify

25.11.20 · 6 min read

Users wish for native support

Many Netlify users wanted a native solution that would allow them to deliver images in WebP or AVIF format at any time. However, at the time of the article on February 21, there is no easy way to enable this feature. Instead, you can enable AVIF files through Netlify's header tag and then ship AVIF files with a native image HTML tag, as we explained here:

Defining custom headers with netlify.toml

While using the image tag on Netlify seems to work, there was a problem with using. avif files. When trying to view the images inside Firefox, we noticed that the images did not show up. This problem did not occur in Chrome, but it did happen in Firefox. We found that the response headers returned the Content-Type: application/octet-stream, which caused Firefox to refuse to display 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

to find more ways to utilize this file.// Enabling AVIF support on Netlify is not easy as simply clicking a single button. However, it can be easily achieved by customizing the configuration file to your specific needs. If this is the first time you hear about the configuration file, I suggest you take a look at its to find other ways to use 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

Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.