loader

@srcset/loader

Webpack and Rspack loader for generating responsive images.

• 🧩 Image imports are processed by default - no query markers required
• 🌳 Tree-shakable image modules: unused exports are dropped from the bundle
• 🌫 Blur-up placeholders inlined as data-urls
• 🖼 Variants encoded with sharp: widths, modern formats and optimization

Install

# pnpm
pnpm add -D @srcset/loader @srcset/runtime
# yarn
yarn add -D @srcset/loader @srcset/runtime
# npm
npm i -D @srcset/loader @srcset/runtime

Usage

// webpack.config.js / rspack.config.js
export default {
  module: {
    rules: [
      {
        test: /\.jpe?g$/i,
        use: {
          loader: '@srcset/loader',
          options: {
            rules: [
              // First format is the fallback: default export and src
              {
                width: [1, 0.5],
                format: ['jpg', 'webp', 'avif']
              }
            ],
            placeholder: true
          }
        }
      }
    ]
  }
}

import url, { src, srcSet, srcMap, placeholder } from './photo.jpg'

// url - url of the selected variant, e.g. '/assets/photo.f37e2d3a.jpg'
// src - selected variant: { id: 'jpg1200', format: 'jpg', type: 'image/jpeg', width: 1200, height: 800, url }
// srcSet - array of all generated variants
// srcMap - id-to-url map, e.g. srcMap.webp600
// placeholder - blur-up data-url, when the `placeholder` option is enabled

const img = `<img src="${url}" srcset="${srcSet.map(({ url, width }) => `${url} ${width}w`).join(', ')}">`

The module is tree-shakable: import only what you use - the rest is dropped from the bundle.

Documentation

For more details, guides and API references, check out the documentation website.