webpack-image-srcset-loader
v5.0.4
Published
Generate srcset string from image
Downloads
8,792
Maintainers
Readme
webpack-image-srcset-loader
This loader generates a srcset string from an image.
Examples
React example with other related loaders
Vue example with other related loaders
Install
Install with npm:
npm install --save-dev webpack-image-srcset-loader webpack-image-resize-loader
Install with yarn:
yarn add --dev webpack-image-srcset-loader webpack-image-resize-loader
Usage
import 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"
webpack.config.js
webpack-image-srcset-loader
should be placed before all other loaders
Try webpack-sharp-loader
if you want to do other processing with your image before or after resizing
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(png|jpe?g|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"],
},
},
"file-loader",
"webpack-image-resize-loader",
// add webpack-sharp-loader if you want to pre-process your image e.g. rotating, flipping
],
},
{
// if no previous resourceQuery match
use: "file-loader",
},
],
},
],
},
};
Options
Note:
Additional options in the query (that thing after ?
) such as quality
or format
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. |
| resizeLoaderOptionsGenerator
| 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 |
sizes
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"
.
scaleUp
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"
resizeLoaderOptionsGenerator
default
function defaultResizeLoaderOptionsGenerator(width, scale, existingOptions) {
return {
...existingOptions,
...(existingOptions?.fileLoaderOptionsGenerator
? {
fileLoaderOptionsGenerator: existingOptions.fileLoaderOptionsGenerator.toString(),
}
: {}),
// since we filtered out all the width that are too wide,
// nothing to worry about there, need this to make sure
// scales larger than 1x works
scaleUp: true,
width,
scale,
};
}
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"]
, resizeLoaderOptionsGenerator
will be called with
resizeLoaderOptionsGenerator(10, undefined, existingOptions)
for10w
resizeLoaderOptionsGenerator(undefined, 1, existingOptions)
for1x
resizeLoaderOptionsGenerator(undefined, 2, existingOptions)
for2x
resizeLoaderOptionsGenerator(undefined, undefined, existingOptions)
for"original"
esModule
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.