Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress web.config rewrite to support webp files on IIS

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

Tags:

2

Answers


  1. 0

    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. 👍😇

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search