Movatterモバイル変換

[0]ホーム
URL:

webpack logo
ag grid
ag charts

ImageMinimizerWebpackPlugin

Disclaimer: ImageMinimizerWebpackPlugin is a third-party package maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack.

A Plugin and Loader forwebpack to optimize (compress) all images usingimagemin.Do not worry about size of images, now they are always optimized/compressed.

npmnodetestscoverdiscussionsize

Getting Started

This plugin can use four different tools to optimize or generate images:

  • imagemin - Optimize your images by default, since it is stable and works with all types of images
  • DEPRECATEDsquoosh - while working in experimental mode with.jpg,.jpeg,.png,.webp,.avif file types.
  • sharp - High performance Node.js image processing, the fastest module to resize and compress JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
  • svgo - tool for optimizing SVG vector graphics files. Supports only SVG files minification.

[!WARNING]

By default, we don’t install any additional packages.

Install an Optimization/Generation Tool

To begin, you'll need to installimage-minimizer-webpack-plugin along with an image optimizer or generator:

npm install image-minimizer-webpack-plugin imagemin --save-dev

[!WARNING]

imagemin uses plugins to optimize or generate images, so you’ll need to install those as well.

npm install image-minimizer-webpack-plugin @squoosh/lib --save-dev
npm install image-minimizer-webpack-plugin sharp --save-dev
npm install image-minimizer-webpack-plugin svgo --save-dev

Images can be optimized in two modes:

  1. Lossless (without loss of quality).
  2. Lossy (with some loss of quality).

Optimize withimagemin

[!NOTE]

Explore the available options to find the best results for your use case.

Recommendedimagemin plugins for lossless optimization

npminstall imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

Recommendedimagemin plugins for lossy optimization

npminstall imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

Forimagemin-svgo v9.0.0+, you need to use the officialSVGO configuration

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.(jpe?g|png|gif|svg)$/i,        type:"asset",},],},  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{// Lossless optimization with custom option// Feel free to experiment with options for better results!            plugins:[["gifsicle",{ interlaced:true}],["jpegtran",{ progressive:true}],["optipng",{ optimizationLevel:5}],// SVGO configuration here https://github.com/svg/svgo#configuration["svgo",{                  plugins:[{                      name:"preset-default",                      params:{                        overrides:{                          removeViewBox:false,                          addAttributesToSVGElement:{                            params:{                              attributes:[{ xmlns:"http://www.w3.org/2000/svg"},],},},},},},],},],],},},}),],},};

DEPRECATED Optimize withsquoosh

npm install @squoosh/lib --save-dev

Recommended@squoosh/lib options for lossy optimization

For lossy optimization, we recommend using the default settings of@squoosh/lib package.The default values and supported file types for each option can be found in thecodecs.ts file undercodecs directory.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[// You need this, if you are using `import file from "file.ext"`; not needed for `new URL(...)` syntax{        test:/\.(jpe?g|png)$/i,        type:"asset",},],},  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.squooshMinify,          options:{// Your options for `squoosh` here},},}),],},};

Recommendedsquoosh options for lossless optimization

For lossless optimization we recommend using the options listed below inminimizer.options.encodeOptions.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[// You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it{        test:/\.(jpe?g|png)$/i,        type:"asset",},],},  optimization:{    minimizer:[newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.squooshMinify,          options:{            encodeOptions:{              mozjpeg:{// That setting might be close to lossless, but it’s not guaranteed// See https://github.com/GoogleChromeLabs/squoosh/issues/85                quality:100,},              webp:{                lossless:1,},              avif:{// See https://github.com/GoogleChromeLabs/squoosh/blob/dev/codecs/avif/enc/README.md                cqLevel:0,},},},},}),],},};

Optimize withsharp

npm install sharp --save-dev

Recommendedsharp options for lossy optimization

For lossy optimization we recommend using the default settings ofsharp package.The default values and supported file types for each option can be found in thesharp documentation.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[// You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it{        test:/\.(jpe?g|png)$/i,        type:"asset",},],},  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.sharpMinify,          options:{            encodeOptions:{// Customize your `sharp` options here// See https://sharp.pixelplumbing.com/api-output},},},}),],},};

Recommendedsharp options for lossless optimization

For lossless optimization we recommend using the options listed below inminimizer.options.encodeOptions.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[// You need this, if you are using `import file from "file.ext"`. Not needed for `new URL(...)` syntax{        test:/\.(jpe?g|png)$/i,        type:"asset",},],},  optimization:{    minimizer:[newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.sharpMinify,          options:{            encodeOptions:{              jpeg:{// https://sharp.pixelplumbing.com/api-output#jpeg                quality:100,},              webp:{// https://sharp.pixelplumbing.com/api-output#webp                lossless:true,},              avif:{// https://sharp.pixelplumbing.com/api-output#avif                lossless:true,},// PNG by default sets the quality to 100%, which is same as lossless// https://sharp.pixelplumbing.com/api-output#png              png:{},// GIF does not support lossless compression at all// https://sharp.pixelplumbing.com/api-output#gif              gif:{},},},},}),],},};

Optimize withsvgo

npm install svgo --save-dev

Recommendedsvgo options for optimization

For SVG optimization we recommend using the options listed below inminimizer.options.encodeOptions.The default values for plugins can be found in thesvgo plugins source code.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[// You need this, if you are using `import file from "file.ext"`. Not needed for `new URL(...)` syntax{        test:/\.(svg)$/i,        type:"asset",},],},  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.svgoMinify,          options:{            encodeOptions:{// Pass over SVGs multiple times to ensure all optimizations are applied (False by default)              multipass:true,              plugins:[// Built-in plugin preset enabled by default// See: https://github.com/svg/svgo#default-preset"preset-default",],},},},}),],},};

Advanced setup

  • If you want to useloader orplugin standalone see sections below, but this isnot recommended.

  • By default, plugin configuresloader (please use theloader option if you want to disable this behaviour), therefore you should not setup standalone loader when you use a plugin setup.

  • Loader optimizes or generates images using options, so inlined images viadata URI (i.e.data:) will be optimized or generated too, non-inlined images will be optimized too.

Query Parameters (onlysquoosh andsharp currently)

The plugin supports the following query parameters:

  • width/w - allows you to set the image width

  • height/h - allows you to set the image height

  • as - to specify thepreset option

    Only supported forsharp currently:

  • unit/u - can bepx orpercent and allows you to resize by a percentage of the image's size.

Examples:

const myImage1=newURL("image.png?width=150&height=120",import.meta.url);const myImage2=newURL("image.png?w=150&h=120",import.meta.url);// You can omit one of the parameters to auto-scaleconst myImage3=newURL("image.png?w=150",import.meta.url);// It works with the `preset` query parameterconst myImage4=newURL("image.png?as=webp&w=150&h=120",import.meta.url);// You can use `auto` to reset `width` or `height` from the `preset` optionconst myImage5=newURL("image.png?as=webp&w=150&h=auto",import.meta.url);// You can use `unit` to get the non-retina resize of images that are retina sizedconst myImage6=newURL("image.png?width=50&unit=percent",import.meta.url);
.class{background:url("./image.png?width=150&height=120");}
<picture><sourcesrcset="photo.jpg?as=avif&width=150&height=120"type="image/avif"/><sourcesrcset="photo.jpg?as=webp&width=150&height=120"type="image/webp"/><imgsrc="photo.jpg?width=150&height=120"alt="photo"/></picture>

[!NOTE]

You need to setupavif andwebp presets, See theexample for webp.

Standalone Loader

Documentation: Using loaders.

In yourwebpack.config.js, add theImageMinimizerPlugin.loader and specify theasset modules options (if you use images inimport):

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[// You need this, if you are using `import file from "file.ext"`. Not needed for `new URL(...)` syntax{        test:/\.(jpe?g|png|gif|svg)$/i,        type:"asset",},// We recommend using only for the "production" mode{        test:/\.(jpe?g|png|gif|svg)$/i,        enforce:"pre",        use:[{            loader: ImageMinimizerPlugin.loader,            options:{              minimizer:{                implementation: ImageMinimizerPlugin.imageminMinify,                options:{                  plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},},},],},],},};

Standalone Plugin

Documentation: Using plugins.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[// You need this, if you are using `import file from "file.ext"`. Not needed for `new URL(...)` syntax{        test:/\.(jpe?g|png|gif|svg)$/i,        type:"asset",},],},  optimization:{    minimizer:[// Extend default minimizer, i.e. `terser-webpack-plugin` for JS"...",// We recommend using only for the "production" modenewImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},        loader:false,// Disable the `loader`}),],},};

Plugin Options

test

Type:

typetest=string| RegExp|(string| RegExp)[];

Default:/\.(jpe?g\|png\|gif\|tif\|webp\|svg\|avif)\$/i

Test to match files against.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        test:/\.(jpe?g|png|gif|svg)$/i,}),],},};

include

Type:

typeinclude=string| RegExp|(string| RegExp)[];

Default:undefined

Files to include.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        include:/\/includes/,}),],},};

exclude

Type:

typeexclude=string| RegExp|(string| RegExp)[];

Default:undefined

Files to exclude.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        exclude:/\/excludes/,}),],},};

minimizer

Type:

typeminimizer=|{      implementation:(        original:{          filename:string;          data: Buffer;          warnings: Error[];          errors: Error[];          info:import("webpack").AssetInfo;},        options?: Record<string,any>|undefined,)=>Promise<{        filename:string;        data: Buffer;        warnings: Error[];        errors: Error[];        info:import("webpack").AssetInfo;}>&{        setup?:(()=>void)|undefined;        teardown?:(()=>void)|undefined;};      options?: Record<string,any>|undefined;      filter?:(source: Buffer, sourcePath:string)=>boolean|undefined;      filename?:|string|((            pathData:{              filename?:string|undefined;},            assetInfo?:import("webpack").AssetInfo|undefined,)=>string)|undefined;}|{      implementation:(        original:{          filename:string;          data: Buffer;          warnings: Error[];          errors: Error[];          info:import("webpack").AssetInfo;},        options?: Record<string,any>|undefined,)=>Promise<{        filename:string;        data: Buffer;        warnings: Error[];        errors: Error[];        info:import("webpack").AssetInfo;}>&{        setup?:(()=>void)|undefined;        teardown?:(()=>void)|undefined;};      options?: Record<string,any>|undefined;      filter?:(source: Buffer, sourcePath:string)=>boolean|undefined;      filename?:|string|((            pathData:{              filename?:string|undefined;},            assetInfo?:import("webpack").AssetInfo|undefined,)=>string)|undefined;}[];

Default:undefined

Allows to setup default minify function.

Available minimizers

  • ImageMinimizerPlugin.imageminMinify
  • DEPRECATEDImageMinimizerPlugin.squooshMinify
  • ImageMinimizerPlugin.sharpMinify
  • ImageMinimizerPlugin.svgoMinify

Single minimizer example forimagemin

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{// Implementation          implementation: ImageMinimizerPlugin.imageminMinify,// Options          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},}),],},};

More information and exampleshere.

DEPRECATED Single minimizer example forsquoosh

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{// Implementation          implementation: ImageMinimizerPlugin.squooshMinify,// Options          options:{            encodeOptions:{              mozjpeg:{                quality:90,},},},},}),],},};

More information and exampleshere.

Single minimizer example forsharp

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{// Implementation          implementation: ImageMinimizerPlugin.sharpMinify,// Options          options:{            encodeOptions:{              jpeg:{                quality:90,},},},},}),],},};

More information and exampleshere.

Single minimizer example for user defined implementation

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{implementation:async(original, options)=>{const inputExt= path.extname(original.filename).toLowerCase();if(inputExt!==".xxx"){// Return `null` if the implementation does not support this file typereturnnull;}let result;try{              result=awaitminifyAndReturnBuffer(original.data);}catch(error){// Store error and return `null` if there was an error              original.errors.push(error);returnnull;}return{              filename: original.filename,              data: result,              warnings:[...original.warnings],              errors:[...original.errors],              info:{...original.info,// Please always set it to prevent double minification                minimized:true,// Optional                minimizedBy:["custom-name-of-minimication"],},};},          options:{// Custom options},},}),],},};

Multiple minimizers example

Allows to setup multiple minimizers.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:[{// `sharp` will handle all bitmap formats (JPG, PNG, GIF, ...)            implementation: ImageMinimizerPlugin.sharpMinify,// exclude SVG if implementation support it. Not required for `sharp`.// filter: (source, sourcePath) => !(/\.(svg)$/i.test(sourcePath)),            options:{              encodeOptions:{// Your options for `sharp`// https://sharp.pixelplumbing.com/api-output},},},{// `svgo` will handle vector images (SVG)            implementation: ImageMinimizerPlugin.svgoMinify,            options:{              encodeOptions:{// Pass over SVGs multiple times to ensure all optimizations are applied. False by default                multipass:true,                plugins:[// set of built-in plugins enabled by default// see: https://github.com/svg/svgo#default-preset"preset-default",],},},},],}),],},};

Minimizer options

implementation

Type:

typeimplementation=(  original:{    filename:string;    data: Buffer;    warnings: Error[];    errors: Error[];    info:import("webpack").AssetInfo;},  options?: BasicTransformerOptions<T>,)=>Promise<{  filename:string;  data: Buffer;  warnings: Error[];  errors: Error[];  info:import("webpack").AssetInfo;}>&{  setup?:(()=>void)|undefined;  teardown?:(()=>void)|undefined;};

Default:undefined

Configure the defaultimplementation.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{// Implementation          implementation: ImageMinimizerPlugin.sharpMinify,// Options          options:{            encodeOptions:{              jpeg:{                quality:90,},},},},}),],},};
options

Type:

typeoptions= Record<string,any>;

Default:undefined

Options for theimplementation option (i.e. options forimagemin/squoosh/sharp/custom implementation).

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.sharpMinify,// Options          options:{            encodeOptions:{              jpeg:{                quality:90,},},},},}),],},};
filter

Type:

typefilter=(source: Buffer, sourcePath:string)=>boolean|undefined;

Default:() => true

Allows filtering of images for optimization or generation.

Returntrue to process (optimize or generate) the image, orfalse to skip it.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{filter:(source, sourcePath)=>{// The `source` argument is a `Buffer` of source file// The `sourcePath` argument is an absolute path to sourceif(source.byteLength<8192){returnfalse;}returntrue;},          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},}),],},};
filename

Type:

typefilename=|string|((      pathData:{        filename?:string|undefined;},      assetInfo?:import("webpack").AssetInfo|undefined,)=>string)|undefined;

Default:undefined

Allows to set the filename.Supported values see inwebpack template strings (see theFile-level section for supported patterns).

We also support[width] and[height] placeholders (only when usingsharp andsquoosh).

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          filename:"optimized-[name][ext]",          implementation: ImageMinimizerPlugin.sharpMinify,// Options          options:{            encodeOptions:{              jpeg:{                quality:90,},},},},}),],},};

Examplefunction usage:

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{filename:()=>"optimized-[name][ext]",          implementation: ImageMinimizerPlugin.sharpMinify,// Options          options:{            encodeOptions:{              jpeg:{                quality:90,},},},},}),],},};

generator

Type:

typegenerator={  implementation:(    original:{      filename:string;      data: Buffer;      warnings: Error[];      errors: Error[];      info:import("webpack").AssetInfo;},    options?: Record<string,any>|undefined,)=>Promise<{    filename:string;    data: Buffer;    warnings: Error[];    errors: Error[];    info:import("webpack").AssetInfo;}>&{    setup?:(()=>void)|undefined;    teardown?:(()=>void)|undefined;};  options?: Record<string,any>|undefined;  filter?:(source: Buffer, sourcePath:string)=>boolean|undefined;  filename?:|string|((        pathData:{          filename?:string|undefined;},        assetInfo?:import("webpack").AssetInfo|undefined,)=>string)|undefined;  preset?:string|undefined;type?:"import"|"asset"|undefined;}[];

Default:undefined

Allow to setup default image generators.This is useful when you want to generate additional formats likewebp,avif, etc., from the original images.

[!WARNING]

If no generator was found for the image (i.e. no?as=webp was found in query params), theminimizer option will be used.Therefore, it is recommended to configure generator outputs optimized image.

[!WARNING]

The option will not work if you disable theloader (i.e. set theloader option tofalse).

Available generators

  • ImageMinimizerPlugin.imageminGenerate
  • DEPRECATEDImageMinimizerPlugin.squooshGenerate
  • ImageMinimizerPlugin.sharpGenerate

Generator example forimagemin

Examplewebp generator:

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{// You can apply generator using `?as=webp`// You can use any name and provide more options            preset:"webp",            implementation: ImageMinimizerPlugin.imageminGenerate,            options:{// Please specify only one plugin here, multiple plugins will not work              plugins:["imagemin-webp"],},},],}),],},};

DEPRECATED Generator example forsquoosh

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{// You can apply generator using `?as=webp`, you can use any name and provide more options            preset:"webp",            implementation: ImageMinimizerPlugin.squooshGenerate,            options:{              encodeOptions:{// Please specify only one codec here, multiple codecs will not work                webp:{                  quality:90,},},},},],}),],},};

Generator example forsharp

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{// You can apply generator using `?as=webp`, you can use any name and provide more options            preset:"webp",            implementation: ImageMinimizerPlugin.sharpGenerate,            options:{              encodeOptions:{// Please specify only one codec here, multiple codecs will not work                webp:{                  quality:90,},},},},],}),],},};

Now you can generate the new image using:

// Old approach for getting URLimport webpfrom"./file.jpg?as=webp";// Assets modulesconsole.log(newURL("./file.jpg?as=webp"));
div{background:url("./file.jpg?as=webp");}

You can use?as=webp in any type of files.

Example multiple generators:

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{// You can apply generator using `?as=webp`, you can use any name and provide more options            preset:"webp",            implementation: ImageMinimizerPlugin.sharpGenerate,            options:{              encodeOptions:{                webp:{                  lossless:false,},},},},{// You can apply generator using `?as=avif`, you can use any name and provide more options            preset:"avif",            implementation: ImageMinimizerPlugin.sharpGenerate,            options:{              encodeOptions:{                avif:{                  lossless:false,},},},},],}),],},};

squoosh andsharp generator supports more options, for example you can resize an image:

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{// You can apply generator using `?as=webp-100-50`, you can use any name and provide more options            preset:"webp-100-50",// implementation: ImageMinimizerPlugin.squooshGenerate,            implementation: ImageMinimizerPlugin.sharpGenerate,            options:{              resize:{                enabled:true,                width:100,                height:50,},              encodeOptions:{                webp:{                  quality:90,},},},},],}),],},};

You can find more information in thesquoosh GitHub repository.

For onlysharp currently, you can even generate the non-retina resizes of images:

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{// You can apply generator using `?as=webp-1x`, you can use any name and provide more options            preset:"webp-1x",            implementation: ImageMinimizerPlugin.sharpGenerate,            options:{              resize:{                enabled:true,                width:50,                unit:"percent",},              encodeOptions:{                webp:{                  quality:90,},},},},],}),],},};

Generator example for user defined implementation

You can use your own generator implementation.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{// You can apply generator using `?as=webp`, you can use any name and provide more options            preset:"webp",implementation:async(original, options)=>{const inputExt= path.extname(original.filename).toLowerCase();if(inputExt!==".xxx"){// Store error and return `null` if the implementation does not support this file type                original.errors.push(error);returnnull;}let result;try{                result=awaitminifyAndReturnBuffer(original.data);}catch(error){// Store error and return `null` if there was an error                original.errors.push(error);returnnull;}return{                filename: original.filename,                data: result,                warnings:[...original.warnings],                errors:[...original.errors],                info:{...original.info,// Please always set it to prevent double minification                  generated:true,// Optional                  generatedBy:["custom-name-of-minification"],},};},            options:{// Your options},},],}),],},};

Generator options

type

Type:

typetype="import"|"asset"|undefined;

Default:"import"

Allows you to apply the generator for eitherimport orassets from compilation (useful for copied assets).By default, generators are applying onimport/require, but sometimes you need to generate new images from other plugins (for example -copy-webpack-plugin).If you need this, please setasset value for thetype option.

webpack.config.js

const CopyPlugin=require("copy-webpack-plugin");const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},        generator:[{// Apply generator for copied assets            type:"asset",// You can use `ImageMinimizerPlugin.squooshGenerate`// You can use `ImageMinimizerPlugin.sharpGenerate`            implementation: ImageMinimizerPlugin.imageminGenerate,            options:{              plugins:["imagemin-webp"],},},],}),],},  plugins:[newCopyPlugin({ patterns:["images/**/*.png"]})],};
preset

Type:

typepreset=string|undefined;

Default:undefined

Configures the name of preset, i.e. you can use it in?as=name.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{            preset:"name",// Implementation            implementation: ImageMinimizerPlugin.sharpMinify,            options:{              encodeOptions:{                jpeg:{                  quality:85,},},},},],}),],},};
implementation

Type:

typeimplementation=(  original:{    filename:string;    data: Buffer;    warnings: Error[];    errors: Error[];    info:import("webpack").AssetInfo;},  options?: Record<string,any>|undefined,)=>Promise<{  filename:string;  data: Buffer;  warnings: Error[];  errors: Error[];  info:import("webpack").AssetInfo;}>&{  setup?:(()=>void)|undefined;  teardown?:(()=>void)|undefined;};

Default:undefined

Configures the defaultimplementation.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{            preset:"name",// Implementation            implementation: ImageMinimizerPlugin.sharpMinify,            options:{              encodeOptions:{                jpeg:{                  quality:85,},},},},],}),],},};
options

Type:

typeoptions= Record<string,any>;

Default:undefined

Options for theimplementation (i.e. options forimagemin/squoosh/sharp/custom implementation).

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{            preset:"name",            implementation: ImageMinimizerPlugin.sharpMinify,// Options            options:{              encodeOptions:{                jpeg:{                  quality:90,},},},},],}),],},};
filter

Type:

typefilter=(source: Buffer, sourcePath:string)=>boolean;

Default:() => true

Allows filtering of images for optimization/generation.

Returntrue to optimize the image, orfalse to skip it.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{            preset:"name",filter:(source, sourcePath)=>{// The `source` argument is a `Buffer` of the source file// The `sourcePath` argument is an absolute path to the sourceif(source.byteLength<8192){returnfalse;}returntrue;},            implementation: ImageMinimizerPlugin.imageminMinify,            options:{              plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},],}),],},};
filename

Type:

typefilename=|string|((      pathData: PathData,      assetInfo?:import("webpack").AssetInfo|undefined,)=>string);

Default:undefined

Allows to set the filename.Supported values see inwebpack template strings, under theFile-level section.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{            preset:"name",            filename:"generated-[name][ext]",            implementation: ImageMinimizerPlugin.sharpMinify,// Options            options:{              encodeOptions:{                jpeg:{                  quality:90,},},},},],}),],},};

Example offunction usage:

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        generator:[{            preset:"name",filename:()=>"generated-[name][ext]",            implementation: ImageMinimizerPlugin.sharpMinify,// Options            options:{              encodeOptions:{                jpeg:{                  quality:90,},},},},],}),],},};

severityError

Type:

typeseverityError=string;

Default:'error'

Allows to choose how errors are displayed during image optimization.

Сan have the following values:

  • 'off' - Suppresses both errors and warnings
  • 'warning' - Emits warnings instead of errors
  • 'error' - Emits errors

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        severityError:"warning",        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},}),],},};

loader

Type:

typeloader=boolean;

Default:true

Automatically adding built-inloader, used to optimize/generate images.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        loader:false,// `generator` will not work in this case        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},}),],},};

concurrency

Type:

typeconcurrency=number;

Default:Math.max(1, os.availableParallelism() - 1)

Maximum number of concurrency optimization processes in one time.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        concurrency:3,        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},}),],},};

deleteOriginalAssets

Type:

typedeleteOriginalAssets=boolean;

Default:true

Allows removing original assets after optimization.

Please use this option if you are set thefilename option for theminimizer option, disableloader: false and want to keep optimized and not optimized assets.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({// Disable loader        loader:false,// Allows to keep original asset and minimized assets with different filenames        deleteOriginalAssets:false,        minimizer:{          filename:"[path][name].webp",          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},}),],},};

Loader Options

minimizer

Type:

typeminimizer=|{      implementation:(        original:{          filename:string;          data: Buffer;          warnings: Error[];          errors: Error[];          info:import("webpack").AssetInfo;},        options?: Record<string,any>|undefined,)=>Promise<{        filename:string;        data: Buffer;        warnings: Error[];        errors: Error[];        info:import("webpack").AssetInfo;}>&{        setup?:(()=>void)|undefined;        teardown?:(()=>void)|undefined;};      options?: Record<string,any>|undefined;      filter?:(source: Buffer, sourcePath:string)=>boolean|undefined;      filename?:|string|((            pathData:{              filename?:string|undefined;},            assetInfo?:import("webpack").AssetInfo|undefined,)=>string)|undefined;}|{      implementation:(        original:{          filename:string;          data: Buffer;          warnings: Error[];          errors: Error[];          info:import("webpack").AssetInfo;},        options?: Record<string,any>|undefined,)=>Promise<{        filename:string;        data: Buffer;        warnings: Error[];        errors: Error[];        info:import("webpack").AssetInfo;}>&{        setup?:(()=>void)|undefined;        teardown?:(()=>void)|undefined;};      options?: Record<string,any>|undefined;      filter?:(source: Buffer, sourcePath:string)=>boolean|undefined;      filename?:|string|((            pathData:{              filename?:string|undefined;},            assetInfo?:import("webpack").AssetInfo|undefined,)=>string)|undefined;}[];

Default:undefined

Allows to setup default minimizer.

You can use either a single minimizer object or an array of them.

Loader minimizer example forimagemin

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.(jpe?g|png|gif|svg)$/i,        type:"asset",},{        test:/\.(jpe?g|png|gif|svg)$/i,        loader: ImageMinimizerPlugin.loader,        enforce:"pre",        options:{          minimizer:{            implementation: ImageMinimizerPlugin.imageminMinify,            options:{              plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},},},],},};

For more information and supported options please readhere.

generator

Type:

typegenerator={  implementation: TransformerFunction<T>;  options?: BasicTransformerOptions<T>;  filter?: FilterFn|undefined;  filename?:string| FilenameFn|undefined;  preset?:string|undefined;type?:"import"|"asset"|undefined;}[];

Default:undefined

Allow to setup default generators.This is useful for creating new image formats (e.g., webp, avif, etc.) from existing images.

Loader generator example forimagemin

The following example demonstrates how to configure a generator that converts images to the webp format using imagemin.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.(jpe?g|png|gif|svg)$/i,        type:"asset",},{        test:/\.(jpe?g|png|gif|svg)$/i,        loader: ImageMinimizerPlugin.loader,        enforce:"pre",        options:{          generator:[{              preset:"webp",              implementation: ImageMinimizerPlugin.imageminGenerate,              options:{                plugins:["imagemin-webp"],},},],},},],},};

This setup will automatically generate .webp versions of the original assets during the build process.For more information and supported options please readhere.

severityError

Type:

typeseverityError=string;

Default:'error'

Allows to choose how errors are displayed during image optimization.

Сan have the following values:

  • 'off' - Suppresses errors and warnings
  • 'warning' - Emits warnings instead errors
  • 'error' - Emits errors

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.(jpe?g|png|gif|svg)$/i,        type:"asset",},{        test:/\.(jpe?g|png|gif|svg)$/i,        use:[{            loader: ImageMinimizerPlugin.loader,            options:{              severityError:"warning",              minimizerOptions:{                plugins:["gifsicle"],},},},],},],},};

Additional API

imageminNormalizeConfig(config)

The function normalizes configuration (converts plugins names and options toFunctions) for using inimagemin package directly.

const{ imageminNormalizeConfig}=require("image-minimizer-webpack-plugin");const imagemin=require("imagemin");/*  console.log(imageminConfig);  =>  {    plugins: [Function, Function],    pluginsMeta: [      { name: "imagemin-jpegtran", version: "x.x.x", options: {} },      { name: "imagemin-pngquant", version: "x.x.x", options: { quality: [0.6, 0.8] }    ]  }*/const imageminConfig=awaitimageminNormalizeConfig({  plugins:["jpegtran",["pngquant",{ quality:[0.6,0.8]}]],});const files=awaitimagemin(["images/*.{jpg,png}"],{  destination:"build/images",  plugins: imageminConfig.plugins,});console.log(files);// => [{data: <Buffer 89 50 4e …>, path: 'build/images/foo.jpg'}, …]

Examples

Optimize images based on size

You can use difference options (likeprogressive/interlaced/etc.) based on image size (example - don't do progressive transformation for small images).

What isprogressive image?Answer here.

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:[newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:[["jpegtran",{ progressive:true}]],},// Only apply this one to files equal to or over 8192 bytesfilter:(source)=>{if(source.byteLength>=8192){returntrue;}returnfalse;},},}),newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:[["jpegtran",{ progressive:false}]],},// Only apply this one to files under 8192filter:(source)=>{if(source.byteLength<8192){returntrue;}returnfalse;},},}),],},};

Optimize and generatewebp images

You can generate modern image formats likewebp alongside optimized originals using thegenerator option.

  • imagemin

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},        generator:[{// You can apply generator using `?as=webp`, you can use any name and provide more options            preset:"webp",            implementation: ImageMinimizerPlugin.imageminGenerate,            options:{              plugins:["imagemin-webp"],},},],}),],},};
  • DEPRECATED squoosh

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.squooshMinify,},        generator:[{// You can apply generator using `?as=webp`, you can use any name and provide more options            preset:"webp",            implementation: ImageMinimizerPlugin.squooshGenerate,            options:{              encodeOptions:{                webp:{                  quality:90,},},},},],}),],},};
  • sharp

webpack.config.js

const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.sharpMinify,},        generator:[{// You can apply generator using `?as=webp`, you can use any name and provide more options            preset:"webp",            implementation: ImageMinimizerPlugin.sharpGenerate,            options:{              encodeOptions:{                webp:{                  quality:90,},},},},],}),],},};

Generatewebp images from copied assets

You can use the generator feature to create modern image formats (likewebp) from static assets copied usingcopy-webpack-plugin.

  • imagemin

webpack.config.js

const CopyPlugin=require("copy-webpack-plugin");const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.imageminMinify,          options:{            plugins:["imagemin-gifsicle","imagemin-mozjpeg","imagemin-pngquant","imagemin-svgo",],},},        generator:[{            type:"asset",            implementation: ImageMinimizerPlugin.imageminGenerate,            options:{              plugins:["imagemin-webp"],},},],}),],},  plugins:[newCopyPlugin({ patterns:["images/**/*.png"]})],};
  • DEPRECATED squoosh

webpack.config.js

const CopyPlugin=require("copy-webpack-plugin");const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.squooshMinify,},        generator:[{            type:"asset",            implementation: ImageMinimizerPlugin.squooshGenerate,            options:{              encodeOptions:{                webp:{                  quality:90,},},},},],}),],},  plugins:[newCopyPlugin({ patterns:["images/**/*.png"]})],};
  • sharp

webpack.config.js

const CopyPlugin=require("copy-webpack-plugin");const ImageMinimizerPlugin=require("image-minimizer-webpack-plugin");module.exports={  optimization:{    minimizer:["...",newImageMinimizerPlugin({        minimizer:{          implementation: ImageMinimizerPlugin.sharpMinify,},        generator:[{            type:"asset",            implementation: ImageMinimizerPlugin.sharpGenerate,            options:{              encodeOptions:{                webp:{                  quality:90,},},},},],}),],},  plugins:[newCopyPlugin({ patterns:["images/**/*.png"]})],};

Contributing

We welcome contributions!If you’re interested in helping improve this plugin, please take a moment to read our contributing guidelines.

CONTRIBUTING

License

MIT

[8]ページ先頭
©2009-2025 Movatter.jp