0.9.0 • Published 10 months ago

webp-in-css v0.9.0

Weekly downloads
277
License
MIT
Repository
github
Last release
10 months ago

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:

.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.

Docs

Read full docs here.

0.9.0

10 months ago

0.8.0

3 years ago

0.7.0

4 years ago

0.6.0

4 years ago

0.5.1

5 years ago

0.5.0

5 years ago

0.4.0

5 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago