{"id":20518,"library":"responsive-loader","title":"responsive-loader","description":"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.","status":"active","version":"3.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/dazuaz/responsive-loader","tags":["javascript","webpack","responsive","loader","srcset"],"install":[{"cmd":"npm install responsive-loader","lang":"bash","label":"npm"},{"cmd":"yarn add responsive-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add responsive-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; loader requires webpack 5","package":"webpack","optional":false},{"reason":"default image processing adapter; required unless using jimp","package":"sharp","optional":true},{"reason":"alternative image processing adapter; required only if not using sharp","package":"jimp","optional":true}],"imports":[{"note":"Query parameters are used inline to specify sizes and options. Without query, loader may not apply transforms.","wrong":"import img from 'path/to/image.jpg' (no query params)","symbol":"default","correct":"import img from 'path/to/image.jpg?sizes[]=300,sizes[]=600'"},{"note":"TypeScript type, not exported from package; must be declared in a .d.ts file as shown in README.","wrong":"Imported as a value","symbol":"ResponsiveImageOutput","correct":"interface ResponsiveImageOutput { src: string; srcSet: string; ... }"},{"note":"Loader handles images via webpack rule, not requiring the loader package directly. require() works as webpack processes the resource query.","wrong":"const img = require('responsive-loader').default","symbol":"require","correct":"const img = require('path/to/image.jpg?sizes[]=300')"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g)$/,\n        use: {\n          loader: 'responsive-loader',\n          options: {\n            sizes: [300, 600, 1024, 2048],\n            placeholder: true,\n            placeholderSize: 50,\n            adapter: require('responsive-loader/sharp'),\n            format: 'jpeg',\n            quality: 80,\n          },\n        },\n        type: 'javascript/auto',\n      },\n    ],\n  },\n};\n\n// In your component (React example)\nimport imgSrc from 'my-image.jpg?sizes[]=300,sizes[]=600,sizes[]=1024&format=webp';\nconst img = <img src={imgSrc.src} srcSet={imgSrc.srcSet} sizes=\"(max-width: 600px) 100vw, 50vw\" />;","lang":"javascript","description":"Configures responsive-loader with sharp adapter to generate resized images (300,600,1024,2048) and placeholder, then imports an image with inline query parameters."},"warnings":[{"fix":"Upgrade to webpack 5 and responsive-loader >=3.0.0","message":"v3.0.0 dropped support for webpack 4","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"If using CommonJS, update require path; e.g., require('responsive-loader/sharp') still works but internal structure changed.","message":"v3.0.0 migrated to TypeScript, module format changed","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If relying on jimp, explicitly set adapter: require('responsive-loader/jimp') in options.","message":"The default adapter changed from jimp to sharp in v3.0.2","severity":"deprecated","affected_versions":">=3.0.2"},{"fix":"Add type: 'javascript/auto' in the loader rule (see webpack config).","message":"Loader expects type: 'javascript/auto' to avoid asset module doubling","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always include at least sizes[] parameter in the import path, e.g., 'image.jpg?sizes[]=600'.","message":"Without inline query parameters, images are not processed","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":"Add rule for /.(png|jpe?g)$/ with responsive-loader and set type: 'javascript/auto'.","cause":"Missing or misconfigured loader rule in webpack config","error":"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."},{"fix":"Run 'npm install sharp' or switch to jimp adapter by setting adapter: require('responsive-loader/jimp').","cause":"Sharp is not installed (default adapter since v3.0.2)","error":"Error: Cannot find module 'sharp'"},{"fix":"Use --ignore-engines flag or switch to jimp: adapter: require('responsive-loader/jimp').","cause":"Sharp may fail to install due to platform requirements","error":"yarn add sharp --ignore-engines"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}