webpack-image-resize-loader

5.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause sharp is not installed (required since v4).

fix

npm install --save-dev sharp

error Error: The 'webpack-image-resize-loader' must be placed before 'file-loader' ↓

cause Incorrect order of loaders in webpack config (resize after file-loader).

fix

Place 'file-loader' first in the 'use' array.

error TypeError: Cannot read properties of undefined (reading 'width') ↓

cause No width/height/scale provided or input image not recognized.

fix

Provide at least one of 'width', 'height', or 'scale' in loader options or query string.

Warnings

breaking v4.0.0: sharp is no longer a dependency; you must install it separately. ↓

fix Run 'npm install --save-dev sharp' after updating to v4.

breaking v5.0.0: Drop support for Node <10.13.0. ↓

fix Update Node to >=10.13.0.

gotcha Output format defaults to JPEG for JPEG input, PNG for PNG, etc. Use 'format' option to convert. ↓

fix Add format: 'webp' or format: 'png' in options or query.

gotcha The loader expects the previous loader to output a Buffer. If using webpack 5's asset modules, use type: 'javascript/auto' for the rule. ↓

fix Set type: 'javascript/auto' in the rule definition.

deprecated Option 'scale' is deprecated in v4. Use width/height instead. ↓

fix Use 'width' or 'height' instead of 'scale'.

Install

npm install webpack-image-resize-loader

yarn add webpack-image-resize-loader

pnpm add webpack-image-resize-loader

Imports

webpack-image-resize-loader
wrong
```
No import mistake; loader is configured in webpack config
```
correct
```
import image from './image.png?width=500';
```
Loader is used via webpack rules, not direct import. The import syntax shown works with webpack's loader-utils to pass query parameters.

loader options

wrong

Place file-loader after resize loader (wrong order)

correct

module.exports = { module: { rules: [ { test: /\.(png|jpe?g)$/i, use: [ 'file-loader', { loader: 'webpack-image-resize-loader', options: { width: 1000 } } ] } ] } };

Must place file-loader (or url-loader) BEFORE resize loader in the use array. The resize loader expects a buffer from the previous loader.

sharp dependency
wrong
```
Assuming sharp is bundled (it is not)
```
correct
```
npm install --save-dev sharp
```
sharp must be installed separately as a peer dependency since v4. v3 included sharp as a dependency.

Quickstart

Demonstrates basic webpack configuration to resize all imported images to max width 1000px, and how to override options per import.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp|tiff?)$/i,
        use: [
          "file-loader",
          {
            loader: "webpack-image-resize-loader",
            options: {
              width: 1000,
            },
          },
        ],
      },
    ],
  },
};

// Then in your code:
import image from "./image.png";
// or with overrides:
import smallImage from "./image.png?width=200";