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.
Read full docs here.