Registry / data / webpack-image-resize-loader

webpack-image-resize-loader

library5.0.0jsnpmunverified

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.

data web-framework

npm install webpack-image-resize-loader

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-IMAGE-RESI

webpack-image-resize-loader

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

webpack-image-resize-loader

✓ import image from './image.png?width=500';

✗ No import mistake; loader is configured in webpack config

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

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

✗ Place file-loader after resize loader (wrong order)

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

✓ npm install --save-dev sharp

✗ Assuming sharp is bundled (it is not)

sharp must be installed separately as a peer dependency since v4. v3 included sharp as a dependency.

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";

Debug

Known issues

breakingv4.0.0: sharp is no longer a dependency; you must install it separately.

fix

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

affects: >=4.0.0

breakingv5.0.0: Drop support for Node <10.13.0.

fix

Update Node to >=10.13.0.

affects: >=5.0.0

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

affects: all

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

affects: >=5.0.0

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

fix

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

affects: >=4.0.0

Errors

Common errors & fixes

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

sharp is not installed (required since v4).

fix

npm install --save-dev sharp

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

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

fix

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

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

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.

Upgrade

Version history

5.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Calvin-LL/webpack-image-resize-loader ↗

packagehttps://www.npmjs.com/package/webpack-image-resize-loader ↗