Last active
October 9, 2024 00:33
-
-
Save sergejmueller/5500879 to your computer and use it in GitHub Desktop.
Apache: Detecting WebP support with Header Vary Accept
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 |
Sergej: Just checked your website, but in the latest Chrome Beta I see PNG's. Is this .htacess not working any more?
@MusikDK
Look: http://d.pr/i/DUF1
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.
@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.
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
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.