img-loader

Image minimizing loader for webpack, 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
• jpegtran — 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

var url = require('file!img!./file.png');

By default the minification is run when webpack is run in production mode (or whenever the UglifyJsPlugin is used).

The default minification includes:

• gifsicle with interlaced: false
• jpegtran with progressive: false
• optipng with optimizationLevel: 2
• svgo with default plugins

pngquant is disabled by default, and can be enabled by configuring it in the advanced options.

Query Parameters

These are common options you can specify in the require or loaders config.

• minimize - Minify regardless of webpack mode.
• optimizationLevel Select an optipng optimization level between 0 and 7.
• progressive Convert to jpg and gif to progressive.

require('img?optimizationLevel=5');
require('img?progressive=true');
require('img?minimize&optimizationLevel=5&progressive=true');
require('img?-minimize'); // makes the loader a simple passthrough

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

optimizationLevel (png)

Shortcut for optipng optimizationLevel, which determines the number of trials.

progressive (jpg, gif)

Shortcut to enable jpegtran progressive and enable gifsicle interlace for progressive rendering.

Advanced Options

Advanced options can also be passed by specifying an imagemin property on your webpack config object. Each optimizer will be passed the corresponding property on the imagemin object as options.

Any options specified this way override basic optimizationLevel and progressive options set. For more details on each plugin's options, see their documentation on Github.

{
  module: {
    loaders: [
      { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'url?limit=10000', 'img?minimize' ] }
    ]
  },
  imagemin: {
    gifsicle: { interlaced: false },
    jpegtran: {
      progressive: true,
      arithmetic: false
    },
    optipng: { optimizationLevel: 5 },
    pngquant: {
      floyd: 0.5,
      speed: 2
    },
    svgo: {
      plugins: [
        { removeTitle: true },
        { convertPathData: false }
      ]
    }
  }
}

If you need to define two different loader configs, you can also change the config's property name via img?config=otherConfig:

{
  module: {
    loaders: [
      { test: /\.svg$/i, loaders: [ 'url?limit=10000', 'img?config=svgOpts' ] }
    ]
  },
  svgOpts: {
    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.