webpack-image-resize-loader
webpack-image-resize-loader copied to clipboard
Webpack loader to resize imported images
webpack-image-resize-loader
This loader resize the given images to the desired size.
Supports JPEG, PNG, WebP, AVIF, and, TIFF images.
Examples
React example with other related loaders
Vue example with other related loaders
Install
Install with npm:
npm install --save-dev webpack-image-resize-loader
Install with yarn:
yarn add --dev webpack-image-resize-loader
Usage
Note: if you only want to shrink some but not all images use webpack's oneOf
(like in the examples). If you want to use srcset
, check out webpack-image-srcset-loader
You must place file-loader
or url-loader
or some other loader capable of handing buffers before webpack-image-resize-loader
Use webpack-sharp-loader
if you want to do other processing to your image before resizing
webpack.config.js
module.exports = {
// ...
module: {
rules: [
// ...
{
// convert all imported images to have max width 1000px
test: /\.(png|jpe?g|webp|tiff?)$/i,
use: [
"file-loader",
{
loader: "webpack-image-resize-loader",
options: {
width: 1000,
},
},
],
},
],
},
};
You can override options with queries
import image from "./some_pic.png?format=webp";
or
// or any other options
import image from "./some_pic.png?width=100&height=100&quality=100&background=green&fit=contain&position=left";
or
// or any other options
import image from './some_pic.png?{"width":500}';
Options
Name | Type | Default | Description |
---|---|---|---|
width |
number |
undefined |
The width of the output image. |
height |
number |
undefined |
The height of the output image. |
scale |
number |
undefined |
The fraction of the original size of the output image. width and height take precedence. |
scaleUp |
boolean |
false |
Whether or not to scale up the image when the desired size is larger than the image size. |
fit |
"cover" , "contain" , "fill" , "inside" , or "outside" |
"cover" |
How the image should be resized to fit both provided dimensions. |
position |
See position |
"centre" |
Where the image is positioned. |
background |
string|object |
{r:0,g:0,b:0,alpha:1} |
The background color of the image. |
format |
"jpeg" , "png" , "webp" , "avif" , or "tiff" |
undefined |
The format of the output file. |
quality |
number |
80 for JPEG, WebP, and TIFF. 100 for PNG. |
The quality of the output image. |
sharpOptions |
object |
see below | Additional options for sharp. |
fileLoader |
string |
"file-loader" |
Name or path of a loader that takes in buffers. (why?) |
fileLoaderOptionsGenerator |
function |
see below | A function that generates options for the specified fileLoader . |
width
Pixels width the resultant image should be. Use null
or undefined
to auto-scale the width to match the height.
This is passed as width
to the options
of the parameters of sharp's resize
function
height
Pixels height the resultant image should be. Use null or undefined to auto-scale the height to match the width.
This is passed as height
in the options
of the parameters of sharp's resize
function
scale
A number greater than 0
, 1
being the original size, 0.5
being half the size of the original image, 2
being twice the size of the original image.
If both this and width
or height
are set, width
or height
takes precedence.
scaleUp
When true, images will be scaled up to a larger size. When false, if the desired size, either the height
is greater than the height of the original image, the width
is greater than the width of the original image, or scale
is greater than 1, the size of the output image will be the same as the imported image.
fit
This is passed as fit
in the options
of the parameters of sharp's resize
function
position
type: "top"
, "right top"
, "right"
, "right bottom"
, "bottom"
, "left bottom"
, "left"
, "left top"
, "north"
, "northeast"
, "east"
, "southeast"
, "south"
, "southwest"
, "west"
, "northwest"
, "center"
, "centre"
, "entropy"
, or "attention"
position, gravity or strategy to use when fit
is cover
or contain
.
-
sharp.position
:top
,right top
,right
,right bottom
,bottom
,left bottom
,left
,left top
. -
sharp.gravity
:north
,northeast
,east
,southeast
,south
,southwest
,west
,northwest
,center
orcentre
. -
sharp.strategy
:cover
only, dynamically crop using either theentropy
orattention
strategy.
This is passed as position
in the options
of the parameters of sharp's resize
function
background
example: "#7743CE"
, "rgb(255, 255, 255)"
, {r:0,g:0,b:0,alpha:1}
background colour when using a fit
of contain
, parsed by the color module, defaults to black without transparency.
This is passed as background
in the options
of the parameters of sharp's resize
function
format
When unspecified, outputs the same format as the imported file.
quality
default
Defaults to shape's default is for that given format
output format | default quality |
---|---|
png | 100 |
jpeg | 80 |
webp | 80 |
avif | 50 |
tiff | 80 |
From 1-100, 1 being most compression and worst quality, 100 being least compression and best quality.
This is passed as quality
in the options
of the parameters of sharp's png
, jpeg
, webp
, avif
, and tiff
output functions
sharpOptions
default
The default options aim to provide the smallest images even if it takes more time to generate the image.
{
png: { compressionLevel: 9, adaptiveFiltering: true },
jpeg: { mozjpeg: true },
webp: { reductionEffort: 6 },
avif: { speed: 0 }
}
sharpOptions
can have any of the following keys: resize
, png
, jpeg
, webp
, avif
, and tiff
. These options will override options specified above.
as in
{
resize: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-resize#parameters
png: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#png
jpeg: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#jpeg
webp: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#webp
avif: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#avif
tiff: {}, // these are passed as the options object in https://sharp.pixelplumbing.com/api-output#tiff
}
Setting an item in this object overrides all the defaults for that item.
For example:
// ...
sharpOptions: {
png: { quality: 80 }
}
// ...
sharpOptions
will become this after being merged with defaults:
{
png: { quality: 80 }
jpeg: { mozjpeg: true },
webp: { reductionEffort: 6 },
avif: { speed: 0 }
}
fileLoader
Name or path of a loader that takes in buffers.
This is needed because the output file format is sometimes different from the input file format.
By default this loader tries to find file-loader
and change the "[ext]"
in their options.name
.
fileLoaderOptions
default
options
is the options passed to this loader, existingOptions
is the options passed to the loader specified in fileLoader
function defaultFileLoaderOptionsGenerator(options, existingOptions) {
let name = existingOptions?.name;
if (name === undefined) {
name = `[contenthash].${options.format}`;
} else if (typeof name === "string") {
name = name.replace("[ext]", options.format);
} else if (typeof name === "function") {
name = (file: string) => {
const nameFn = existingOptions.name;
return nameFn(file).replace("[ext]", format);
};
}
return {
...existingOptions,
name,
};
}
This function is used to generate the options for the loader specified by fileLoader