Score:1

Trying to get Apache to serve webp instead of png/jpg (from /img folder of prestashop)

cn flag

First post here, so I hope I did it well.

I converted all png/jpg starting from my prestashop public_html folder to webp, and added rewrite rules to the .htaccess in order to have the webp served instead of png/jpg.

I based my rewrites on the already existing prestashop rewrites. Where I had:
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
I ended up doing:

RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.webp [L]
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.webp [L]
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]

Which works: I got jpg URL serving webp images, so far so good (I know still need to implement

#RewriteCond %{HTTP_ACCEPT} image/webp
#RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

and as well try to figure out if I should leave [L] or do [L,T=image/webp] or do [T=image/webp,E=REQUEST_image], which is why I am reading apache related docs and crawling the web about rewrite related topics which is quiet huge indeed.

Ok, so back to the main topic, I saw that I was missing a webp rewrite for the images the prestashop stores in public_html/img folder.

Then I tried the following (and so other variants):

RewriteRule ^/img/(.+)\.jpe?g$ /img/$1.webp [L]
RewriteRule ^/img/(.+)\.png$ /img/$1.webp [L]

^--- NOT OK... still serving jpg/png type images from the img directory (double checked the MIME Type).

Note that:

  1. Every time I changed .htaccess and tried a solution, I cleared the prestashop cache, just in case (despite knowing the .htaccess being read at every request).
  2. webp images corresponding to jpg/png in img folder exist.
  3. image file perms is correct in img folder and indeed in all stuff under public_html
  4. In img folder in prestashop, there is another .htaccess, which restricts the type of files that can be served from this folder, and I added already webp, just in case someone should ask.

UPDATE: As requested by MrWhite, adding the .htaccess of the img folder

<IfModule mod_php5.c>
    php_flag engine off
</IfModule>

# Apache 2.2
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
    <Files ~ "(?i)^.*\.(webp|jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico)$">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4
<IfModule mod_authz_core.c>
    Require all denied
    <Files ~ "(?i)^.*\.(webp|jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico)$">
        Require all granted
    </Files>
</IfModule>

Please could you guys kindly help me here?

kz flag
"In img folder in prestashop, there is another .htaccess" - Please edit your question to include the contents of this `.htaccess` file.
Score:0
kz flag
RewriteRule ^/img/(.+)\.jpe?g$ /img/$1.webp [L]
RewriteRule ^/img/(.+)\.png$ /img/$1.webp [L]

In .htaccess files, the URL-path that the RewriteRule pattern matches against, does not start with a slash. So the above directives will never match the requested URL, so won't do anything. In your earlier rules you are matching against a digit as the first character, not a slash.

For example, it should be:

RewriteRule ^img/(.+)\.jpe?g$ /img/$1.webp [L]

However...

In img folder in prestashop, there is another .htaccess

Depending on the directives contained in /img/.htaccess file then these directives might be completely overriding the mod_rewrite directives in the parent .htaccess file. The mod_rewrite directives in the parent .htaccess might not even be getting processed.

UPDATE: Having now seen the /img/.htaccess file then it's OK - these directives will not over the directives in the parent .htaccess file with regards to rewriting the request to the .webp images.

Since these additional rules only apply to the /img subdirectory and you already have a .htaccess file in the /img subdirectory then you could write these rules in the /img/.htaccess file instead (slight adjustment required). For example:

# /img/.htaccess

RewriteEngine On

RewriteRule ^(.+)\.jpe?g$ $1.webp [L]

The RewriteRule pattern matches against the URL-path relative to the directory that contains the .htaccess file. So, in this case, it does not match against the /img subdirectory.


To complete the rule and incorporate the other conditions you've mentioned you can do the following. Now back in the root .htaccess file:

# /.htaccess

# Rewrite image request to ".webp" if supported and exists
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(img/.+)\.(jpe?g|png)$ $1.webp [L,T=image/webp]

If the corresponding .webp image is guaranteed to exist then you don't necessarily need the filesystem check (the second condition).

(I'm not sure why you would need E=REQUEST_image?)

And if using the .htaccess file in the /img subdirectory:

# /img/.htaccess

# Rewrite image request to ".webp" if supported and exists
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/img/$1.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [L,T=image/webp]

Aside:

RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.webp [L]
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.webp [L]
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]

The 3rd rule isn't doing anything and should be removed. And the first two rules can be easily combined using regex alternation on the file extension. eg. (jpg|webp).

cn flag
It works (I choosed the "in img/" .htaccess approach you proposed). Thanks a lot to you for the proposed solutions and comprehensive explainations! And yes before I got reply, in the meantime I did try the regex in this web [link](https://htaccess.madewithlove.com/) and found that I had to remove the heading slash to get a match. Still thanks to you I got this and more very clear now.
cn flag
Regarding your comment about the "3rd line": This was present in the default .htaccess as generated by prestashop, and I think it was used in order to get "friendly url".
kz flag
@Totoro Ok, quite possibly. However, in your "new" trio of rules, your first rule will rewrite the `.jpg` request to `.webp` first, so the 3rd is never processed. If, however, you add the mentioned _conditions_ to the first rule then the 3rd rule would have purpose as an "else" clause when (if) the first rule should fail.
cn flag
Thanks again @MrWhite for the comprehensive explaination (again) :) !
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.