Join Log in
Score:3
avatar Server

htaccess rewrite /dir/*.jpg to /dir/webp/*.webp only when webp file exists

cn flag
Diego Flores

I'm trying to rewrite all website files (*.jpg|*.gif|*.png) to *.webp in a subdir, but only when the *.webp file exists. Previous and new files have the same name, only changing the extension and *.webp files are all under subdir of the original one.

I'm struggling with htaccess to do the job. Basic rules are:

  1. Only matches PNG/JPG/GIF file
  2. Original images dir pattern is: /site/views/00_projects/[VARIABLE MAIN DIR NAME HERE]/content/image/[VARIABLE SUBDIR NAME HERE]/*.jpg
  3. New *.webp dir is pattern is: /site/views/00_projects/[VARIABLE DIR NAME HERE]/content/image/[VARIABLE SUBDIR NAME HERE]/webp/*.webp
  4. Only rewrite IF webp file exists

I really have no idea on how to make it work. Can someone help?

843
1 + 0
Score:4
avatar Server
kz flag
MrWhite

Strictly speaking you also need to make sure the user-agent making the request supports WEBP images (ie. check the Accept HTTP request header for image/webp).

Try the following near the top of the root .htaccess file:

RewriteEngine On

# Rewrite images to WebP if they exist
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1/webp/$2.webp -f
RewriteRule ^(site/views/00_projects/[^/]+/content/image/[^/]+)/([^/]+)\.(?:png|jpg|gif)$ $1/webp/$2.webp [T=image/webp,L]

The RewriteRule pattern (ie. ^(site/views/00_projects/[^/]+/content/image/[^/]+)/([^/]+)\.(?:png|jpg|gif)$) matches the requested png, jpg or gif image and saves the URL-path in the $1 backreference and the filename in the $2 backreference (used later in the RewriteRule substitution string).

The first condition (RewriteCond directive) that checks against the HTTP_ACCEPT server variable, checks that the user-agent supports WEBP images.

The second condition checks that the target webp image exists.

The T=image/webp flag is necessary to send the correct mime-type (Content-Type header) back to the client.

0 + 5
cn flag
Diego Flores
Worked like a charm, THANKS A LOT! One little question: with this code, the URL keeps the original file path (with *.jpg, i.e.); what would it need to redirect to *.webp url path if it exists and browser supports it?
1
Reply
kz flag
MrWhite
@DiegoFlores You're welcome. For a _permanent_ "redirect" you would add an `R=301` flag to the `RewriteRule` directive and you wouldn't then need the `T` flag. ie. `[R=301,L]`. However, you should generally avoid an external redirect if these are multiple in-page images, since it potentially slows your users (bad for SEO) and doubles the requests hitting your server, filling your logs with masses of 301s for what are "normal" requests. If you are linking to `.jpg` files etc. then keep it as an internal rewrite, otherwise, change the URLs you are linking to.
2
Reply
cn flag
Diego Flores
Thanks again! I'll keep it in mind! I was just wondering if Google will read the right Content-Type or only the file URL with the first solution when evaluating SEO/PageSpeed/etc ;-) Anyway, you saved the day <3
0
Reply
kz flag
MrWhite
@DiegoFlores Yes, Google will read the "right Content-Type" - that's the purpose of the `T` flag. Whether the "URL" ends in `.jpg` (or whatever) is irrelevant - it is not the URL that determines the mime-type.
1
Reply
kz flag
MrWhite
@DiegoFlores If this answered your question then please mark it as "accepted" by clicking the tick/checkmark next to the answer below the voting arrows (in order to help other readers). Thanks, much appreciated. :)
0
Reply
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

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.