{"id":20777,"library":"webpack-image-resize-loader","title":"webpack-image-resize-loader","description":"Webpack loader to resize imported images using sharp. Supports JPEG, PNG, WebP, AVIF, and TIFF formats. Current stable version is 5.0.0. Released as needed, with breaking changes in v4 and v5. Key differentiators: lightweight (no sharp dependency included), works with webpack 4/5, supports query string overrides for per-import resizing. Unlike other image loaders, it does not bundle sharp itself, so users must install sharp separately. Comparable to sharp-loader but focused solely on resize operations.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Calvin-LL/webpack-image-resize-loader","tags":["javascript","webpack","loader","responsive","resize","image","sharp"],"install":[{"cmd":"npm install webpack-image-resize-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-image-resize-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-image-resize-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Loader is used via webpack rules, not direct import. The import syntax shown works with webpack's loader-utils to pass query parameters.","wrong":"No import mistake; loader is configured in webpack config","symbol":"webpack-image-resize-loader","correct":"import image from './image.png?width=500';"},{"note":"Must place file-loader (or url-loader) BEFORE resize loader in the use array. The resize loader expects a buffer from the previous loader.","wrong":"Place file-loader after resize loader (wrong order)","symbol":"loader options","correct":"module.exports = { module: { rules: [ { test: /\\.(png|jpe?g)$/i, use: [ 'file-loader', { loader: 'webpack-image-resize-loader', options: { width: 1000 } } ] } ] } };"},{"note":"sharp must be installed separately as a peer dependency since v4. v3 included sharp as a dependency.","wrong":"Assuming sharp is bundled (it is not)","symbol":"sharp dependency","correct":"npm install --save-dev sharp"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|webp|tiff?)$/i,\n        use: [\n          \"file-loader\",\n          {\n            loader: \"webpack-image-resize-loader\",\n            options: {\n              width: 1000,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n\n// Then in your code:\nimport image from \"./image.png\";\n// or with overrides:\nimport smallImage from \"./image.png?width=200\";","lang":"javascript","description":"Demonstrates basic webpack configuration to resize all imported images to max width 1000px, and how to override options per import."},"warnings":[{"fix":"Run 'npm install --save-dev sharp' after updating to v4.","message":"v4.0.0: sharp is no longer a dependency; you must install it separately.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update Node to >=10.13.0.","message":"v5.0.0: Drop support for Node <10.13.0.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Add format: 'webp' or format: 'png' in options or query.","message":"Output format defaults to JPEG for JPEG input, PNG for PNG, etc. Use 'format' option to convert.","severity":"gotcha","affected_versions":"all"},{"fix":"Set type: 'javascript/auto' in the rule definition.","message":"The loader expects the previous loader to output a Buffer. If using webpack 5's asset modules, use type: 'javascript/auto' for the rule.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Use 'width' or 'height' instead of 'scale'.","message":"Option 'scale' is deprecated in v4. Use width/height instead.","severity":"deprecated","affected_versions":">=4.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 --save-dev sharp","cause":"sharp is not installed (required since v4).","error":"Module not found: Error: Can't resolve 'sharp'"},{"fix":"Place 'file-loader' first in the 'use' array.","cause":"Incorrect order of loaders in webpack config (resize after file-loader).","error":"Error: The 'webpack-image-resize-loader' must be placed before 'file-loader'"},{"fix":"Provide at least one of 'width', 'height', or 'scale' in loader options or query string.","cause":"No width/height/scale provided or input image not recognized.","error":"TypeError: Cannot read properties of undefined (reading 'width')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}