Wishing 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: How to use AVIF in HTML
Defining custom headers
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
Enabling AVIF support on Netlify is not easy as 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 documentationto find other ways to use this file.