I am using a server-side image resizer to automatically serve up images at the correct size.
The image resizer takes its parameters for resizing from the request URL, so I’ve set up some .htaccess rewrite rules to make the URLs for the images a bit prettier:
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w1140-h640-c16x9-q100-p1/v2/photos/$1 [R=301]
Using the above, I can use http://example.com/photos/homehero/file.jpg in my code and it returns a photo at the correct size. This works perfectly as is, and the resizer automatically caches images on the server after they’re generated so the site is reasonably speedy. I have 5 different sized images at the moment.
Taking into account screen-size and bandwidth considerations, I’d like to serve up a separate set of images with the width/height reduced (w1140-h640 above) and the quality reduced too (q100 above) for mobile users.
I’ve added a rewrite condition to detect user agent with a second set of rewrite rules. This is below the original rules, eg:
RewriteCond %{HTTP_USER_AGENT} "(android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w570-h320-c16x9-q50-p1/v2/photos/$1 [R=301]
However this doesn’t seem to work. I have tried putting the second block above the first but that didn’t work either, and I’ve also tried using a not flag for the user agent (%{HTTP_USER_AGENT} "!(android|…) before the “normal” rewrite rule block, but that didn’t work.
I have googled and searched StackOverflow and found similar-but-not questions, so I’m wondering if this can actually be achieved in .htaccess? My full rule block is below, any help would be much appreciated.
#Image Resizer Standard sizes
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w1140-h640-c16x9-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/tile-small/(.*)$ /v2/imgr/w504-h252-c6x3-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/hero/(.*)$ /v2/imgr/w1140-h200-c57x10-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/productshot/(.*)$ /v2/imgr/w1140-h640-c16x9-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/gallerythumb/(.*)$ /v2/imgr/w160-h90-c16x9-q100-p1/v2/photos/$1 [R=301]
# mobile site redirection
RewriteCond %{HTTP_USER_AGENT} "(android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w570-h320-c16x9-q50-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/tile-small/(.*)$ /v2/imgr/w504-h252-c6x3-q50-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/hero/(.*)$ /v2/imgr/w570-h100-c57x10-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/productshot/(.*)$ /v2/imgr/w570-h320-c16x9-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/gallerythumb/(.*)$ /v2/imgr/w160-h90-c16x9-q100-p1/v2/photos/$1 [R=301]
You should put the mobile rules above the desktop rules. Also, you need to repeat the RewriteCond for every RewriteRule.
So