# 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:
```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
## Docs
Read full docs **[here](https://github.com/ai/webp-in-css#readme)**.