img-loader

Image minimizing loader for webpack 2, meant to be used with url-loader, file-loader, or raw-loader

Minify PNG, JPEG, GIF and SVG images with imagemin

Issues with the minimized output should be reported to imagemin.

Comes with the following optimizers:

• gifsicle — Compress GIF images
• mozjpeg — Compress JPEG images
• optipng — Compress PNG images
• pngquant — Compress PNG images
• svgo — Compress SVG images

Install

$ npm install img-loader --save-dev

Usage

Documentation: Using loaders

module: {
  rules: [
    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      use: [
        'url-loader?limit=10000',
        'img-loader'
      ]
    }
  ]
}

The default minification includes: gifsicle, mozjpeg, optipng, & svgo. Each with their default settings.

pngquant can be enabled by configuring it in the options.

Options

Options can also be passed by specifying properties matching each optimizer in your rule options. false or null can be used to disable one of the default optimizers.

For more details on each plugin's options, see their documentation on Github.

{
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          'url-loader?limit=10000',
          {
            loader: 'img-loader',
            options: {
              enabled: process.env.NODE_ENV === 'production',
              gifsicle: {
                interlaced: false
              },
              mozjpeg: {
                progressive: true,
                arithmetic: false
              },
              optipng: false, // disabled
              pngquant: {
                floyd: 0.5,
                speed: 2
              },
              svgo: {
                plugins: [
                  { removeTitle: true },
                  { convertPathData: false }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

License

This software is free to use under the MIT license. See the LICENSE-MIT file for license text and copyright information.