webp-in-css
v0.9.0
Published
PostCSS plugin and tiny JS script (175 bytes) to use WebP in CSS background
Downloads
2,117
Maintainers
aiReadme
WebP in CSS
PostCSS plugin and tiny JS script (175 bytes) to use WebP in CSS background.
This tool will make your images 25% smaller for Chrome, Firefox, and Edge. Safari will download the bigger JPEG/PNG image.
You add require('webp-in-css/polyfill') to your JS bundle and write CSS like:
.logo {
width: 30px;
height: 30px;
background: url(/logo.png);
}The script will set webp or no-webp class on <body>
and PostCSS plugin will generate:
.logo {
width: 30px;
height: 30px;
background: url(/logo.webp) no-repeat;
}
body.webp .logo {
background-image: url(/logo.webp);
}
body.no-webp .logo, body.no-js .logo {
background-image: url(/logo.png);
}If you want to use addNoJs option, you need manually set no-js class on <body>.
Polyfill will remove this class, if JS is enabled in the browser. Polyfill should
be inserted in the <head>, without async or defer attributes, before css.
addNoJs option is enabled by default.
Docs
Read full docs here.