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
Looks like I finally found the holy grail of my webp incompatibilities.
Never knew it was my IIS all that time. Happy new year!
Glad that solved your issue. Happy New Year to you as well!
thanks!! it’s really helpful!!
This helped me. I appreciate it.
This helped me. I apreciate it.
That’s great to hear. Thanks for your feedback, Shannon.
THANKS A lOT
Thanks! It was always strange to find that webp never worked for our windows servers… How strange that this is still not supplied by Microsoft themselves.
Microsoft is not known to be the fastest in adapting new technology. That goes for for WebP, TLS 1.3 (or even 1.2), and HTTP/3. I hope they’re going to be quicker in doing so. At least in this case, it’s flexible enough to make our own change.
thank you for sharing this knowledgeable content it is very helpful for my website
You’re welcome Anjani.