Registry / web-framework / responsive-loader

responsive-loader

library3.1.2jsnpmunverified

A webpack loader that generates responsive images with multiple sizes and formats (including WebP and AVIF) from a single source, outputting a srcset attribute. The current stable version is 3.1.2, requiring webpack 5 and Node >=12.22.1. It offers two adapters: sharp (recommended for performance and format support) and jimp (pure JavaScript, slower but no native deps). Key differentiators include TypeScript support, flexibility with query parameters (sizes, format, quality), and easy integration with modern responsive image patterns. Release cadence is irregular, with major breaking changes in v3.0.0 moving to webpack 5 and TypeScript refactor.

web-framework

npm install responsive-loader

github ↗package ↗

INSTALL

IMPORT

SIG · RESPONSIVE-LOADER

responsive-loader

web-frameworkjavascriptv3.1.2

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.

default

✓ import img from 'path/to/image.jpg?sizes[]=300,sizes[]=600'

✗ import img from 'path/to/image.jpg' (no query params)

Query parameters are used inline to specify sizes and options. Without query, loader may not apply transforms.

ResponsiveImageOutput

✓ interface ResponsiveImageOutput { src: string; srcSet: string; ... }

✗ Imported as a value

TypeScript type, not exported from package; must be declared in a .d.ts file as shown in README.

require

✓ const img = require('path/to/image.jpg?sizes[]=300')

✗ const img = require('responsive-loader').default

Loader handles images via webpack rule, not requiring the loader package directly. require() works as webpack processes the resource query.

Configures responsive-loader with sharp adapter to generate resized images (300,600,1024,2048) and placeholder, then imports an image with inline query parameters.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpe?g)$/, use: { loader: 'responsive-loader', options: { sizes: [300, 600, 1024, 2048], placeholder: true, placeholderSize: 50, adapter: require('responsive-loader/sharp'), format: 'jpeg', quality: 80, }, }, type: 'javascript/auto', }, ], }, }; // In your component (React example) import imgSrc from 'my-image.jpg?sizes[]=300,sizes[]=600,sizes[]=1024&format=webp'; const img = <img src={imgSrc.src} srcSet={imgSrc.srcSet} sizes="(max-width: 600px) 100vw, 50vw" />;

Debug

Known issues

breakingv3.0.0 dropped support for webpack 4

fix

Upgrade to webpack 5 and responsive-loader >=3.0.0

affects: <3.0.0

breakingv3.0.0 migrated to TypeScript, module format changed

fix

If using CommonJS, update require path; e.g., require('responsive-loader/sharp') still works but internal structure changed.

affects: >=3.0.0

deprecatedThe default adapter changed from jimp to sharp in v3.0.2

fix

If relying on jimp, explicitly set adapter: require('responsive-loader/jimp') in options.

affects: >=3.0.2

gotchaLoader expects type: 'javascript/auto' to avoid asset module doubling

fix

Add type: 'javascript/auto' in the loader rule (see webpack config).

affects: >=3.0.0

gotchaWithout inline query parameters, images are not processed

fix

Always include at least sizes[] parameter in the import path, e.g., 'image.jpg?sizes[]=600'.

affects: >=3.0.0

Errors

Common errors & fixes

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Missing or misconfigured loader rule in webpack config

fix

Add rule for /.(png|jpe?g)$/ with responsive-loader and set type: 'javascript/auto'.

Error: Cannot find module 'sharp'

Sharp is not installed (default adapter since v3.0.2)

fix

Run 'npm install sharp' or switch to jimp adapter by setting adapter: require('responsive-loader/jimp').

yarn add sharp --ignore-engines

Sharp may fail to install due to platform requirements

fix

Use --ignore-engines flag or switch to jimp: adapter: require('responsive-loader/jimp').

Upgrade

Version history

3.1.2latest on npm

Audit

Dependencies

webpackrequiredpeer dependency; loader requires webpack 5

sharpoptionaldefault image processing adapter; required unless using jimp

jimpoptionalalternative image processing adapter; required only if not using sharp

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/dazuaz/responsive-loader ↗

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