Using mod_negotiation to serve webp if the UA requests it

Question

Is it possible to use mod_negotiation to serve up a webp image if the browser supports it, and a jpg otherwise?

For instance, if I link to an image with the path /images/test, it serves the image found at /images/test.webp if the UA knows about webp, or jpg otherwise?

I've tried poking around, but it seems that the Accept headers in Chrome at least look like Accept:*/*, rather than specifying the image type.

If this isn't the way to do it, has anyone got any other suggestions?

Things are possible but you need to find if an handler has been defined by this picture format providers. I guess you won't find this here or in Apache but at the source code provider. And thx as I did not know that format. But looks like that big effort is required for low added value from what I understood. — hornetbzz, Jun 23 '11 at 22:02
Perhaps this question is a better fit for [Server Fault](http://serverfault.com) or [webmasters.se]? — , Jun 24 '11 at 00:18
I'm sorry, but this isn't a programming question (at least in its current incarnation). I've removed (and refunded) the bounty on it. Right now, this does appear sever related - it focuses purely on the response of Apache, but doesn't show how that response came to be. If you'd like this to be migrated, please flag it for moderator attention. — Tim Post, Jun 24 '11 at 10:16

score 2 · Accepted Answer · answered Jun 23 '11 at 22:42

For serving WebP images, I use a rewrite rule in nginx that checks for the existence of the file and support for WebP images. I ported it over to Apache mod_rewrite since the OP mentioned mod_negotiation. The rewrite looks for a User Agent containing the word "chrome" and than checks for a file with a .webp extension with the same name and path as the .jpg or the .png file and if so serves the WebP file. The rewrite rule is a bit kludgy but it gets the job done.

AddType image/webp .webp
# strip the extension off of all JPGs
RewriteCond %{HTTP_USER_AGENT} (chrome) [NC]
RewriteRule (.*)\.jpg$ $1

#check for a webp file, if so serve it
RewriteCond   %{REQUEST_FILENAME}.webp  -f
RewriteRule   (.*)  $1.webp [E=WEBP:1]

#check for if we did not have a webp file and we do have a jpg, if so serve it
RewriteCond   %{REQUEST_FILENAME}.jpg  -f
RewriteCond   %{REQUEST_FILENAME}.webp  !-f
RewriteRule   (.*)  $1.jpg

# strip the extension off of all PNGs
RewriteCond %{HTTP_USER_AGENT} (chrome) [NC]
RewriteRule (.*)\.png$ $1

#check for a webp file, if so serve it
RewriteCond   %{REQUEST_FILENAME}.webp  -f
RewriteRule   (.*)  $1.webp [E=WEBP:1]

#check for if we did not have a webp file and we do have a png, if so serve it
RewriteCond   %{REQUEST_FILENAME}.png  -f
RewriteCond   %{REQUEST_FILENAME}.webp  !-f
RewriteRule   (.*)  $1.png

For my site, I have the luxury of being able to load my photos in via JavaScript after I can detect the support for WebP in the browser instead of relying on the user agent string. If WebP support exists than I set a cookie before I begin loading in my images. Therefore instead of this RewriteCond

RewriteCond %{HTTP_USER_AGENT} (chrome) [NC]

I would use this

RewriteCond %{HTTP_COOKIE} supports_webp

Any chance I can see what that looks like in the nginx version? I just tried unporting these rules, curious what yours looks like. — Dandre Allison, Apr 01 '12 at 07:24
Great unless you're using a reverse proxy, in which case Varying based on User-Agent will hurt your cache-hit rate. Chrome now sends "image/webp" in the Accept header for image requests, so that'd be a better thing to check for. — Greg, Jul 19 '13 at 13:18

h0tw1r3 · Answer 2 · 2011-06-24T00:03:43.660

The Accept header is not required, and when it is supplied with meaningful value(s) it simply indicates to the server what content types the client should receive for that specific request.

In the past, like when png was not well supported, I used rules like these (adapted to fit your question). Webp is supported by two browsers, making the rules pretty simple.

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} \ Chrome/ [OR]
RewriteCond %{HTTP_USER_AGENT} Opera.*Version/11.1
RewriteRule .* - [E=imgext:webp,T=image/webp]

RewriteCond %{ENV:imgext} !webp
RewriteRule .* - [E=imgext:jpg]

RewriteCond %{REQUEST_URI} ^/images/
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule (.*) $1\.%{ENV:imgext} [QSA]

Using mod_negotiation to serve webp if the UA requests it

2 Answers2