PostCSS Imageset Type

PostCSS plugin for adding image-set type to background-images.

Input:

.foo {
  background-image: url('img/logo.jpg');
}

Output:

.foo {
  background-image: url('img/logo.jpg'); // Fallback for browser not supporting image-set
  background-image: image-set(
    'logo.avif' type('image/avif'),
    'logo.webp' type('image/webp'),
    'logo.jpg' type('image/jpeg')
  );
}

⚠ This plugin does NOT convert your images to avif or webp.

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-imageset-type

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-imageset-type'),
    require('autoprefixer')
  ]
}

Settings

Option	Default	Description
useAvif	true	Include the avif version in image-set
useWebp	true	Include the webp version in image-set