{"id":20128,"library":"img-loader","title":"img-loader","description":"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.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/vanwagonet/img-loader","tags":["javascript","image","imagemin","image-loader","optimize","minify","webpack","webpack-loader"],"install":[{"cmd":"npm install img-loader","lang":"bash","label":"npm"},{"cmd":"yarn add img-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add img-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required for image optimization. Compatible with versions 5-8.","package":"imagemin","optional":false}],"imports":[{"note":"img-loader is a webpack loader; it's used as a string in the `use` array of a module rule, not typically imported directly.","wrong":"Using `require('img-loader')` in webpack config without proper rule structure","symbol":"img-loader (rule use entry)","correct":"module.exports = { module: { rules: [ { test: /\\.(jpe?g|png|gif|svg)$/i, use: ['url-loader?limit=10000', 'img-loader'] } ] } }"},{"note":"Plugins must be required and instantiated with options, not just named strings.","wrong":"options: { plugins: ['imagemin-mozjpeg'] }","symbol":"plugins option (array)","correct":"options: { plugins: [require('imagemin-mozjpeg')({ progressive: true })] }"},{"note":"When using a function, it receives the loader context and must return an array of plugin instances.","wrong":"options: { plugins: function(context) { return require('imagemin-svgo') } }","symbol":"plugins option (function)","correct":"options: { plugins(context) { return [require('imagemin-svgo')({})] } }"},{"note":"Options are not passed via query string; they must be defined in a loader options object.","wrong":"'img-loader?plugins=...'","symbol":"inline loader notation","correct":"'img-loader'"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|gif|svg)$/i,\n        use: [\n          'url-loader?limit=10000',\n          {\n            loader: 'img-loader',\n            options: {\n              plugins: [\n                require('imagemin-mozjpeg')({ progressive: true, arithmetic: false }),\n                require('imagemin-pngquant')({ floyd: 0.5, speed: 2 }),\n                require('imagemin-svgo')({ plugins: [{ removeTitle: true }] })\n              ]\n            }\n          }\n        ]\n      }\n    ]\n  }\n};","lang":"javascript","description":"Shows a minimal webpack 4 configuration using img-loader with url-loader and three imagemin plugins (mozjpeg, pngquant, svgo) for image optimization."},"warnings":[{"fix":"Install desired imagemin plugins (e.g., imagemin-gifsicle, imagemin-mozjpeg, imagemin-optipng, imagemin-svgo) and configure them in the 'plugins' option.","message":"Migrating from 2.x to 4.0.0: No default plugins included; must specify all imagemin plugins manually.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Use image-webpack-loader or other webpack 5-compatible image optimizers for webpack 5 projects.","message":"img-loader v4 only supports webpack 4. Not compatible with webpack 5+.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Run `npm install imagemin --save-dev` alongside img-loader.","message":"imagemin peer dependency is required: must have imagemin ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 installed separately.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Define at least one imagemin plugin in the 'plugins' option for actual compression.","message":"Empty plugins array means no optimization. By default, the loader passes images through unmodified.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Call the plugin function with an options object: require('imagemin-mozjpeg')({ progressive: true })","message":"Plugins must be instantiated with options, even if empty object. E.g., require('imagemin-mozjpeg')({}) not just require('imagemin-mozjpeg').","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install imagemin --save-dev","cause":"imagemin peer dependency not installed.","error":"Module not found: Error: Can't resolve 'imagemin'"},{"fix":"Ensure 'plugins' is an array of instantiated imagemin plugins, like [require('imagemin-mozjpeg')({})]","cause":"Usually 'plugins' option is not an array or function, or contains invalid entries.","error":"Invalid options object. img-loader has been initialized using an options object that does not match the API schema."},{"fix":"Ensure the function returns an array and uses the provided context parameter correctly.","cause":"Using a function for 'plugins' but it doesn't return an array or improper context usage.","error":"TypeError: Cannot read property 'resourcePath' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}