Skip to content
PostCSS plugin and tiny JS script (128 bytes) to use WebP in CSS background
Branch: master
Clone or download
Latest commit 894e310 Mar 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore Add WebP detection Mar 12, 2019
.npmignore
.travis.yml Add tests Mar 12, 2019
CHANGELOG.md Release 0.1 version Mar 13, 2019
README.md
index-no-webp.test.js
index-webp.test.js Remove uncompressed JS script sources Mar 12, 2019
index.js
package.json
plugin.js Rename project Mar 13, 2019
plugin.test.js
yarn.lock

README.md

WebP in CSS

WebP logo

PostCSS plugin and tiny JS script (128 bytes) to use WebP in CSS background.

It 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') 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 generates:

.logo {
  width: 30px;
  height: 30px;
}
body.webp .logo {
  background: url(/logo.webp);
}
body.no-webp .logo {
  background: url(/logo.png);
}
Sponsored by Evil Martians

Usage

Step 1: convert all your JPEG/PNG images to WebP by Squoosh. Set checkbox on Lossless for PNG images and remove it for JPEG.

We recommend Reduce palette for most of the PNG images.

Save WebP images in the same places of JPEG/PNG images: img/bg.pngimg/bg.webp.

Step 2: use <picture> to insert WebP images in HTML:

- <img src="/screenshot.jpg" alt="Screenshot">
+ <picture>
+   <source srcset="/screenshot.webp" type="image/webp">
+   <img src="/screenshot.jpg" alt="Screenshot">
+ </picture>

Step 3: install webp-in-css. For npm use:

npm install --save-dev webp-in-css

For Yarn:

yarn add --dev webp-in-css

Step 4: add JS script to your client-side JS bundle:

+ require('webp-in-css')

Since JS script is very small (128 bytes), the best way for landings is to inline it to HTML:

+   <script><%= readFile('node_modules/webp-in-css/index.js') %></script>
  </head>

Step 5: check do you use PostCSS already in your bundler. You can check postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you don’t have it already, add PostCSS to your bundle:

  • For webpack see postcss-loader docs.
  • For Parcel create postcss.config.js file. It already has PostCSS support.
  • For Gulp check gulp-postcss docs.

Step 5: Add webp-in-css/plugin to PostCSS plugins:

module.exports = {
  plugins: [
+   require('webp-in-css/plugin'),
    require('autoprefixer')
  ]
}

We also recommend to put all images from CSS to preload content:

+   <link rel="preload" as="image" type="image/webp" href="/logo.webp">
    <script><%= readFile('node_modules/webp-in-css/index.js') %></script>
  </head>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.