Using mod_negotiation to serve webp if the UA requests it [closed]

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?

Answer 1

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

Answer 2

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]