webp-in-css
Version:
PostCSS plugin and tiny JS script (175 bytes) to use WebP in CSS background
55 lines (42 loc) • 1.59 kB
Markdown
# WebP in CSS
<img src="https://ai.github.io/webp-in-css/webp-logo.svg" align="right"
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 `<body>`
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 `<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.
[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
<a href="https://evilmartians.com/?utm_source=webp-in-css">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
alt="Sponsored by Evil Martians" width="236" height="54">
</a>
## Docs
Read full docs **[here](https://github.com/ai/webp-in-css#readme)**.