Create a gist now

Instantly share code, notes, and snippets.

Apache: Detecting WebP support with Header Vary Accept
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
@sergejmueller

The code is implemented on http://cup.wpcoder.de

@GregMartyn

I see that you're adding 'Accept' to the Vary header, which is great, but you're also varying the content based on the User-Agent, so that would have to be included in the Vary header for it to be correct.

Fortunately Chrome is now sending "image/webp" in the Accept header for image requests, (although not on html requests unfortunately) so you should be able to remove the User-Agent detection. Users will get the webp version for resources included on a page, but not if they request the image directly.

@universaldenmark

Sergej: Just checked your website, but in the latest Chrome Beta I see PNG's. Is this .htacess not working any more?

@sergejmueller

@MusikDK
Look: http://d.pr/i/DUF1

@universaldenmark

Sorry I didn't see your link in time as its expired. When I check in Chrome 35 Beta (osx) its still PNG's your site is serving.

@maniqui

@MusikDK, you probably see a .png files because that's what the URL in the page points to. But the server is serving an webp image "disguised" as a file with extension .png. It's an internal rewrite.

@jslegers

What exactly is this code supposed to do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment