Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

image-webpack-loader

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

image-webpack-loader

Image loader module for webpack

  • 2.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
117K
decreased by-1.11%
Maintainers
1
Weekly downloads
 
Created
Source

image-loader

Image loader module for webpack

Minify PNG, JPEG, GIF and SVG images with imagemin

Issues with the output should be reported on the imagemin issue tracker.

Install

$ npm install image-webpack-loader --save-dev

Usage

Documentation: Using loaders

In your webpack.config.js, add the image-loader, chained with the file-loader:

loaders: [
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
]

If you want to use pngquant you must use the json options notation like this:

loaders: [
  {
    test: /.*\.(gif|png|jpe?g|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
    ]
  }
];

You can also use a configuration section in your webpack config to set global options for the loader, which will apply to all loader sections that use the image loader.

{
  module: {
    loaders: [
      {
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack'
        ]
      }
    ]
  },

  imageWebpackLoader: {
    pngquant:{
      quality: "65-90",
      speed: 4
    },
    svgo:{
      plugins: [
        {
          removeViewBox: false
        },
        {
          removeEmptyAttrs: false
        }
      ]
    }
  }
}

Comes bundled with the following optimizers:

  • gifsicleCompress GIF images
  • jpegtranCompress JPEG images
  • optipngCompress PNG images
  • svgoCompress SVG images
  • pngquantCompress PNG images

imagemin(options)

Unsupported files are ignored.

options

Options are applied to the correct files.

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. 1 trial
  2. 8 trials
  3. 16 trials
  4. 24 trials
  5. 48 trials
  6. 120 trials
  7. 240 trials
progressive (jpg)

Type: boolean
Default: false

Lossless conversion to progressive.

interlaced (gif)

Type: boolean
Default: false

Interlace gif for progressive rendering.

svgo (svg)

Type: object Default: {}

Pass options to svgo.

bypassOnDebug (all)

Type: boolean
Default: false

Using this, no processing is done when webpack 'debug' mode is used and the loader acts as a regular file-loader. Use this to speed up initial and, to a lesser extent, subsequent compilations while developing or using webpack-dev-server. Normal builds are processed normally, outputting oprimized files.

imageminPngquant(options)

options.floyd

Type: number
Default: 0.5

Controls level of dithering (0 = none, 1 = full).

options.nofs

Type: boolean
Default: false

Disable Floyd-Steinberg dithering.

options.posterize

Type: number

Reduce precision of the palette by number of bits. Use when the image will be displayed on low-depth screens (e.g. 16-bit displays or compressed textures).

options.quality

Type: string

Instructs pngquant to use the least amount of colors required to meet or exceed the max quality. If conversion results in quality below the min quality the image won't be saved.

Min and max are numbers in range 0 (worst) to 100 (perfect), similar to JPEG.

options.speed

Type: number
Default: 3

Speed/quality trade-off from 1 (brute-force) to 10 (fastest). Speed 10 has 5% lower quality, but is 8 times faster than the default.

options.verbose

Type: boolean
Default: false

Print verbose status messages.

Inspiration

License

MIT (http://www.opensource.org/licenses/mit-license.php)

FAQs

Package last updated on 10 Jul 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc