node package manager

img-loader

img-loader

npm Version Greenkeeper badge Build Status

JS Standard Style MIT License

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:

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.