image-minimizer-webpack-plugin

• Getting Started
  • Install optimize/generate tool
  • Optimize with imagemin
  • [DEPRECATED] Optimize with squoosh
  • Optimize with sharp
  • Optimize with svgo
  • Advanced setup
    • Query Parameters (only squoosh and sharp currently)
    • Standalone Loader
    • Standalone Plugin
• Plugin Options
  • test
  • include
  • exclude
  • minimizer
    • Available minimizers
    • Single minimizer example for imagemin
    • [DEPRECATED] Single minimizer example for squoosh
    • Single minimizer example for sharp
    • Single minimizer example for user defined implementation
    • Multiple minimizers example
    • Minimizer options
      • implementation
      • options
      • filter
      • filename
  • generator
    • Available generators
    • Generator example for imagemin
    • [DEPRECATED] Generator example for squoosh
    • Generator example for sharp
    • Generator example for user defined implementation
    • Generator options
      • type
      • preset
      • implementation
      • options
      • filter
      • filename
  • severityError
  • loader
  • concurrency
  • deleteOriginalAssets
• Loader Options
  • minimizer
    • Loader minimizer example for imagemin
  • generator
    • Loader generator example for imagemin
  • severityError
• Additional API
  • imageminNormalizeConfig(config)
• Examples
  • Optimize images based on size
  • Optimize and generate webp images
  • Generate webp images from copied assets
• Contributing
• License

Getting Started

This plugin can use 4 tools to optimize/generate images:

• imagemin - optimize your images by default, since it is stable and works with all types of images
• DEPRECATED squoosh - 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 anything

Install optimize/generate tool

To begin, you'll need to install image-minimizer-webpack-plugin and image minimizer/generator:

• imagemin:

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

[!WARNING]

imagemin uses plugin to optimize/generate images, so you need to install them too

• DEPRECATED squoosh:

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

• sharp:

1npm install image-minimizer-webpack-plugin sharp --save-dev

• svgo:

1npm install image-minimizer-webpack-plugin svgo --save-dev

Images can be optimized in two modes:

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

Optimize with imagemin

[!NOTE]

• imagemin-mozjpeg can be configured in lossless and lossy mode.
• imagemin-svgo can be configured in lossless and lossy mode.

Explore the options to get the best result for you.

Recommended imagemin plugins for lossless optimization

1npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

Recommended imagemin plugins for lossy optimization

1npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

For imagemin-svgo v9.0.0+ need use svgo configuration

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.(jpe?g|png|gif|svg)$/i,
8        type: "asset",
9      },
10    ],
11  },
12  optimization: {
13    minimizer: [
14      "...",
15      new ImageMinimizerPlugin({
16        minimizer: {
17          implementation: ImageMinimizerPlugin.imageminMinify,
18          options: {
19            // Lossless optimization with custom option
20            // Feel free to experiment with options for better result for you
21            plugins: [
22              ["gifsicle", { interlaced: true }],
23              ["jpegtran", { progressive: true }],
24              ["optipng", { optimizationLevel: 5 }],
25              // Svgo configuration here https://github.com/svg/svgo#configuration
26              [
27                "svgo",
28                {
29                  plugins: [
30                    {
31                      name: "preset-default",
32                      params: {
33                        overrides: {
34                          removeViewBox: false,
35                          addAttributesToSVGElement: {
36                            params: {
37                              attributes: [
38                                { xmlns: "http://www.w3.org/2000/svg" },
39                              ],
40                            },
41                          },
42                        },
43                      },
44                    },
45                  ],
46                },
47              ],
48            ],
49          },
50        },
51      }),
52    ],
53  },
54};

DEPRECATED Optimize with squoosh

1npm 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 the codecs.ts file under codecs.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
7      {
8        test: /\.(jpe?g|png)$/i,
9        type: "asset",
10      },
11    ],
12  },
13  optimization: {
14    minimizer: [
15      "...",
16      new ImageMinimizerPlugin({
17        minimizer: {
18          implementation: ImageMinimizerPlugin.squooshMinify,
19          options: {
20            // Your options for `squoosh`
21          },
22        },
23      }),
24    ],
25  },
26};

Recommended squoosh options for lossless optimization

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
7      {
8        test: /\.(jpe?g|png)$/i,
9        type: "asset",
10      },
11    ],
12  },
13  optimization: {
14    minimizer: [
15      new ImageMinimizerPlugin({
16        minimizer: {
17          implementation: ImageMinimizerPlugin.squooshMinify,
18          options: {
19            encodeOptions: {
20              mozjpeg: {
21                // That setting might be close to lossless, but it’s not guaranteed
22                // https://github.com/GoogleChromeLabs/squoosh/issues/85
23                quality: 100,
24              },
25              webp: {
26                lossless: 1,
27              },
28              avif: {
29                // https://github.com/GoogleChromeLabs/squoosh/blob/dev/codecs/avif/enc/README.md
30                cqLevel: 0,
31              },
32            },
33          },
34        },
35      }),
36    ],
37  },
38};

Optimize with sharp

1npm install sharp --save-dev

Recommended sharp options for lossy optimization

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
7      {
8        test: /\.(jpe?g|png)$/i,
9        type: "asset",
10      },
11    ],
12  },
13  optimization: {
14    minimizer: [
15      "...",
16      new ImageMinimizerPlugin({
17        minimizer: {
18          implementation: ImageMinimizerPlugin.sharpMinify,
19          options: {
20            encodeOptions: {
21              // Your options for `sharp`
22              // https://sharp.pixelplumbing.com/api-output
23            },
24          },
25        },
26      }),
27    ],
28  },
29};

Recommended sharp options for lossless optimization

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
7      {
8        test: /\.(jpe?g|png)$/i,
9        type: "asset",
10      },
11    ],
12  },
13  optimization: {
14    minimizer: [
15      new ImageMinimizerPlugin({
16        minimizer: {
17          implementation: ImageMinimizerPlugin.sharpMinify,
18          options: {
19            encodeOptions: {
20              jpeg: {
21                // https://sharp.pixelplumbing.com/api-output#jpeg
22                quality: 100,
23              },
24              webp: {
25                // https://sharp.pixelplumbing.com/api-output#webp
26                lossless: true,
27              },
28              avif: {
29                // https://sharp.pixelplumbing.com/api-output#avif
30                lossless: true,
31              },
32
33              // png by default sets the quality to 100%, which is same as lossless
34              // https://sharp.pixelplumbing.com/api-output#png
35              png: {},
36
37              // gif does not support lossless compression at all
38              // https://sharp.pixelplumbing.com/api-output#gif
39              gif: {},
40            },
41          },
42        },
43      }),
44    ],
45  },
46};

Optimize with svgo

1npm install svgo --save-dev

Recommended svgo options for optimization

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
7      {
8        test: /\.(svg)$/i,
9        type: "asset",
10      },
11    ],
12  },
13  optimization: {
14    minimizer: [
15      "...",
16      new ImageMinimizerPlugin({
17        minimizer: {
18          implementation: ImageMinimizerPlugin.svgoMinify,
19          options: {
20            encodeOptions: {
21              // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
22              multipass: true,
23              plugins: [
24                // set of built-in plugins enabled by default
25                // see: https://github.com/svg/svgo#default-preset
26                "preset-default",
27              ],
28            },
29          },
30        },
31      }),
32    ],
33  },
34};

Advanced setup

If you want to use loader or plugin standalone see sections below, but this is not recommended.

By default, plugin configures loader (please use the loader 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 via data URI (i.e. data:) will be optimized or generated too, not inlined images will be optimized too.

Query Parameters (only squoosh and sharp 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 the preset option

  Only supported for sharp currently:

• unit/u - can be px or percent and allows you to resize by a percentage of the image's size.

Examples:

1const myImage1 = new URL("image.png?width=150&height=120", import.meta.url);
2const myImage2 = new URL("image.png?w=150&h=120", import.meta.url);
3// You can omit one of the parameters to auto-scale
4const myImage3 = new URL("image.png?w=150", import.meta.url);
5// It works with the `preset` query parameter
6const myImage4 = new URL("image.png?as=webp&w=150&h=120", import.meta.url);
7// You can use `auto` to reset `width` or `height` from the `preset` option
8const myImage5 = new URL("image.png?as=webp&w=150&h=auto", import.meta.url);
9// You can use `unit` to get the non-retina resize of images that are retina sized
10const myImage6 = new URL("image.png?width=50&unit=percent", import.meta.url);

1.class {
2  background: url("./image.png?width=150&height=120");
3}

1<picture>
2  <source srcset="photo.jpg?as=avif&width=150&height=120" type="image/avif" />
3  <source srcset="photo.jpg?as=webp&width=150&height=120" type="image/webp" />
4  <img src="photo.jpg?width=150&height=120" alt="photo" />
5</picture>

[!NOTE]

You need to setup avif and webp presets, example for webp.

Standalone Loader

Documentation: Using loaders.

In your webpack.config.js, add the ImageMinimizerPlugin.loader and specify the asset modules options (if you use images in import):

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
7      {
8        test: /\.(jpe?g|png|gif|svg)$/i,
9        type: "asset",
10      },
11      // We recommend using only for the "production" mode
12      {
13        test: /\.(jpe?g|png|gif|svg)$/i,
14        use: [
15          {
16            loader: ImageMinimizerPlugin.loader,
17            enforce: "pre",
18            options: {
19              minimizer: {
20                implementation: ImageMinimizerPlugin.imageminMinify,
21                options: {
22                  plugins: [
23                    "imagemin-gifsicle",
24                    "imagemin-mozjpeg",
25                    "imagemin-pngquant",
26                    "imagemin-svgo",
27                  ],
28                },
29              },
30            },
31          },
32        ],
33      },
34    ],
35  },
36};

Standalone Plugin

Documentation: Using plugins.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
7      {
8        test: /\.(jpe?g|png|gif|svg)$/i,
9        type: "asset",
10      },
11    ],
12  },
13  optimization: {
14    minimizer: [
15      // Extend default minimizer, i.e. `terser-webpack-plugin` for JS
16      "...",
17      // We recommend using only for the "production" mode
18      new ImageMinimizerPlugin({
19        minimizer: {
20          implementation: ImageMinimizerPlugin.imageminMinify,
21          options: {
22            plugins: [
23              "imagemin-gifsicle",
24              "imagemin-mozjpeg",
25              "imagemin-pngquant",
26              "imagemin-svgo",
27            ],
28          },
29        },
30        // Disable `loader`
31        loader: false,
32      }),
33    ],
34  },
35};

Plugin Options

• test
• include
• exclude
• minimizer
• generator
• severityError
• loader
• concurrency
• deleteOriginalAssets

test

Type:

1type test = string | RegExp | Array<string | RegExp>;

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

Test to match files against.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        test: /\.(jpe?g|png|gif|svg)$/i,
9      }),
10    ],
11  },
12};

include

Type:

1type include = string | RegExp | Array<string | RegExp>;

Default: undefined

Files to include.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        include: /\/includes/,
9      }),
10    ],
11  },
12};

exclude

Type:

1type exclude = string | RegExp | Array<string | RegExp>;

Default: undefined

Files to exclude.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        exclude: /\/excludes/,
9      }),
10    ],
11  },
12};

minimizer

Type:

1type minimizer =
2  | {
3      implementation: (
4        original: {
5          filename: string;
6          data: Buffer;
7          warnings: Array<Error>;
8          errors: Array<Error>;
9          info: import("webpack").AssetInfo;
10        },
11        options?:
12          | {
13              [key: string]: any;
14            }
15          | undefined,
16      ) => Promise<{
17        filename: string;
18        data: Buffer;
19        warnings: Array<Error>;
20        errors: Array<Error>;
21        info: import("webpack").AssetInfo;
22      }> & {
23        setup?: (() => void) | undefined;
24        teardown?: (() => void) | undefined;
25      };
26      options?:
27        | {
28            [key: string]: any;
29          }
30        | undefined;
31      filter?: (source: Buffer, sourcePath: string) => boolean | undefined;
32      filename?:
33        | string
34        | ((
35            pathData: {
36              filename?: string | undefined;
37            },
38            assetInfo?: import("webpack").AssetInfo | undefined,
39          ) => string)
40        | undefined;
41    }
42  | Array<{
43      implementation: (
44        original: {
45          filename: string;
46          data: Buffer;
47          warnings: Array<Error>;
48          errors: Array<Error>;
49          info: import("webpack").AssetInfo;
50        },
51        options?:
52          | {
53              [key: string]: any;
54            }
55          | undefined,
56      ) => Promise<{
57        filename: string;
58        data: Buffer;
59        warnings: Array<Error>;
60        errors: Array<Error>;
61        info: import("webpack").AssetInfo;
62      }> & {
63        setup?: (() => void) | undefined;
64        teardown?: (() => void) | undefined;
65      };
66      options?:
67        | {
68            [key: string]: any;
69          }
70        | undefined;
71      filter?: (source: Buffer, sourcePath: string) => boolean | undefined;
72      filename?:
73        | string
74        | ((
75            pathData: {
76              filename?: string | undefined;
77            },
78            assetInfo?: import("webpack").AssetInfo | undefined,
79          ) => string)
80        | undefined;
81    }>;

Default: undefined

Allows to setup default minify function.

Available minimizers

• ImageMinimizerPlugin.imageminMinify
• DEPRECATED ImageMinimizerPlugin.squooshMinify
• ImageMinimizerPlugin.sharpMinify
• ImageMinimizerPlugin.svgoMinify

Single minimizer example for imagemin

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          // Implementation
10          implementation: ImageMinimizerPlugin.imageminMinify,
11          // Options
12          options: {
13            plugins: [
14              "imagemin-gifsicle",
15              "imagemin-mozjpeg",
16              "imagemin-pngquant",
17              "imagemin-svgo",
18            ],
19          },
20        },
21      }),
22    ],
23  },
24};

More information and examples here.

DEPRECATED Single minimizer example for squoosh

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          // Implementation
10          implementation: ImageMinimizerPlugin.squooshMinify,
11          // Options
12          options: {
13            encodeOptions: {
14              mozjpeg: {
15                quality: 90,
16              },
17            },
18          },
19        },
20      }),
21    ],
22  },
23};

More information and examples here.

Single minimizer example for sharp

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          // Implementation
10          implementation: ImageMinimizerPlugin.sharpMinify,
11          // Options
12          options: {
13            encodeOptions: {
14              jpeg: {
15                quality: 90,
16              },
17            },
18          },
19        },
20      }),
21    ],
22  },
23};

More information and examples here.

Single minimizer example for user defined implementation

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          implementation: async (original, options) => {
10            const inputExt = path.extname(original.filename).toLowerCase();
11
12            if (inputExt !== ".xxx") {
13              // Return `null` if the implementation does not support this file type
14              return null;
15            }
16
17            let result;
18
19            try {
20              result = await minifyAndReturnBuffer(original.data);
21            } catch (error) {
22              // Store error and return `null` if there was an error
23              original.errors.push(error);
24              return null;
25            }
26
27            return {
28              filename: original.filename,
29              data: result,
30              warnings: [...original.warnings],
31              errors: [...original.errors],
32              info: {
33                ...original.info,
34                // Please always set it to prevent double minification
35                minimized: true,
36                // Optional
37                minimizedBy: ["custom-name-of-minimication"],
38              },
39            };
40          },
41          options: {
42            // Custom options
43          },
44        },
45      }),
46    ],
47  },
48};

Multiple minimizers example

Allows to setup multiple minimizers.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: [
9          {
10            // `sharp` will handle all bitmap formats (JPG, PNG, GIF, ...)
11            implementation: ImageMinimizerPlugin.sharpMinify,
12
13            // exclude SVG if implementation support it. Not required for `sharp`.
14            // filter: (source, sourcePath) => !(/\.(svg)$/i.test(sourcePath)),
15
16            options: {
17              encodeOptions: {
18                // Your options for `sharp`
19                // https://sharp.pixelplumbing.com/api-output
20              },
21            },
22          },
23          {
24            // `svgo` will handle vector images (SVG)
25            implementation: ImageMinimizerPlugin.svgoMinify,
26            options: {
27              encodeOptions: {
28                // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
29                multipass: true,
30                plugins: [
31                  // set of built-in plugins enabled by default
32                  // see: https://github.com/svg/svgo#default-preset
33                  "preset-default",
34                ],
35              },
36            },
37          },
38        ],
39      }),
40    ],
41  },
42};

Minimizer options

implementation

Type:

1type implementation = (
2  original: {
3    filename: string;
4    data: Buffer;
5    warnings: Array<Error>;
6    errors: Array<Error>;
7    info: import("webpack").AssetInfo;
8  },
9  options?: BasicTransformerOptions<T>,
10) => Promise<{
11  filename: string;
12  data: Buffer;
13  warnings: Array<Error>;
14  errors: Array<Error>;
15  info: import("webpack").AssetInfo;
16}> & {
17  setup?: (() => void) | undefined;
18  teardown?: (() => void) | undefined;
19};

Default: undefined

Configure the default implementation.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          // Implementation
10          implementation: ImageMinimizerPlugin.sharpMinify,
11          // Options
12          options: {
13            encodeOptions: {
14              jpeg: {
15                quality: 90,
16              },
17            },
18          },
19        },
20      }),
21    ],
22  },
23};

options

Type:

1type options = {
2  [key: string]: any;
3};

Default: undefined

Options for the implementation option (i.e. options for imagemin/squoosh/sharp/custom implementation).

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          implementation: ImageMinimizerPlugin.sharpMinify,
10          // Options
11          options: {
12            encodeOptions: {
13              jpeg: {
14                quality: 90,
15              },
16            },
17          },
18        },
19      }),
20    ],
21  },
22};

filter

Type:

1type filter = (source: Buffer, sourcePath: string) => boolean | undefined;

Default: () => true

Allows filtering of images for optimization/generation.

Return true to optimize the image, false otherwise.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          filter: (source, sourcePath) => {
10            // The `source` argument is a `Buffer` of source file
11            // The `sourcePath` argument is an absolute path to source
12            if (source.byteLength < 8192) {
13              return false;
14            }
15
16            return true;
17          },
18          implementation: ImageMinimizerPlugin.imageminMinify,
19          options: {
20            plugins: [
21              "imagemin-gifsicle",
22              "imagemin-mozjpeg",
23              "imagemin-pngquant",
24              "imagemin-svgo",
25            ],
26          },
27        },
28      }),
29    ],
30  },
31};

filename

Type:

1type filename =
2  | string
3  | ((
4      pathData: {
5        filename?: string | undefined;
6      },
7      assetInfo?: import("webpack").AssetInfo | undefined,
8    ) => string)
9  | undefined;

Default: undefined

Allows to set the filename. Supported values see in webpack template strings, File-level section.

We also support [width] and [height] placeholders (only sharp and squoosh).

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          filename: "optimized-[name][ext]",
10          implementation: ImageMinimizerPlugin.sharpMinify,
11          // Options
12          options: {
13            encodeOptions: {
14              jpeg: {
15                quality: 90,
16              },
17            },
18          },
19        },
20      }),
21    ],
22  },
23};

Example function usage:

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          filename: () => "optimized-[name][ext]",
10          implementation: ImageMinimizerPlugin.sharpMinify,
11          // Options
12          options: {
13            encodeOptions: {
14              jpeg: {
15                quality: 90,
16              },
17            },
18          },
19        },
20      }),
21    ],
22  },
23};

generator

Type:

1type generator = Array<{
2  implementation: (
3    original: {
4      filename: string;
5      data: Buffer;
6      warnings: Array<Error>;
7      errors: Array<Error>;
8      info: import("webpack").AssetInfo;
9    },
10    options?:
11      | {
12          [key: string]: any;
13        }
14      | undefined,
15  ) => Promise<{
16    filename: string;
17    data: Buffer;
18    warnings: Array<Error>;
19    errors: Array<Error>;
20    info: import("webpack").AssetInfo;
21  }> & {
22    setup?: (() => void) | undefined;
23    teardown?: (() => void) | undefined;
24  };
25  options?:
26    | {
27        [key: string]: any;
28      }
29    | undefined;
30  filter?: (source: Buffer, sourcePath: string) => boolean | undefined;
31  filename?:
32    | string
33    | ((
34        pathData: {
35          filename?: string | undefined;
36        },
37        assetInfo?: import("webpack").AssetInfo | undefined,
38      ) => string)
39    | undefined;
40  preset?: string | undefined;
41  type?: "import" | "asset" | undefined;
42}>;

Default: undefined

Allow to setup default generators. Useful if you need generate webp/avif/etc from other formats.

[!WARNING]

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

[!WARNING]

The option will not work if you disable loader (i.e. set the loader option to false).

Available generators

• ImageMinimizerPlugin.imageminGenerate
• DEPRECATED ImageMinimizerPlugin.squooshGenerate
• ImageMinimizerPlugin.sharpGenerate

Generator example for imagemin

Example webp generator:

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            // You can apply generator using `?as=webp`, you can use any name and provide more options
11            preset: "webp",
12            implementation: ImageMinimizerPlugin.imageminGenerate,
13            options: {
14              // Please specify only one plugin here, multiple plugins will not work
15              plugins: ["imagemin-webp"],
16            },
17          },
18        ],
19      }),
20    ],
21  },
22};

DEPRECATED Generator example for squoosh

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            // You can apply generator using `?as=webp`, you can use any name and provide more options
11            preset: "webp",
12            implementation: ImageMinimizerPlugin.squooshGenerate,
13            options: {
14              encodeOptions: {
15                // Please specify only one codec here, multiple codecs will not work
16                webp: {
17                  quality: 90,
18                },
19              },
20            },
21          },
22        ],
23      }),
24    ],
25  },
26};

Generator example for sharp

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            // You can apply generator using `?as=webp`, you can use any name and provide more options
11            preset: "webp",
12            implementation: ImageMinimizerPlugin.sharpGenerate,
13            options: {
14              encodeOptions: {
15                // Please specify only one codec here, multiple codecs will not work
16                webp: {
17                  quality: 90,
18                },
19              },
20            },
21          },
22        ],
23      }),
24    ],
25  },
26};

Now you can generate the new image using:

1// Old approach for getting URL
2import webp from "./file.jpg?as=webp";
3
4// Assets modules
5console.log(new URL("./file.jpg?as=webp"));

1div {
2  background: url("./file.jpg?as=webp");
3}

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

Example multiple generators:

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            // You can apply generator using `?as=webp`, you can use any name and provide more options
11            preset: "webp",
12            implementation: ImageMinimizerPlugin.sharpGenerate,
13            options: {
14              encodeOptions: {
15                webp: {
16                  lossless: false,
17                },
18              },
19            },
20          },
21          {
22            // You can apply generator using `?as=avif`, you can use any name and provide more options
23            preset: "avif",
24            implementation: ImageMinimizerPlugin.sharpGenerate,
25            options: {
26              encodeOptions: {
27                avif: {
28                  lossless: false,
29                },
30              },
31            },
32          },
33        ],
34      }),
35    ],
36  },
37};

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            // You can apply generator using `?as=webp-100-50`, you can use any name and provide more options
11            preset: "webp-100-50",
12            // implementation: ImageMinimizerPlugin.squooshGenerate,
13            implementation: ImageMinimizerPlugin.sharpGenerate,
14            options: {
15              resize: {
16                enabled: true,
17                width: 100,
18                height: 50,
19              },
20              encodeOptions: {
21                webp: {
22                  quality: 90,
23                },
24              },
25            },
26          },
27        ],
28      }),
29    ],
30  },
31};

You can find more information here.

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            // You can apply generator using `?as=webp-1x`, you can use any name and provide more options
11            preset: "webp-1x",
12            implementation: ImageMinimizerPlugin.sharpGenerate,
13            options: {
14              resize: {
15                enabled: true,
16                width: 50,
17                unit: "percent",
18              },
19              encodeOptions: {
20                webp: {
21                  quality: 90,
22                },
23              },
24            },
25          },
26        ],
27      }),
28    ],
29  },
30};

Generator example for user defined implementation

You can use your own generator implementation.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            // You can apply generator using `?as=webp`, you can use any name and provide more options
11            preset: "webp",
12            implementation: async (original, options) => {
13              const inputExt = path.extname(original.filename).toLowerCase();
14
15              if (inputExt !== ".xxx") {
16                // Store error and return `null` if the implementation does not support this file type
17                original.errors.push(error);
18                return null;
19              }
20
21              let result;
22
23              try {
24                result = await minifyAndReturnBuffer(original.data);
25              } catch (error) {
26                // Store error and return `null` if there was an error
27                original.errors.push(error);
28                return null;
29              }
30
31              return {
32                filename: original.filename,
33                data: result,
34                warnings: [...original.warnings],
35                errors: [...original.errors],
36                info: {
37                  ...original.info,
38                  // Please always set it to prevent double minification
39                  generated: true,
40                  // Optional
41                  generatedBy: ["custom-name-of-minification"],
42                },
43              };
44            },
45            options: {
46              // Your options
47            },
48          },
49        ],
50      }),
51    ],
52  },
53};

Generator options

type

Type:

1type type = "import" | "asset" | undefined;

Default: "import"

Allows you to apply the generator for import or assets from compilation (useful for copied assets). By default, generators are applying on import/require, but sometimes you need to generate new images from other plugins (for example - copy-webpack-plugin), if you need this, please set asset value for the type option.

webpack.config.js

1const CopyPlugin = require("copy-webpack-plugin");
2const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
3
4module.exports = {
5  optimization: {
6    minimizer: [
7      "...",
8      new ImageMinimizerPlugin({
9        minimizer: {
10          implementation: ImageMinimizerPlugin.imageminMinify,
11          options: {
12            plugins: [
13              "imagemin-gifsicle",
14              "imagemin-mozjpeg",
15              "imagemin-pngquant",
16              "imagemin-svgo",
17            ],
18          },
19        },
20        generator: [
21          {
22            // Apply generator for copied assets
23            type: "asset",
24            // You can use `ImageMinimizerPlugin.squooshGenerate`
25            // You can use `ImageMinimizerPlugin.sharpGenerate`
26            implementation: ImageMinimizerPlugin.imageminGenerate,
27            options: {
28              plugins: ["imagemin-webp"],
29            },
30          },
31        ],
32      }),
33    ],
34  },
35  plugins: [new CopyPlugin({ patterns: ["images/**/*.png"] })],
36};

preset

Type:

1type preset = string | undefined;

Default: undefined

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            preset: "name",
11            // Implementation
12            implementation: ImageMinimizerPlugin.sharpMinify,
13            options: {
14              encodeOptions: {
15                jpeg: {
16                  quality: 85,
17                },
18              },
19            },
20          },
21        ],
22      }),
23    ],
24  },
25};

implementation

Type:

1type implementation = (
2  original: {
3    filename: string;
4    data: Buffer;
5    warnings: Array<Error>;
6    errors: Array<Error>;
7    info: import("webpack").AssetInfo;
8  },
9  options?:
10    | {
11        [key: string]: any;
12      }
13    | undefined,
14) => Promise<{
15  filename: string;
16  data: Buffer;
17  warnings: Array<Error>;
18  errors: Array<Error>;
19  info: import("webpack").AssetInfo;
20}> & {
21  setup?: (() => void) | undefined;
22  teardown?: (() => void) | undefined;
23};

Default: undefined

Configure the default implementation.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            preset: "name",
11            // Implementation
12            implementation: ImageMinimizerPlugin.sharpMinify,
13            options: {
14              encodeOptions: {
15                jpeg: {
16                  quality: 85,
17                },
18              },
19            },
20          },
21        ],
22      }),
23    ],
24  },
25};

options

Type:

1type options = {
2  [key: string]: any;
3};

Default: undefined

Options for the implementation option (i.e. options for imagemin/squoosh/sharp/custom implementation).

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            preset: "name",
11            implementation: ImageMinimizerPlugin.sharpMinify,
12            // Options
13            options: {
14              encodeOptions: {
15                jpeg: {
16                  quality: 90,
17                },
18              },
19            },
20          },
21        ],
22      }),
23    ],
24  },
25};

filter

Type:

1type filter = (source: Buffer, sourcePath: string) => boolean;

Default: () => true

Allows filtering of images for optimization/generation.

Return true to optimize the image, false otherwise.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            preset: "name",
11            filter: (source, sourcePath) => {
12              // The `source` argument is a `Buffer` of source file
13              // The `sourcePath` argument is an absolute path to source
14              if (source.byteLength < 8192) {
15                return false;
16              }
17
18              return true;
19            },
20            implementation: ImageMinimizerPlugin.imageminMinify,
21            options: {
22              plugins: [
23                "imagemin-gifsicle",
24                "imagemin-mozjpeg",
25                "imagemin-pngquant",
26                "imagemin-svgo",
27              ],
28            },
29          },
30        ],
31      }),
32    ],
33  },
34};

filename

Type:

1type filename =
2  | string
3  | ((
4      pathData: PathData,
5      assetInfo?: import("webpack").AssetInfo | undefined,
6    ) => string);

Default: undefined

Allows to set the filename. Supported values see in webpack template strings, File-level section.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            preset: "name",
11            filename: "generated-[name][ext]",
12            implementation: ImageMinimizerPlugin.sharpMinify,
13            // Options
14            options: {
15              encodeOptions: {
16                jpeg: {
17                  quality: 90,
18                },
19              },
20            },
21          },
22        ],
23      }),
24    ],
25  },
26};

Example of function usage:

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        generator: [
9          {
10            preset: "name",
11            filename: () => "generated-[name][ext]",
12            implementation: ImageMinimizerPlugin.sharpMinify,
13            // Options
14            options: {
15              encodeOptions: {
16                jpeg: {
17                  quality: 90,
18                },
19              },
20            },
21          },
22        ],
23      }),
24    ],
25  },
26};

severityError

Type:

1type severityError = string;

Default: 'error'

Allows to choose how errors are displayed.

Сan have the following values:

• 'off' - suppresses errors and warnings
• 'warning' - emit warnings instead errors
• 'error' - emit errors

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        severityError: "warning",
9        minimizer: {
10          implementation: ImageMinimizerPlugin.imageminMinify,
11          options: {
12            plugins: [
13              "imagemin-gifsicle",
14              "imagemin-mozjpeg",
15              "imagemin-pngquant",
16              "imagemin-svgo",
17            ],
18          },
19        },
20      }),
21    ],
22  },
23};

loader

Type:

1type loader = boolean;

Default: true

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

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        loader: false,
9        // `generator` will not work in this case
10        minimizer: {
11          implementation: ImageMinimizerPlugin.imageminMinify,
12          options: {
13            plugins: [
14              "imagemin-gifsicle",
15              "imagemin-mozjpeg",
16              "imagemin-pngquant",
17              "imagemin-svgo",
18            ],
19          },
20        },
21      }),
22    ],
23  },
24};

concurrency

Type:

1type concurrency = number;

Default: Math.max(1, os.cpus().length - 1)

Maximum number of concurrency optimization processes in one time.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        concurrency: 3,
9        minimizer: {
10          implementation: ImageMinimizerPlugin.imageminMinify,
11          options: {
12            plugins: [
13              "imagemin-gifsicle",
14              "imagemin-mozjpeg",
15              "imagemin-pngquant",
16              "imagemin-svgo",
17            ],
18          },
19        },
20      }),
21    ],
22  },
23};

deleteOriginalAssets

Type:

1type deleteOriginalAssets = boolean;

Default: true

Allows removing original assets after optimization.

Please use this option if you are set the filename option for the minimizer option, disable loader: false and want to keep optimized and not optimized assets.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        // Disable loader
9        loader: false,
10        // Allows to keep original asset and minimized assets with different filenames
11        deleteOriginalAssets: false,
12        minimizer: {
13          filename: "[path][name].webp",
14          implementation: ImageMinimizerPlugin.imageminMinify,
15          options: {
16            plugins: [
17              "imagemin-gifsicle",
18              "imagemin-mozjpeg",
19              "imagemin-pngquant",
20              "imagemin-svgo",
21            ],
22          },
23        },
24      }),
25    ],
26  },
27};

Loader Options

• minimizer
• generator
• severityError

minimizer

Type:

1type minimizer =
2  | {
3      implementation: (
4        original: {
5          filename: string;
6          data: Buffer;
7          warnings: Array<Error>;
8          errors: Array<Error>;
9          info: import("webpack").AssetInfo;
10        },
11        options?:
12          | {
13              [key: string]: any;
14            }
15          | undefined,
16      ) => Promise<{
17        filename: string;
18        data: Buffer;
19        warnings: Array<Error>;
20        errors: Array<Error>;
21        info: import("webpack").AssetInfo;
22      }> & {
23        setup?: (() => void) | undefined;
24        teardown?: (() => void) | undefined;
25      };
26      options?:
27        | {
28            [key: string]: any;
29          }
30        | undefined;
31      filter?: (source: Buffer, sourcePath: string) => boolean | undefined;
32      filename?:
33        | string
34        | ((
35            pathData: {
36              filename?: string | undefined;
37            },
38            assetInfo?: import("webpack").AssetInfo | undefined,
39          ) => string)
40        | undefined;
41    }
42  | Array<{
43      implementation: (
44        original: {
45          filename: string;
46          data: Buffer;
47          warnings: Array<Error>;
48          errors: Array<Error>;
49          info: import("webpack").AssetInfo;
50        },
51        options?:
52          | {
53              [key: string]: any;
54            }
55          | undefined,
56      ) => Promise<{
57        filename: string;
58        data: Buffer;
59        warnings: Array<Error>;
60        errors: Array<Error>;
61        info: import("webpack").AssetInfo;
62      }> & {
63        setup?: (() => void) | undefined;
64        teardown?: (() => void) | undefined;
65      };
66      options?:
67        | {
68            [key: string]: any;
69          }
70        | undefined;
71      filter?: (source: Buffer, sourcePath: string) => boolean | undefined;
72      filename?:
73        | string
74        | ((
75            pathData: {
76              filename?: string | undefined;
77            },
78            assetInfo?: import("webpack").AssetInfo | undefined,
79          ) => string)
80        | undefined;
81    }>;

Default: undefined

Allows to setup default minimizer.

Loader minimizer example for imagemin

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.(jpe?g|png|gif|svg)$/i,
8        type: "asset",
9      },
10      {
11        test: /\.(jpe?g|png|gif|svg)$/i,
12        loader: ImageMinimizerPlugin.loader,
13        enforce: "pre",
14        options: {
15          minimizer: {
16            implementation: ImageMinimizerPlugin.imageminMinify,
17            options: {
18              plugins: [
19                "imagemin-gifsicle",
20                "imagemin-mozjpeg",
21                "imagemin-pngquant",
22                "imagemin-svgo",
23              ],
24            },
25          },
26        },
27      },
28    ],
29  },
30};

For more information and supported options please read here.

generator

Type:

1type generator = Array<{
2  implementation: TransformerFunction<T>;
3  options?: BasicTransformerOptions<T>;
4  filter?: FilterFn | undefined;
5  filename?: string | FilenameFn | undefined;
6  preset?: string | undefined;
7  type?: "import" | "asset" | undefined;
8}>;

Default: undefined

Allow to setup default generators. Useful if you need generate webp/avif/etc from other formats.

Loader generator example for imagemin

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.(jpe?g|png|gif|svg)$/i,
8        type: "asset",
9      },
10      {
11        test: /\.(jpe?g|png|gif|svg)$/i,
12        loader: ImageMinimizerPlugin.loader,
13        enforce: "pre",
14        options: {
15          generator: [
16            {
17              preset: "webp",
18              implementation: ImageMinimizerPlugin.imageminGenerate,
19              options: {
20                plugins: ["imagemin-webp"],
21              },
22            },
23          ],
24        },
25      },
26    ],
27  },
28};

For more information and supported options please read here.

severityError

Type:

1type severityError = string;

Default: 'error'

Allows to choose how errors are displayed.

Сan have the following values:

• 'off' - suppresses errors and warnings
• 'warning' - emit warnings instead errors
• 'error' - emit errors

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.(jpe?g|png|gif|svg)$/i,
8        type: "asset",
9      },
10      {
11        test: /\.(jpe?g|png|gif|svg)$/i,
12        use: [
13          {
14            loader: ImageMinimizerPlugin.loader,
15            options: {
16              severityError: "warning",
17              minimizerOptions: {
18                plugins: ["gifsicle"],
19              },
20            },
21          },
22        ],
23      },
24    ],
25  },
26};

Additional API

imageminNormalizeConfig(config)

The function normalizes configuration (converts plugins names and options to Functions) for using in imagemin package directly.

1const imagemin = require("imagemin");
2const { imageminNormalizeConfig } = require("image-minimizer-webpack-plugin");
3
4/*
5  console.log(imageminConfig);
6  =>
7  {
8    plugins: [Function, Function],
9    pluginsMeta: [
10      { name: "imagemin-jpegtran", version: "x.x.x", options: {} },
11      { name: "imagemin-pngquant", version: "x.x.x", options: { quality: [0.6, 0.8] }
12    ]
13  }
14*/
15
16(async () => {
17  const imageminConfig = await imageminNormalizeConfig({
18    plugins: ["jpegtran", ["pngquant", { quality: [0.6, 0.8] }]],
19  });
20  const files = await imagemin(["images/*.{jpg,png}"], {
21    destination: "build/images",
22    plugins: imageminConfig.plugins,
23  });
24
25  console.log(files);
26  // => [{data: <Buffer 89 50 4e …>, path: 'build/images/foo.jpg'}, …]
27})();

Examples

Optimize images based on size

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

What is progressive image? Answer here.

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      new ImageMinimizerPlugin({
7        minimizer: {
8          implementation: ImageMinimizerPlugin.imageminMinify,
9          options: {
10            plugins: [["jpegtran", { progressive: true }]],
11          },
12          // Only apply this one to files equal to or over 8192 bytes
13          filter: (source) => {
14            if (source.byteLength >= 8192) {
15              return true;
16            }
17
18            return false;
19          },
20        },
21      }),
22      new ImageMinimizerPlugin({
23        minimizer: {
24          implementation: ImageMinimizerPlugin.imageminMinify,
25          options: {
26            plugins: [["jpegtran", { progressive: false }]],
27          },
28          // Only apply this one to files under 8192
29          filter: (source) => {
30            if (source.byteLength < 8192) {
31              return true;
32            }
33
34            return false;
35          },
36        },
37      }),
38    ],
39  },
40};

Optimize and generate webp images

• imagemin

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          implementation: ImageMinimizerPlugin.imageminMinify,
10          options: {
11            plugins: [
12              "imagemin-gifsicle",
13              "imagemin-mozjpeg",
14              "imagemin-pngquant",
15              "imagemin-svgo",
16            ],
17          },
18        },
19        generator: [
20          {
21            // You can apply generator using `?as=webp`, you can use any name and provide more options
22            preset: "webp",
23            implementation: ImageMinimizerPlugin.imageminGenerate,
24            options: {
25              plugins: ["imagemin-webp"],
26            },
27          },
28        ],
29      }),
30    ],
31  },
32};

• DEPRECATED squoosh

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          implementation: ImageMinimizerPlugin.squooshMinify,
10        },
11        generator: [
12          {
13            // You can apply generator using `?as=webp`, you can use any name and provide more options
14            preset: "webp",
15            implementation: ImageMinimizerPlugin.squooshGenerate,
16            options: {
17              encodeOptions: {
18                webp: {
19                  quality: 90,
20                },
21              },
22            },
23          },
24        ],
25      }),
26    ],
27  },
28};

• sharp

webpack.config.js

1const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
2
3module.exports = {
4  optimization: {
5    minimizer: [
6      "...",
7      new ImageMinimizerPlugin({
8        minimizer: {
9          implementation: ImageMinimizerPlugin.sharpMinify,
10        },
11        generator: [
12          {
13            // You can apply generator using `?as=webp`, you can use any name and provide more options
14            preset: "webp",
15            implementation: ImageMinimizerPlugin.sharpGenerate,
16            options: {
17              encodeOptions: {
18                webp: {
19                  quality: 90,
20                },
21              },
22            },
23          },
24        ],
25      }),
26    ],
27  },
28};

Generate webp images from copied assets

• imagemin

webpack.config.js

1const CopyPlugin = require("copy-webpack-plugin");
2const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
3
4module.exports = {
5  optimization: {
6    minimizer: [
7      "...",
8      new ImageMinimizerPlugin({
9        minimizer: {
10          implementation: ImageMinimizerPlugin.imageminMinify,
11          options: {
12            plugins: [
13              "imagemin-gifsicle",
14              "imagemin-mozjpeg",
15              "imagemin-pngquant",
16              "imagemin-svgo",
17            ],
18          },
19        },
20        generator: [
21          {
22            type: "asset",
23            implementation: ImageMinimizerPlugin.imageminGenerate,
24            options: {
25              plugins: ["imagemin-webp"],
26            },
27          },
28        ],
29      }),
30    ],
31  },
32  plugins: [new CopyPlugin({ patterns: ["images/**/*.png"] })],
33};

• DEPRECATED squoosh

webpack.config.js

1const CopyPlugin = require("copy-webpack-plugin");
2const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
3
4module.exports = {
5  optimization: {
6    minimizer: [
7      "...",
8      new ImageMinimizerPlugin({
9        minimizer: {
10          implementation: ImageMinimizerPlugin.squooshMinify,
11        },
12        generator: [
13          {
14            type: "asset",
15            implementation: ImageMinimizerPlugin.squooshGenerate,
16            options: {
17              encodeOptions: {
18                webp: {
19                  quality: 90,
20                },
21              },
22            },
23          },
24        ],
25      }),
26    ],
27  },
28  plugins: [new CopyPlugin({ patterns: ["images/**/*.png"] })],
29};

• sharp

webpack.config.js

1const CopyPlugin = require("copy-webpack-plugin");
2const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
3
4module.exports = {
5  optimization: {
6    minimizer: [
7      "...",
8      new ImageMinimizerPlugin({
9        minimizer: {
10          implementation: ImageMinimizerPlugin.sharpMinify,
11        },
12        generator: [
13          {
14            type: "asset",
15            implementation: ImageMinimizerPlugin.sharpGenerate,
16            options: {
17              encodeOptions: {
18                webp: {
19                  quality: 90,
20                },
21              },
22            },
23          },
24        ],
25      }),
26    ],
27  },
28  plugins: [new CopyPlugin({ patterns: ["images/**/*.png"] })],
29};

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT