Users wish for native supportMany 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.tomlWhile 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"