Home > Software design >  Serve webp as jpg for not appended filename extensions
Serve webp as jpg for not appended filename extensions

Time:06-08

Similar to this question when I put what's needed for serving jpg/png as webp in the .htaccess file, it doesn't load! I have image.jpg, image.jpg.webp, and image.webp. It's working with the second one but what I want is the third one. So I deleted the second one but now it doesn't load the webp file. Each time I'm checking, I'm clearing the cache, so that's not the problem. My browser also supports WebP. I don't know why when I right-click to save the image it shows webp when the second file exists, but when I delete the second one in order to use the third one it shows jpg to be saved!

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /wordpress/
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule (. )\.(jpg|jpeg|jpe|png)$ $1.webp [T=image/webp,NC]
</IfModule>

I thought maybe the regex which is (. )\.(jpg|jpeg|jpe|png)$ is wrong but that's correct as I tested it and the result was:

  0 => "example.com/image.jpg"
  1 => "example.com/image"
  2 => "jpg"

How can I fix this?

CodePudding user response:

RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (. )\.(jpg|jpeg|jpe|png)$ $1.webp [T=image/webp,NC]

The problem is that you are always checking for the existence of image.jpg.webp in the preceding condition, but rewriting to image.webp in the substitution.

You need to check for the existence of image.webp instead (the same file you are rewriting to).

However, this does depend on where the .htaccess file is located (unless we add another condition to extract the necessary part of the URL/file-path*1).

For example, if the .htaccess file is located inside the /wordpress subdirectory then:

:
RewriteCond %{DOCUMENT_ROOT}/wordpress/$1.webp -f
RewriteRule (. )\.(jpg|jpeg|jpe|png)$ $1.webp [T=image/webp,NC,L]

However, if the .htaccess file is located in the document root then remove /wordpress from the TestString in the preceding condition.

You should include the L flag on the RewriteRule directive.

This rule should go at the top of the .htaccess file, before the WordPress code block (ie. before the # BEGIN WordPress comment marker). Although if the image.jpg file always exists then it shouldn't matter.


*1 Generalised version

The rule could be changed to work regardless of where the .htaccess file is located (although the RewriteBase directive would need to be adjusted accordingly or removed altogether). However, we would need an additional condition in order to extract the necessary part of the file-path. For example:

:
RewriteCond %{REQUEST_FILENAME} (. )\.(jpg|jpeg|jpe|png)$ [NC]
RewriteCond %1.webp -f
RewriteRule (. )\.(jpg|jpeg|jpe|png)$ $1.webp [T=image/webp,NC,L]

The %1 backreference (as opposed to $1) contains the value of the first capturing group in the preceding CondPattern. So, in the above, it contains the absolute file-path that the requested URL maps to, less the .jpg suffix.

  • Related