# webp-in-css

> PostCSS plugin and tiny JS script (175 bytes) to use WebP in CSS background

Latest version **0.9.0** (published 2024-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install webp-in-css
pnpm add webp-in-css
yarn add webp-in-css
bun add webp-in-css
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2024-09-22 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/webp-in-css) |
| Module format | CommonJS |
| Node | >=18.0 |
| Dependencies | 1 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrey Sitnik |
| Maintainers | ai |
| Keywords | webp, postcss-plugin, css, background, polyfill |

## Links

- npm: https://www.npmjs.com/package/webp-in-css
- Repository: https://github.com/ai/webp-in-css
- Homepage: https://github.com/ai/webp-in-css#readme
- Issues: https://github.com/ai/webp-in-css/issues
- Funding: https://opencollective.com/postcss/
- npm.io page: https://npm.io/package/webp-in-css

## Dependencies (1)

- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^6.1.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.9.0 (latest) — 2024-09-22
- 0.8.0 — 2022-12-23
- 0.7.0 — 2021-11-10
- 0.6.0 — 2021-05-08
- 0.5.1 — 2020-09-27
- 0.5.0 — 2020-09-15
- 0.4.0 — 2020-08-04
- 0.3.0 — 2019-08-11
- 0.2.0 — 2019-08-04
- 0.1.2 — 2019-07-24
- 0.1.1 — 2019-07-08
- 0.1.0 — 2019-03-13

## README

# 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)**.

---
_Source: https://npm.io/package/webp-in-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._