WebP image replacement with htaccess

├── .htaccess ├── README.md ├── images ├── image1.jpg ├── image1.webp └── image2.jpg ├── index.html └── modernizr-webp.js /.htaccess: -------------------------------------------------------------------------------- 1 | 2 | RewriteEngine On 3 | 4 | # Check if browser supports WebP images 5 | RewriteCond %{HTTP_ACCEPT} image/webp 6 | 7 | # Check if WebP replacement image exists 8 | RewriteCond %{DOCUMENT_ROOT}/$1.webp -f 9 | 10 | # Serve WebP image instead 11 | RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image] 12 | 13 | 14 | 15 | # Vary: Accept for all the requests to jpeg, png and gif 16 | Header append Vary Accept env=REQUEST_image 17 | 18 | 19 | 20 | AddType image/webp .webp 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebP images with htaccess 2 | This snippet detects if the browser [supports WebP](http://caniuse.com/#search=webp) images and then serves a .webp image instead of jpg/png if a .webp file is available at the same location as the supplied jpg/png/gif. Read more about the webp format and other ways to serve it here: [https://images.guide](https://images.guide/#how-do-i-serve-webp). 3 | 4 | ## Usage 5 | Place the following in your .htaccess file and jpg/png/gif images will be replaced with WebP images if found in the same folder. 6 | ```apache 7 | 8 | RewriteEngine On 9 | 10 | # Check if browser supports WebP images 11 | RewriteCond %{HTTP_ACCEPT} image/webp 12 | 13 | # Check if WebP replacement image exists 14 | RewriteCond %{DOCUMENT_ROOT}/$1.webp -f 15 | 16 | # Serve WebP image instead 17 | RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image] 18 | 19 | 20 | 21 | # Vary: Accept for all the requests to jpeg, png and gif 22 | Header append Vary Accept env=REQUEST_image 23 | 24 | 25 | 26 | AddType image/webp .webp 27 | 28 | ``` 29 | 30 | ## Preferred solution 31 | Controlling your files using htaccess sure is fun, but a more responsible way is to use the `