As most web users are using Chrome as their default browser how do you take advantage of serving WebP image from IIS server?
The problem with using IIS Server is by default IIS does not recognize WebP as an image type so it cannot correctly render it on the page even if the browser can support it.
Using a test page webp-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 WebP Test Render</title> </head> <body> <h1>PNG</h1> <img src="images/caniuse-WebP-Test.png" width="368" height="335" alt="PNG" /> <h1>WebP</h1> <img src="images/caniuse-WebP-Test.webp" width="368" height="335" alt="WebP" /> </body> </html>
The issue stems from the fact that IIS does not recognize WebP 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 WebP 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 WebP as an image type so IIS knows how to handle this new format.
In Add MIME Type box, enter .webp as the file name extension and image/webp 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.
As a side note, the file size for the PNG is 62.4KB, while the WebP is 29.8KB (52% smaller) with lossless compression using cwebp with the following command line.
C:\> cwebp -lossless -exact caniuse-WebP-Test.png -o caniuse-WebP-Test.webp
You can use the same step to configure IIS to serve AVIF image type as well.
Further Reading
A new image format for the Web
How to Serve WebP Image Format with Fallback for Other Browsers
How to Serve AVIF Image on IIS
How to Serve AVIF Image Format with Fallback for Other Browsers
How to Serve Outlook File Type on IIS
