Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Show comment
Hide comment
@sergejmueller

sergejmueller May 2, 2013

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

Owner

sergejmueller commented May 2, 2013

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

@gregmartyn

This comment has been minimized.

Show comment
Hide comment
@gregmartyn

gregmartyn Jul 19, 2013

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.

gregmartyn commented Jul 19, 2013

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

This comment has been minimized.

Show comment
Hide comment
@universaldenmark

universaldenmark Sep 24, 2013

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

universaldenmark commented Sep 24, 2013

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

@sergejmueller

This comment has been minimized.

Show comment
Hide comment
@sergejmueller
Owner

sergejmueller commented Nov 24, 2013

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

@universaldenmark

This comment has been minimized.

Show comment
Hide comment
@universaldenmark

universaldenmark Apr 25, 2014

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.

universaldenmark commented Apr 25, 2014

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

This comment has been minimized.

Show comment
Hide comment
@maniqui

maniqui Feb 24, 2015

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

maniqui commented Feb 24, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@jslegers

jslegers Dec 9, 2015

What exactly is this code supposed to do?

jslegers commented Dec 9, 2015

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