Webpack loader and plugin to compress images using imagemin
Switch branches/tags
greenkeeper/cacache-11.3.0 greenkeeper/cacache-11.3.1 greenkeeper/eslint-plugin-itgalaxy-89.0.0 greenkeeper/eslint-plugin-itgalaxy-90.0.0 greenkeeper/eslint-plugin-itgalaxy-91.0.0 greenkeeper/eslint-plugin-itgalaxy-91.1.0 greenkeeper/eslint-plugin-itgalaxy-92.0.0 greenkeeper/eslint-plugin-itgalaxy-92.0.1 greenkeeper/eslint-plugin-itgalaxy-93.0.0 greenkeeper/eslint-plugin-itgalaxy-94.0.0 greenkeeper/eslint-plugin-jest-22.0.1 greenkeeper/eslint-plugin-jest-22.1.0 greenkeeper/eslint-plugin-jest-22.1.1 greenkeeper/eslint-plugin-jest-22.1.2 greenkeeper/eslint-plugin-jsx-a11y-6.1.2 greenkeeper/eslint-plugin-lodash-4.0.0 greenkeeper/eslint-plugin-lodash-5.0.0 greenkeeper/eslint-plugin-lodash-5.0.1 greenkeeper/eslint-plugin-lodash-5.1.0 greenkeeper/husky-1.1.4 greenkeeper/husky-1.2.0 greenkeeper/lint-staged-8.0.5 greenkeeper/lint-staged-8.1.0 greenkeeper/npm-run-all-4.1.4 greenkeeper/npm-run-all-4.1.5 greenkeeper/prettier-1.14.3 greenkeeper/prettier-1.15.0 greenkeeper/prettier-1.15.1 greenkeeper/prettier-1.15.2 greenkeeper/prettier-1.15.3 greenkeeper/remark-cli-6.0.1 greenkeeper/webpack-4.17.3 greenkeeper/webpack-4.18.0 greenkeeper/webpack-4.18.1 greenkeeper/webpack-4.19.0 greenkeeper/webpack-4.19.1 greenkeeper/webpack-4.20.0 greenkeeper/webpack-4.20.1 greenkeeper/webpack-4.20.2 greenkeeper/webpack-4.21.0 greenkeeper/webpack-4.22.0 greenkeeper/webpack-4.23.0 greenkeeper/webpack-4.23.1 greenkeeper/webpack-4.24.0 greenkeeper/webpack-4.25.0 greenkeeper/webpack-4.25.1 greenkeeper/webpack-4.26.0 greenkeeper/webpack-4.26.1 greenkeeper/webpack-4.27.0 greenkeeper/webpack-4.27.1 greenkeeper/webpack-sources-1.3.0 master
Nothing to show
Clone or download

README.md

imagemin-webpack

NPM version Travis Build Status dependencies Status devDependencies Status peerDependencies Status Greenkeeper badge

Imagemin Webpack

Plugin and Loader for webpack to optimize (compress) all images using imagemin. Do not worry about size of images, now they are always optimized/compressed.

Why

  • No extra dependencies (imagemin-gifsicle, imagemin-pngquant) in dependencies section into package.json. You decide for yourself what plugins to use.

  • This loader and plugin will optimize ANY images regardless of how they were added to webpack. image-webpack-loader don't optimize some images generating favicons-webpack-plugin or copy-webpack-plugin. ImageminWebpackPlugin don't optimize inlined images with url-loader.

  • Images optimized when inlined with url-loader or svg-url-loader. This can't be done with imagemin-webpack-plugin.

  • Throttle asynchronous images optimization (using maxConcurrency plugin option). This allows you to not overload a server when building.

  • All tested.

  • Persistent cache.

  • (Optional) Don't crash building process if your have corrupted image(s).

Install

npm install imagemin-webpack --save-dev

Optionals

Images can be optimized in two modes:

  1. Lossless (without loss of quality).
  2. Lossy (with loss of quality).

Note:

Explore the options to get the best result for you.

Recommended basic imagemin plugins for lossless optimization

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

Recommended basic imagemin plugins for lossy optimization

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

Basic

Note: If you want to use loader or plugin standalone see sections below, but this is not recommended.

Note: Make sure that plugin place after any plugins that add images or other assets which you want to optimized.

const ImageminPlugin = require("imagemin-webpack");

// Before importing imagemin plugin make sure you add it in `package.json` (`dependencies`) and install
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminOptipng = require("imagemin-optipng");
const imageminSvgo = require("imagemin-svgo");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader" // Or `url-loader` or your other loader
          }
        ]
      }
    ]
  },
  plugins: [
    // Make sure that the plugin is after any plugins that add images, example `CopyWebpackPlugin`
    new ImageminPlugin({
      bail: false, // Ignore errors on corrupted images
      cache: true,
      imageminOptions: {
        // Lossless optimization with custom option
        // Feel free to experement with options for better result for you
        plugins: [
          imageminGifsicle({
            interlaced: true
          }),
          imageminJpegtran({
            progressive: true
          }),
          imageminOptipng({
            optimizationLevel: 5
          }),
          imageminSvgo({
            removeViewBox: true
          })
        ]
      }
    })
  ]
};

Standalone Loader

Documentation: Using loaders

In your webpack.config.js, add the ImageminPlugin.loader, chained with the file-loader or url-loader:

const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader" // Or `url-loader` or your other loader
          },
          {
            loader: ImageminPlugin.loader,
            options: {
              bail: false, // Ignore errors on corrupted images
              cache: true,
              imageminOptions: {
                plugins: [imageminGifsicle()]
              }
            }
          }
        ]
      }
    ]
  }
};

Standalone Plugin

Documentation: Using plugins

const ImageminWebpack = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");

module.exports = {
  module: {
    rules: [
      {
        loader: "file-loader",
        options: {
          emitFile: true, // Don't forget emit images
          name: "[path][name].[ext]"
        },
        test: /\.(jpe?g|png|gif|svg)$/i
      }
    ]
  },
  plugins: [
    // Make sure that the plugin is after any plugins that add images
    new ImageminWebpack({
      bail: false, // Ignore errors on corrupted images
      cache: true,
      imageminOptions: {
        plugins: [imageminGifsicle()]
      },
      loader: false
    })
  ]
};

Options

Loader Options

Name Type Default Description
cache {Boolean|String} false Enable file caching
bail {Boolean} compiler.options.bail Emit warnings instead errors
imageminOptions {Object} { plugins: [] } Options for imagemin

cache

{Boolean}

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader" // Or `url-loader` or your other loader
          },
          {
            loader: ImageminPlugin.loader,
            options: {
              cache: true,
              imageminOptions: {
                plugins: [imageminGifsicle()]
              }
            }
          }
        ]
      }
    ]
  }
};

Enable file caching. Default path to cache directory: node_modules/.cache/imagemin-webpack.

{String}

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader" // Or `url-loader` or your other loader
          },
          {
            loader: ImageminPlugin.loader,
            options: {
              cache: "path/to/cache",
              imageminOptions: {
                plugins: [imageminGifsicle()]
              }
            }
          }
        ]
      }
    ]
  }
};

bail

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader" // Or `url-loader` or your other loader
          },
          {
            loader: ImageminPlugin.loader,
            options: {
              bail: true,
              imageminOptions: {
                plugins: [imageminGifsicle()]
              }
            }
          }
        ]
      }
    ]
  }
};

imageminOptions

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader" // Or `url-loader` or your other loader
          },
          {
            loader: ImageminPlugin.loader,
            options: {
              bail: true,
              imageminOptions: {
                plugins: [
                  imageminGifsicle({
                    interlaced: true,
                    optimizationLevel: 3
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

Plugin Options

Name Type Default Description
test {String\/RegExp|Array<String|RegExp>} /.(jpe?g|png|gif|svg)$/i Test to match files against
include {String\/RegExp|Array<String|RegExp>} undefined Files to include
exclude {String\/RegExp|Array<String|RegExp>} undefined Files to exclude
cache {Boolean|String} false Enable file caching
bail {Boolean} compiler.options.bail Emit warnings instead errors
imageminOptions {Object} { plugins: [] } Options for imagemin
loader {Boolean} true Automatically adding imagemin-loader (require for minification images using in url-loader, svg-url-loader or other)
maxConcurrency {Number} Math.max(1, os.cpus().length - 1) Maximum number of concurrency minification processes in one time
name {String} [hash].[ext] The target asset name
manifest {Object} undefined Contain optimized list of images from other plugins

test

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i
    })
  ]
};

include

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      include: /\/includes/
    })
  ]
};

exclude

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      exclude: /\/excludes/
    })
  ]
};

cache

Be careful when your enable cache and change options for imagemin plugin (example for imagemin-gifsicle) you should remove cache manually. You can use rm -rf ./node_modules/.cache/imagemin-webpack command. This is due to the fact that imagemin-plugin is Function and we don't know her arguments to invalidate cache.

Note: if somebody know how we can fix it PR welcome!

{Boolean}

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      cache: true
    })
  ]
};

Enable file caching. Default path to cache directory: node_modules/.cache/imagemin-webpack.

{String}

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      cache: "path/to/cache"
    })
  ]
};

bail

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      bail: true
    })
  ]
};

imageminOptions

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");

module.exports = {
  plugins: [
    new ImageminPlugin({
      imageminOptions: {
        plugins: [
          imageminGifsicle({
            interlaced: true,
            optimizationLevel: 3
          })
        ]
      }
    })
  ]
};

maxConcurrency

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      maxConcurrency: 3
    })
  ]
};

name

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");

module.exports = {
  plugins: [
    new ImageminPlugin({
      name: "[hash]-compressed.[ext]"
    })
  ]
};

manifest

Note: contains only assets compressed by plugin. Note: Manifest will be contain list of optimized images only after emit event.

webpack.config.js

const ImageminPlugin = require("imagemin-webpack");
const ManifestPlugin = require("manifest-webpack-plugin");
const manifest = {};

module.exports = {
  plugins: [
    new ImageminPlugin({
      manifest
    }),
    new ManifestPlugin({
      // Contain compressed images
      manifest
    })
  ]
};

Related

Contribution

Feel free to push your code if you agree with publishing under the MIT license.

Changelog

License