WebP in CSS

alt="WebP logo" width="150" height="180">

[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:

``css
.logo {
width: 30px;
height: 30px;
background: url(/logo.png);
}
`

The script will set webp or no-webp class on
and PostCSS plugin will generate:

`css
.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 .
Polyfill will remove this class, if JS is enabled in the browser. Polyfill should
be inserted in the , without async or defer attributes, before css.
addNoJs` option is enabled by default.

[25% smaller]: https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results
[PostCSS]: https://github.com/postcss/postcss
[WebP]: https://en.wikipedia.org/wiki/WebP

alt="Sponsored by Evil Martians" width="236" height="54">

Docs

Read full docs here.