IT Nota

  • Home
  • How To
  • .NET
  • WordPress
  • Contact
You are here: Home / How To / How to Serve WebP Image on IIS

How to Serve WebP Image on IIS

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>

IIS failed to render WebP format

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

  1. Launch IIS Manager.

  2. 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.

    IIS Manager MIME type setting

  3. On the right pane of MIME Types dialog box, click on Add… link.

    IIS Manager Add a new MIME Type

  4. 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.

    IIS Manager add new MIME type WebP as image/webp

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.

WebP rendered from IIS successfully

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

Further Reading

A new image format for the Web
How to Serve WebP Image Format with Fallback for Other Browsers

Download

Downloading and Installing WebP Converter

April 7, 2017 Filed Under: How To Tagged With: IIS, Internet Information Services, Microsoft

Comments

  1. Anjani Gupta says

    January 17, 2019 at 3:35 am

    thank you for sharing this knowledgeable content it is very helpful for my website

    Reply
    • platt says

      January 19, 2019 at 2:50 pm

      You’re welcome Anjani.

      Reply
  2. Umair Ahmed says

    July 21, 2020 at 10:50 am

    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.

    Reply
    • platt says

      July 23, 2020 at 6:02 pm

      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.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • .NET
  • Coding
  • Cybersecurity
  • Database
  • How To
  • Internet
  • Multimedia
  • Photography
  • Programming
  • Resources
  • Review
  • WordPress
  • Writing

Recent Posts

  • F#: Seq, List, Array, Map, Set. Which One to Use?
  • How to Get Table Definition in SQL Server
  • Why You Need to Use a VPN
  • How to Use Custom Color in SSMS Using Redgate SQL Prompt
  • How to Install Python on Windows Server
WP Engine Power your Brand with Managed WordPress

Recent Posts

  • F#: Seq, List, Array, Map, Set. Which One to Use?
  • How to Get Table Definition in SQL Server
  • Why You Need to Use a VPN
  • How to Use Custom Color in SSMS Using Redgate SQL Prompt
  • How to Install Python on Windows Server
  • RSS

Tags

.NET Core Access Adobe AdSense Amazon ASP.NET Cdonts Dll Classic ASP Code Editor Connect-It Copywriting ETL FSharp Genesis Framework Git Google HP Asset Manager HTML HTML5 Hugo IIS Information Security Internet Internet Information Services iOS Linux macOS Microsoft Microsoft SQL Server MVC PHP Simple Mail Transfer Protocol Smtp Server Social Media SQL SQL Server SSIS SSMS SSRS VPN Windows Windows 8 Windows 10 Windows 2012 Windows Server

Copyright © 2011-2021 IT Nota. All rights reserved. Terms of Use | Privacy Policy | Disclosure