Wordpress web.config rewrite to support webp files on IIS

Question

I run my Wordpress site on IIS.

I have files test.jpg and test.webp in the root of my website. I can access both when I request these files directly. See it live here.

I want to make sure that requests to .jpg and .png files are redirected to .webp for support browsers. I want this for the products listed on my website, but I can't even get this test.jpg file to work.

I'm updating my web.config, that lives in the root of my website folder. The web.config is used, because rules like this are triggered:

    <rule name="Test Rewrite 0" stopProcessing="true">
      <match url=".*" />
      <action type="Rewrite" url="index.php" />
    </rule>
    

I then removed everything and have just this rule:

    <rule name="Redirect test.jpg to test.webp" stopProcessing="true">
      <match url="(.*)test\.jpg" />
      <conditions logicalGrouping="MatchAll">
        <add input="{HTTP_ACCEPT}" pattern="image/webp" />
        <add input="{REQUEST_FILENAME}.webp" matchType="IsFile" />
      </conditions>
      <action type="Rewrite" url="{R:1}test.webp" />
    </rule>

In IIS MIME Types I added: .webp, image/webp, Local

But when I request www.example.com/test.jpg nothing happens. No console errors, not redirects. I cleared my cache, restarted IIS.

What more can I try?

I checked here already:

write <rewrite> for wordpress site in web.config in IIS server Append extension in image-URLs on WordPress for webp-support Serving webp images conditionally if the browser supports it in IIS

Answer 1

First, you might need to check and verify if the URL rewrite module is installed in your IIS server. You can download the URL Rewrite module for IIS from Microsoft here.

Secondly, consider updating your web.config file like the below:

<rule name="Redirect jpg/png to webp" stopProcessing="true">
    <match url="(.+)\.(jpg|png)$" />
    <conditions logicalGrouping="MatchAll">
        <add input="{HTTP_ACCEPT}" pattern="image/webp" />
        <add input="{REQUEST_FILENAME}.webp" matchType="IsFile" />
    </conditions>
    <action type="Rewrite" url="{R:1}.{R:2}.webp" />
</rule>

The above fetches requests for .jpg and .png file extension types and if the client browser supports image/webp and also if there is .webp version of the requested resource is available it will rewrite the URL to serve the .webp version.

As you have stated you seem to have configured the MIME type correctly

In IIS MIME Types I added: .webp, image/webp

Ensure that the IIS application pool has read access to the web.config file and also make sure to give everyone permission for the directory where your image files are located. (Only for troubleshooting Update the permission later for the respective level)

Once the above-mentioned steps are completed try restarting the application pool and the site, if the Issue persists try checking the logs of IIS usually located in C:\inetpub\logs\LogFiles directory for more information as well as the Windows event logger.

Hope the above helps.

Answer 2

To solve your problem of serving WebP images automatically for supported browsers on your WordPress site running on IIS, you'll need to modify your web.config file. Here's a step-by-step guide to implement this:

First of all ensure that your IIS server has the URL Rewrite module installed. If not you can download it from the official Microsoft IIS site.

Then open your web.config file in the root of your WordPress installation. Inside the tag, add or modify the <system.webServer> section with the following rules:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- WebP support for jpg and png -->
        <rule name="Serve WebP" stopProcessing="true">
          <match url="(.*)\.(jpe?g|png)$" ignoreCase="true" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTP_ACCEPT}" pattern="image/webp" />
            <add input="{DOCUMENT_ROOT}/{R:1}.webp" matchType="IsFile" />
          </conditions>
          <action type="Rewrite" url="{R:1}.webp" />
        </rule>

        <!-- Existing WordPress rules -->
        <rule name="WordPress" patternSyntax="Wildcard">
          <match url="*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.php" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This configuration does the following:

• The "Serve WebP" rule checks if the requested URL ends with .jpg, .jpeg, or .png (case-insensitive).
• It then checks if the browser accepts WebP images and if a corresponding .webp file exists.
• If both conditions are met, it rewrites the URL to serve the WebP version instead.
• The existing WordPress rule is kept to ensure normal WordPress functionality.

Make sure that the MIME type for WebP is properly set in IIS. You've already added this, but double-check that it's correct:

• Extension: .webp
• MIME type: image/webp

After making these changes, save the web.config file and restart your IIS server or the specific website in IIS Manager.

Clear your browser cache and test again by requesting a JPG or PNG image. For browsers that support WebP, you should now see the WebP version being served if it exists.

Remember that this solution assumes that you have both the original (JPG/PNG) and WebP versions of your images with the same filename (e.g., image.jpg and image.webp). You may need to batch convert your existing images to WebP format. If you're still experiencing issues after implementing these steps, please provide more details about any error messages or unexpected behavior you encounter.

Answer 3

Are you sure that ReWrite Module is Installed and Enabled on your IIS Server?

Also, this is the refined version of your rule:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Redirect jpg to webp" stopProcessing="true">
          <match url="(.*)\.jpg$" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTP_ACCEPT}" pattern="image/webp" />
            <add input="{REQUEST_FILENAME}.webp" matchType="IsFile" />
          </conditions>
          <action type="Rewrite" url="{R:1}.webp" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Additionally, you can check whether your browser is sending the HTTP_ACCEPT header with image/webp by using your the web developer toolbar in your browser.

If nothing works then enable the Failed Request Tracing in IIS to review that why the rewrite request not working.

Answer 4

first of all, I'm no expert on the subject and will be stating my humble opinion, please be lenient on me if you find the suggestions too obvious 🙃.

Based on my understanding of the question you can try the following:

• Rule Ordering

Try to see if the WebP rewrite rule comes before the WordPress catch-all rule or not? It Should.

The order of rules in IIS is important.

• Regular Expression

I think you have already done that but just in case see if the regular expression match both .jpg and .png files.

• Condition Checking

You can try using {DOCUMENT_ROOT} instead of {REQUEST_FILENAME} to check for the existence of the WebP file, if you aren't already.

• URL Rewriting

As mentioned by @GTK in the comments Rewrite and Redirect can have different impacts so you can also try to use Rewrite instead of Redirect to serve the WebP file without changing the URL.

• MIME Type

I think you mentioned that you've already done that but just for the sake of saying, ensure the MIME type for WebP is correctly set in the section.

I think the web.config file will look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- WebP Rewrite Rule -->
        <rule name="Serve WebP" stopProcessing="true">
          <match url="(.*)\.(jpe?g|png)$" ignoreCase="true" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTP_ACCEPT}" pattern="image/webp" />
            <add input="{DOCUMENT_ROOT}/{R:1}.webp" matchType="IsFile" />
          </conditions>
          <action type="Rewrite" url="{R:1}.webp" />
        </rule>

        <!-- WordPress Rewrite Rule -->
        <rule name="WordPress" stopProcessing="true">
          <match url="^index\.php$" ignoreCase="false" />
          <action type="None" />
        </rule>
        <rule name="WordPress Rewrite" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.php" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent>
  </system.webServer>
</configuration>

oh and on a side not just for a reminder you should make sure to perform an IIS reset after making changes to the web.config file to ensure the changes take effect.

I hope you can solve your problem, good luck. 👍😇