Package Exports

img-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (img-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Imagemin comes bundled with the following optimizers:

gifsicle — Compress GIF images
jpegtran — Compress JPEG images
optipng — 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

Query Paramters

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)

Type: number
Default: 3

Select an optimization level between 0 and 7.

The optimization level 0 enables a set of optimization operations that require minimal effort. There will be no changes to image attributes like bit depth or color type, and no recompression of existing IDAT datastreams. The optimization level 1 enables a single IDAT compression trial. The trial chosen is what. OptiPNG thinks it’s probably the most effective. The optimization levels 2 and higher enable multiple IDAT compression trials; the higher the level, the more trials.

Level and trials:

1 trial
8 trials
16 trials
24 trials
48 trials
120 trials
240 trials

progressive (jpg, gif)

Type: boolean
Default: false

Enable jpegtran progressive lossless conversion to progressive. 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.

{
  module: {
    loaders: [
      { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'url?limit=10000', 'img?minimize' ] }
    ]
  }
  imagemin: {
    gifsicle: { interlaced: true },
    jpegtran: { progressive: true },
    optipng: { optimizationLevel: 5 },
    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.