How do you take advantage of serving AVIF image from IIS server? For simplicity sake, since the setup is very similar to serving WebP format, I’m going to use the same screenshot illustrations from that post.
The problem with using IIS Server is by default IIS does not recognize AVIF as an image type so it cannot correctly render it on the page even if the browser can support it.
Using a test page avif-test.html with the content below, the page will render as shown.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IT Nota AVIF Test Render</title> </head> <body> <h1>PNG</h1> <img src="images/caniuse-AVIF-Test.png" width="368" height="335" alt="PNG" /> <h1>AVIF</h1> <img src="images/caniuse-AVIF-Test.avif" width="368" height="335" alt="AVIF" /> </body> </html>
The screenshot above is taken from a webp test page, however the experience will be very similar for AVIF.
The issue stems from the fact that IIS does not recognize AVIF as a legitimate MIME type. So with a simple fix, we can make IIS to treat the new format as a valid image file.
How to Enable AVIF on IIS
Launch IIS Manager.
Click on your main server on the left pane to make sure we’re making the change on a server level (as opposed to a site level). Then click on the MIME Types.
On the right pane of MIME Types dialog box, click on Add… link.
We want to add a new MIME type of AVIF as an image type so IIS knows how to handle this new format.
In Add MIME Type box, enter .avif as the file name extension and image/avif as the MIME type and click OK.
That’s all there is to it.
Now if you reload your Chrome browser, you should be able to see both image files rendered correctly.
The screenshot above is taken from a webp test page, however the experience will be very similar for AVIF.
As a side note, currently, the way to compress the image to AVIF is to do it from avif.io website.
Further Reading
How to Serve AVIF Image Format with Fallback for Other Browsers
How to Serve WebP Image on IIS
How to Serve WebP Image Format with Fallback for Other Browsers
How to Serve Outlook File Type on IIS