Home / server / Questions / 1070508
In Process
Diego Flores
Asked: 2021-07-25 04:37:05 +0800 CST

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

  • 772

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?

rewrite .htaccess mod-rewrite images apache2

1 Answers

  1. 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.

    • 4