Repository: vincentorback/WebP-images-with-htaccess
Branch: master
Commit: 45798fb1d0f4
Files: 4
Total size: 6.6 KB
Directory structure:
gitextract_7hu7rzmg/
├── .htaccess
├── README.md
├── index.html
└── modernizr-webp.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .htaccess
================================================
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>
<IfModule mod_headers.c>
# Vary: Accept for all the requests to jpeg, png and gif
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
================================================
FILE: README.md
================================================
# WebP images with htaccess
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).
## Usage
Place the following in your .htaccess file and jpg/png/gif images will be replaced with WebP images if found in the same folder.
```apache
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>
<IfModule mod_headers.c>
# Vary: Accept for all the requests to jpeg, png and gif
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
```
## Preferred solution
Controlling your files using htaccess sure is fun, but a more responsible way is to use the `<picture>`-element instead of this solution. It has [great support](https://caniuse.com/webp) in all major browsers and has a built-in fallback for those without it.
```html
<picture>
<source srcset="/path/to/image.webp" type="image/webp">
<img src="/path/to/image.jpg" alt="">
</picture>
```
================================================
FILE: index.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebP image replacement with htaccess</title>
<style>
* {
margin: 0
}
body {
padding: 20px;
}
div {
display: inline-block;
max-width: 350px;
margin: 20px 20px 0 0;
}
img {
width: 100%;
}
span {
display: block;
width: 100%;
height: 50vh;
background: 0 100% / cover transparent no-repeat url('/images/image1.jpg');
}
</style>
</head>
<body>
<h1>WebP image replacement with htaccess</h1>
<p>Browser support WebP: <strong class="js-test">loading...</strong></p>
<main>
<div>
<p>1. This image is available as both webp and jpg.</p>
<img src="images/image1.jpg" />
</div>
<div>
<p>2. This image is only available as a jpg.</p>
<img src="images/image2.jpg" />
</div>
<div>
<p>3. This div has an image background set with a jpg image. It should serve a webp image if supported.</p>
<span class="background-div"></span>
</div>
</main>
<script src="modernizr-webp.js"></script>
<script>
Modernizr.on('webp', function (result) {
document.querySelector('.js-test').textContent = result
})
</script>
</body>
</html>
================================================
FILE: modernizr-webp.js
================================================
/*! modernizr 3.6.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-webp-setclasses !*/
!function(e,n,A){function o(e,n){return typeof e===n}function t(){var e,n,A,t,a,i,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],n=r[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(A=0;A<n.options.aliases.length;A++)e.push(n.options.aliases[A].toLowerCase());for(t=o(n.fn,"function")?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],l=i.split("."),1===l.length?Modernizr[l[0]]=t:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=t),s.push((t?"":"no-")+l.join("-"))}}function a(e){var n=u.className,A=Modernizr._config.classPrefix||"";if(c&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+A+"no-js(\\s|$)");n=n.replace(o,"$1"+A+"js$2")}Modernizr._config.enableClasses&&(n+=" "+A+e.join(" "+A),c?u.className.baseVal=n:u.className=n)}function i(e,n){if("object"==typeof e)for(var A in e)f(e,A)&&i(A,e[A]);else{e=e.toLowerCase();var o=e.split("."),t=Modernizr[o[0]];if(2==o.length&&(t=t[o[1]]),"undefined"!=typeof t)return Modernizr;n="function"==typeof n?n():n,1==o.length?Modernizr[o[0]]=n:(!Modernizr[o[0]]||Modernizr[o[0]]instanceof Boolean||(Modernizr[o[0]]=new Boolean(Modernizr[o[0]])),Modernizr[o[0]][o[1]]=n),a([(n&&0!=n?"":"no-")+o.join("-")]),Modernizr._trigger(e,n)}return Modernizr}var s=[],r=[],l={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var A=this;setTimeout(function(){n(A[e])},0)},addTest:function(e,n,A){r.push({name:e,fn:n,options:A})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=l,Modernizr=new Modernizr;var f,u=n.documentElement,c="svg"===u.nodeName.toLowerCase();!function(){var e={}.hasOwnProperty;f=o(e,"undefined")||o(e.call,"undefined")?function(e,n){return n in e&&o(e.constructor.prototype[n],"undefined")}:function(n,A){return e.call(n,A)}}(),l._l={},l.on=function(e,n){this._l[e]||(this._l[e]=[]),this._l[e].push(n),Modernizr.hasOwnProperty(e)&&setTimeout(function(){Modernizr._trigger(e,Modernizr[e])},0)},l._trigger=function(e,n){if(this._l[e]){var A=this._l[e];setTimeout(function(){var e,o;for(e=0;e<A.length;e++)(o=A[e])(n)},0),delete this._l[e]}},Modernizr._q.push(function(){l.addTest=i}),Modernizr.addAsyncTest(function(){function e(e,n,A){function o(n){var o=n&&"load"===n.type?1==t.width:!1,a="webp"===e;i(e,a&&o?new Boolean(o):o),A&&A(n)}var t=new Image;t.onerror=o,t.onload=o,t.src=n}var n=[{uri:"data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=",name:"webp"},{uri:"data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==",name:"webp.alpha"},{uri:"data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",name:"webp.animation"},{uri:"data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=",name:"webp.lossless"}],A=n.shift();e(A.name,A.uri,function(A){if(A&&"load"===A.type)for(var o=0;o<n.length;o++)e(n[o].name,n[o].uri)})}),t(),a(s),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();e.Modernizr=Modernizr}(window,document);
gitextract_7hu7rzmg/ ├── .htaccess ├── README.md ├── index.html └── modernizr-webp.js
SYMBOL INDEX (5 symbols across 1 files)
FILE: modernizr-webp.js
function o (line 3) | function o(e,n){return typeof e===n}
function t (line 3) | function t(){var e,n,A,t,a,i,l;for(var f in r)if(r.hasOwnProperty(f)){if...
function a (line 3) | function a(e){var n=u.className,A=Modernizr._config.classPrefix||"";if(c...
function i (line 3) | function i(e,n){if("object"==typeof e)for(var A in e)f(e,A)&&i(A,e[A]);e...
function e (line 3) | function e(e,n,A){function o(n){var o=n&&"load"===n.type?1==t.width:!1,a...
Condensed preview — 4 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (7K chars).
[
{
"path": ".htaccess",
"chars": 536,
"preview": "<IfModule mod_rewrite.c>\n RewriteEngine On\n\n # Check if browser supports WebP images\n RewriteCond %{HTTP_ACCEPT} imag"
},
{
"path": "README.md",
"chars": 1482,
"preview": "# WebP images with htaccess\nThis snippet detects if the browser [supports WebP](http://caniuse.com/#search=webp) images "
},
{
"path": "index.html",
"chars": 1364,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <title>WebP image replacement with htaccess</title>\n <"
},
{
"path": "modernizr-webp.js",
"chars": 3403,
"preview": "/*! modernizr 3.6.0 (Custom Build) | MIT *\n * https://modernizr.com/download/?-webp-setclasses !*/\n !function(e,n,A){fun"
}
]
About this extraction
This page contains the full source code of the vincentorback/WebP-images-with-htaccess GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 4 files (6.6 KB), approximately 2.3k tokens, and a symbol index with 5 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.