This loader generates a srcset string from an image.
React example with other related loaders
Vue example with other related loaders
Install with npm:
npm install --save-dev webpack-image-srcset-loader webpack-image-resize-loaderInstall with yarn:
yarn add --dev webpack-image-srcset-loader webpack-image-resize-loaderimport jpgSrcSet from "./some_pic.jpg?srcset"; // jpgSrcSet will be "97[...]7.jpg 480w, ed[...]3.jpg 1024w, c6[...]b.jpg 1920w, b6[...]3.jpg 2560w, 57[...]e.jpg"module.exports = { // ... module: { rules: [ // ... { test: /\.(png|jpe?g|svg|gif|webp|tiff?)$/i, oneOf: [ { // if the import url looks like "some.png?srcset..." resourceQuery: /srcset/, use: [ { loader: "webpack-image-srcset-loader", options: { sizes: ["480w", "1024w", "1920w", "2560w", "original"], }, }, "webpack-image-resize-loader", ], }, { // if no previous resourceQuery match use: "file-loader", }, ], }, ], }, };Additional options such as quality here will be passed down to webpack-image-resize-loader. See webpack-image-resize-loader's options.
For example:
import webpSrcSet from "./some_pic.jpg?srcset&format=webp"; // webpSrcSet will be "00[...]5.webp 480w, 40[...]3.webp 1024w, 76[...]b.webp 1920w, a4[...]c.webp 2560w, b1[...]c.webp"| Name | Type | Default | Description |
|---|---|---|---|
sizes | (string)[] | undefined | Sizes in the output srcset. |
scaleUp | boolean | false | Whether or not to scale up the image when the desired width is greater than the image width. |
optionsGenerator | function | undefined | A function that returns the option to be passed on to the next loader. |
esModule | boolean | true | Whether the export is in ES modules syntax or CommonJS modules syntax |
An array containing strings in the format "[number]w", "[number]x", or "original". The numbers cannot contain decimals.
Allowed: ["10w", "1x", "2x", "original"]
Not allowed: ["10.0w", "1.5x", "2.0x"]
When using "[number]x", the original size of the image will be used for the greatest value. For example, if an image is 10×10 in size, and sizes is ["1x", "2x"], the output image will have sizes 5×5 for "1x" and 10×10 for "2x".
When true, if the desired width is greater than the image width, the size will not be included in the output srcset string. For example, if the original image is 10×10 in size, and the sizes array is ["5w", "10w", "15w"], when scaleUp is true the output string is "image1.jpg 5w, image2.jpg 10w, image3.jpg 15w", when scaleUp is false the output string is "image1.jpg 5w, image2.jpg 10w".
Note: this option has no effect on "[number]x" or "original"
If you wish to use a resize loader other than webpack-image-resize-loader. You may customize how the width and scale is passed down to that loader`s options.
// width is either a number or undefined // scale is either a number or undefined // existingOptions is either the existing options for the next loader or undefined (width, scale, existingOptions: object) => { ... return { ...existingOptions }; } For example, if sizes is ["10w", "1x", "2x", "original"], optionsGenerator will be called with
optionsGenerator(10, undefined, existingOptions)for10woptionsGenerator(undefined, 1, existingOptions)for1xoptionsGenerator(undefined, 2, existingOptions)for2xoptionsGenerator(undefined, undefined, existingOptions)for"original"
Whether the export is in ES modules syntax or CommonJS modules syntax. If you don't know what it is or whether or not you need it, leave is as default.