Plugin and Loader for webpack to optimize (compress) all images using imagemin. Do not worry about size of images, now they are always optimized/compressed.
This plugin uses imagemin to optimize your images.
To begin, you'll need to install image-minimizer-webpack-plugin
:
$ npm install image-minimizer-webpack-plugin --save-dev
Images can be optimized in two modes:
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
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
Recommended imagemin plugins for lossy optimization
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: 'asset',
},
],
},
plugins: [
new ImageMinimizerPlugin({
minimizerOptions: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
],
},
}),
],
};
ℹ️ Only for
4
version ofwebpack
: Make sure that plugin place after any plugins that add images or other assets which you want to optimized.**
ℹ️ If you want to use
loader
orplugin
standalone see sections below, but this is not recommended.
In your webpack.config.js
, add the ImageMinimizerPlugin.loader
and specify the asset modules options:
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', // Ignore errors on corrupted images
minimizerOptions: {
plugins: ['gifsicle'],
},
},
},
],
},
],
},
};
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: 'asset',
},
],
},
plugins: [
// Make sure that the plugin placed after any plugins that added images
new ImageMinimizerPlugin({
severityError: 'warning', // Ignore errors on corrupted images
minimizerOptions: {
plugins: ['gifsicle'],
},
// Disable `loader`
loader: false,
}),
],
};
Name | Type | Default | Description |
---|---|---|---|
test |
{String\/RegExp|Array<String|RegExp>} |
/.(jpe?g|png|gif|tif|webp|svg|avif)$/i |
Test to match files against |
include |
{String\/RegExp|Array<String|RegExp>} |
undefined |
Files to include |
exclude |
{String\/RegExp|Array<String|RegExp>} |
undefined |
Files to exclude |
filter |
{Function} |
() => true |
Allows filtering of images for optimization |
severityError |
{Boolean|String} |
'auto' |
Allows to choose how errors are displayed |
minimizerOptions |
{Object} |
{ plugins: [] } |
Options for imagemin |
loader |
{Boolean} |
true |
Automatically adding imagemin-loader |
maxConcurrency |
{Number} |
Math.max(1, os.cpus().length - 1) |
Maximum number of concurrency optimization processes in one time |
filename |
{string} |
'[path][name][ext]' |
Allows to set the filename for the generated asset. Useful for converting to a webp |
deleteOriginalAssets |
{Boolean} |
false |
Allows to delete the original asset. Useful for converting to a webp and remove original assets |
Type: String|RegExp|Array<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 = {
plugins: [
new ImageMinimizerPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
}),
],
};
Type: String|RegExp|Array<String|RegExp>
Default: undefined
Files to include.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
include: /\/includes/,
}),
],
};
Type: String|RegExp|Array<String|RegExp>
Default: undefined
Files to exclude.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
exclude: /\/excludes/,
}),
],
};
Type: Function
Default: () => true
Allows filtering of images for optimization.
Return true
to optimize the image, false
otherwise.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
filter: (source, sourcePath) => {
// The `source` argument is a `Buffer` of source file
// The `sourcePath` argument is an absolute path to source
if (source.byteLength < 8192) {
return false;
}
return true;
},
}),
],
};
Type: Boolean|String
Default: 'auto'
Allows to choose how errors are displayed.
Сan have the following values:
'auto'
- emit warnings indevelopment
mode and emit errors inproduction
mode (default behavior)false
or'off'
- suppresses errors and warnings'warning'
- emit warnings instead errorstrue
or'error'
- emit errors
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
severityError: 'warning',
}),
],
};
Type: Object
Default: { plugins: [] }
Options for imagemin
.
More information and examples here.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
minimizerOptions: {
plugins: [
// Name
'gifsicle',
// Name with options
['mozjpeg', { quality: 80 }],
// Full package name
[
'imagemin-svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
[
// Custom package name
'nonstandard-imagemin-package-name',
{ myOptions: true },
],
],
},
}),
],
};
Type: Boolean
Default: true
Automatically adding imagemin-loader
.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
loader: false,
}),
],
};
Type: Number
Default: Math.max(1, os.cpus().length - 1)
Maximum number of concurrency optimization processes in one time.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
maxConcurrency: 3,
}),
],
};
Type: String
Default: '[path][name][ext]'
Allows to set the filename for the generated asset. Useful for converting to a webp
.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
// Images are converted to `webp` and the original assets have been kept
new ImageMinimizerPlugin({
test: /\.(png)$/i,
filename: '[path][name].webp',
minimizerOptions: {
plugins: ['imagemin-webp'],
},
}),
],
};
Type: Boolean
Default: false
Allows to remove original assets. Useful for converting to a webp
and remove original assets
i Doesn't make sense if you haven't changed the original value of the
filename
option
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
// Images are converted to `webp` and the original assets have been removed
new ImageMinimizerPlugin({
test: /\.(png)$/i,
deleteOriginalAssets: true,
filename: '[path][name].webp',
minimizerOptions: {
plugins: ['imagemin-webp'],
},
}),
],
};
To generate and compress the original assets:
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
// And the original assets will be compressed
new ImageMinimizerPlugin({
test: /\.(png)$/i,
minimizerOptions: {
plugins: ['pngquant'],
},
}),
// Images are converted to `webp` and the original assets have been removed
new ImageMinimizerPlugin({
test: /\.(png)$/i,
deleteOriginalAssets: false,
filename: '[path][name].webp',
minimizerOptions: {
plugins: ['imagemin-webp'],
},
}),
],
};
Name | Type | Default | Description |
---|---|---|---|
filter |
{Function} |
undefined |
Allows filtering of images for optimization |
severityError |
{Boolean|String} |
'auto' |
Allows to choose how errors are displayed |
minimizerOptions |
{Object} |
{ plugins: [] } |
Options for imagemin |
filename |
{string} |
'[path][name][ext]' |
Allows to set the filename for the generated asset. Useful for converting to a webp |
deleteOriginalAssets |
{Boolean} |
false |
Allows to delete the original asset. Useful for converting to a webp and remove original assets |
Type: Function
Default: () => true
Allows filtering of images for optimization.
Return true
to optimize the image, false
otherwise.
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: {
cache: true,
filter: (source, sourcePath) => {
// The `source` argument is a `Buffer` of source file
// The `sourcePath` argument is an absolute path to source
if (source.byteLength < 8192) {
return false;
}
return true;
},
minimizerOptions: {
plugins: ['gifsicle'],
},
},
},
],
},
],
},
};
Type: Boolean|String
Default: 'auto'
Allows to choose how errors are displayed.
Сan have the following values:
'auto'
- emit warnings indevelopment
mode and emit errors inproduction
mode (default behavior)false
or'off'
- suppresses errors and warnings'warning'
- emit warnings instead errorstrue
or'error'
- emit 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'],
},
},
},
],
},
],
},
};
Type: Object
Default: { plugins: [] }
Options for imagemin
.
Options for 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,
use: [
{
loader: ImageMinimizerPlugin.loader,
options: {
severityError: 'warning',
minimizerOptions: {
plugins: [
['gifsicle', { interlaced: true, optimizationLevel: 3 }],
],
},
},
},
],
},
],
},
};
Type: String
Default: '[path][name][ext]'
Allows to set the filename for the generated asset. Useful for converting to a webp
.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/i,
use: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: 'asset',
},
{
loader: ImageMinimizerPlugin.loader,
options: {
filename: '[path][name].webp',
minimizerOptions: {
plugins: ['imagemin-webp'],
},
},
},
],
},
],
},
};
Type: Boolean
Default: false
Allows to keep the original asset. Useful for converting to a webp
and remove original assets.
i Doesn't make sense if you haven't changed the original value of the
filename
option
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(png)$/i,
use: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: 'asset',
},
{
loader: ImageMinimizerPlugin.loader,
options: {
// PNG images are converted to WEBP, and the originals will keep
deleteOriginalAssets: false,
filename: '[path][name].webp',
minimizerOptions: {
plugins: ['imagemin-webp'],
},
},
},
],
},
],
},
};
The function normalizes configuration (converts plugins names and options to Function
s) for using in imagemin
package directly.
const imagemin = require('imagemin');
const { normalizeConfig } = require('image-minimizer-webpack-plugin');
const imageminConfig = normalizeConfig({
plugins: [
'jpegtran',
[
'pngquant',
{
quality: [0.6, 0.8],
},
],
],
});
/*
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] }
]
}
*/
(async () => {
const files = await imagemin(['images/*.{jpg,png}'], {
destination: 'build/images',
plugins: imageminConfig.plugins,
});
console.log(files);
// => [{data: <Buffer 89 50 4e …>, path: 'build/images/foo.jpg'}, …]
})();
You can use difference options (like progressive
/interlaced
and etc) based on image size (example - don't do progressive transformation for small images).
What is progressive
image? Answer here
.
webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
minimizer: [
new ImageMinimizerPlugin({
// Only apply this one to files equal to or over 8192 bytes
filter: (source) => {
if (source.byteLength >= 8192) {
return true;
}
return false;
},
minimizerOptions: {
plugins: [['jpegtran', { progressive: true }]],
},
}),
new ImageMinimizerPlugin({
// Only apply this one to files under 8192
filter: (source) => {
if (source.byteLength < 8192) {
return true;
}
return false;
},
minimizerOptions: {
plugins: [['jpegtran', { progressive: false }]],
},
}),
],
};
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
plugins: [
new ImageMinimizerPlugin({
minimizerOptions: {
plugins: ['pngquant'],
},
}),
new ImageMinimizerPlugin({
deleteOriginalAssets: false,
filename: '[path][name].webp',
minimizerOptions: {
plugins: ['imagemin-webp'],
},
}),
],
};
Please take a moment to read our contributing guidelines if you haven't yet done so.