img-loader

library4.0.0jsnpmunverified

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.

devops

npm install img-loader

github ↗package ↗

INSTALL

IMPORT

SIG · IMG-LOADER

img-loader

devopsjavascriptv4.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

img-loader (rule use entry)

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

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

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)

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

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

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

plugins option (function)

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

✗ options: { plugins: function(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

✓ 'img-loader'

✗ 'img-loader?plugins=...'

Options are not passed via query string; they must be defined in a loader options object.

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 }] }) ] } } ] } ] } };

Debug

Known issues

breakingMigrating 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.

affects: >=3.0.0 <4.0.0

deprecatedimg-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.

affects: >=4.0.0

gotchaimagemin 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.

affects: >=3.0.0

gotchaEmpty 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.

affects: >=3.0.0

gotchaPlugins 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 })

affects: >=3.0.0

Errors

Common errors & fixes

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

imagemin peer dependency not installed.

fix

npm install imagemin --save-dev

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

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')({})]

TypeError: Cannot read property 'resourcePath' of undefined

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.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

imageminrequiredPeer dependency; required for image optimization. Compatible with versions 5-8.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/vanwagonet/img-loader ↗

packagehttps://www.npmjs.com/package/img-loader ↗