img-loader

4.0.0 verified Sat Apr 25 auth: no javascript

Image minimizing loader for webpack 4, version 4.0.0. It relies on imagemin and its plugins to optimize PNG, JPEG, GIF, and SVG images. The loader is intended for use with webpack 4 and requires Node >=12. It differs from alternatives like image-webpack-loader by being a thin wrapper that delegates all optimization to user-specified imagemin plugins, offering flexibility but requiring manual plugin installation and configuration.

Common errors

error Module not found: Error: Can't resolve 'imagemin' ↓

cause imagemin peer dependency not installed.

fix

npm install imagemin --save-dev

error Invalid options object. img-loader has been initialized using an options object that does not match the API schema. ↓

cause Usually 'plugins' option is not an array or function, or contains invalid entries.

fix

Ensure 'plugins' is an array of instantiated imagemin plugins, like [require('imagemin-mozjpeg')({})]

error TypeError: Cannot read property 'resourcePath' of undefined ↓

cause Using a function for 'plugins' but it doesn't return an array or improper context usage.

fix

Ensure the function returns an array and uses the provided context parameter correctly.

Warnings

breaking Migrating from 2.x to 4.0.0: No default plugins included; must specify all imagemin plugins manually. ↓

fix Install desired imagemin plugins (e.g., imagemin-gifsicle, imagemin-mozjpeg, imagemin-optipng, imagemin-svgo) and configure them in the 'plugins' option.

deprecated img-loader v4 only supports webpack 4. Not compatible with webpack 5+. ↓

fix Use image-webpack-loader or other webpack 5-compatible image optimizers for webpack 5 projects.

gotcha imagemin peer dependency is required: must have imagemin ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 installed separately. ↓

fix Run `npm install imagemin --save-dev` alongside img-loader.

gotcha Empty plugins array means no optimization. By default, the loader passes images through unmodified. ↓

fix Define at least one imagemin plugin in the 'plugins' option for actual compression.

gotcha Plugins must be instantiated with options, even if empty object. E.g., require('imagemin-mozjpeg')({}) not just require('imagemin-mozjpeg'). ↓

fix Call the plugin function with an options object: require('imagemin-mozjpeg')({ progressive: true })

Install

npm install img-loader

yarn add img-loader

pnpm add img-loader

Imports

img-loader (rule use entry)

wrong

Using `require('img-loader')` in webpack config without proper rule structure

correct

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

img-loader is a webpack loader; it's used as a string in the `use` array of a module rule, not typically imported directly.

plugins option (array)

wrong

options: { plugins: ['imagemin-mozjpeg'] }

correct

options: { plugins: [require('imagemin-mozjpeg')({ progressive: true })] }

Plugins must be required and instantiated with options, not just named strings.

plugins option (function)

wrong

options: { plugins: function(context) { return require('imagemin-svgo') } }

correct

options: { plugins(context) { return [require('imagemin-svgo')({})] } }

When using a function, it receives the loader context and must return an array of plugin instances.

inline loader notation
wrong
```
'img-loader?plugins=...'
```
correct
```
'img-loader'
```
Options are not passed via query string; they must be defined in a loader options object.

Quickstart

Shows a minimal webpack 4 configuration using img-loader with url-loader and three imagemin plugins (mozjpeg, pngquant, svgo) for image optimization.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          'url-loader?limit=10000',
          {
            loader: 'img-loader',
            options: {
              plugins: [
                require('imagemin-mozjpeg')({ progressive: true, arithmetic: false }),
                require('imagemin-pngquant')({ floyd: 0.5, speed: 2 }),
                require('imagemin-svgo')({ plugins: [{ removeTitle: true }] })
              ]
            }
          }
        ]
      }
    ]
  }
};