{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install responsive-loader"],"cli":null},"imports":["import img from 'path/to/image.jpg?sizes[]=300,sizes[]=600'","interface ResponsiveImageOutput { src: string; srcSet: string; ... }","const img = require('path/to/image.jpg?sizes[]=300')"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}