Imagemin Webpack
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.
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![discussion][discussion]][discussion-url]
[![size][size]][size-url]
# image-minimizer-webpack-plugin
- [Getting Started](#getting-started)
- [Install optimize/generate tool](#install-optimizegenerate-tool)
- [Optimize with `imagemin`](#optimize-with-imagemin)
- [[**DEPRECATED**] Optimize with `squoosh`](#deprecated-optimize-with-squoosh)
- [Optimize with `sharp`](#optimize-with-sharp)
- [Optimize with `svgo`](#optimize-with-svgo)
- [Advanced setup](#advanced-setup)
- [Query Parameters (only `squoosh` and `sharp` currently)](#query-parameters-only-squoosh-and-sharp-currently)
- [Standalone Loader](#standalone-loader)
- [Standalone Plugin](#standalone-plugin)
- [Plugin Options](#plugin-options)
- [`test`](#test)
- [`include`](#include)
- [`exclude`](#exclude)
- [`minimizer`](#minimizer)
- [Available minimizers](#available-minimizers)
- [Single minimizer example for `imagemin`](#single-minimizer-example-for-imagemin)
- [[**DEPRECATED**] Single minimizer example for `squoosh`](#deprecated-single-minimizer-example-for-squoosh)
- [Single minimizer example for `sharp`](#single-minimizer-example-for-sharp)
- [Single minimizer example for user defined implementation](#single-minimizer-example-for-user-defined-implementation)
- [Multiple minimizers example](#multiple-minimizers-example)
- [Minimizer options](#minimizer-options)
- [`implementation`](#implementation)
- [`options`](#options)
- [`filter`](#filter)
- [`filename`](#filename)
- [`generator`](#generator)
- [Available generators](#available-generators)
- [Generator example for `imagemin`](#generator-example-for-imagemin)
- [[**DEPRECATED**] Generator example for `squoosh`](#deprecated-generator-example-for-squoosh)
- [Generator example for `sharp`](#generator-example-for-sharp)
- [Generator example for user defined implementation](#generator-example-for-user-defined-implementation)
- [Generator options](#generator-options)
- [`type`](#type)
- [`preset`](#preset)
- [`implementation`](#implementation-1)
- [`options`](#options-1)
- [`filter`](#filter-1)
- [`filename`](#filename-1)
- [`severityError`](#severityerror)
- [`loader`](#loader)
- [`concurrency`](#concurrency)
- [`deleteOriginalAssets`](#deleteoriginalassets)
- [Loader Options](#loader-options)
- [`minimizer`](#minimizer-1)
- [Loader minimizer example for `imagemin`](#loader-minimizer-example-for-imagemin)
- [`generator`](#generator-1)
- [Loader generator example for `imagemin`](#loader-generator-example-for-imagemin)
- [`severityError`](#severityerror-1)
- [Additional API](#additional-api)
- [`imageminNormalizeConfig(config)`](#imageminnormalizeconfigconfig)
- [Examples](#examples)
- [Optimize images based on size](#optimize-images-based-on-size)
- [Optimize and generate `webp` images](#optimize-and-generate-webp-images)
- [Generate `webp` images from copied assets](#generate-webp-images-from-copied-assets)
- [Contributing](#contributing)
- [License](#license)
## Getting Started
This plugin can use 4 tools to optimize/generate images:
- [`imagemin`](https://github.com/imagemin/imagemin) - optimize your images by default, since it is stable and works with all types of images
- **DEPRECATED** [`squoosh`](https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh) - while working in experimental mode with `.jpg`, `.jpeg`, `.png`, `.webp`, `.avif` file types.
- [`sharp`](https://github.com/lovell/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`](https://github.com/svg/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`](https://github.com/imagemin/imagemin):
```console
npm 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`](https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh):
```console
npm install image-minimizer-webpack-plugin @squoosh/lib --save-dev
```
- [`sharp`](https://github.com/lovell/sharp):
```console
npm install image-minimizer-webpack-plugin sharp --save-dev
```
- [`svgo`](https://github.com/svg/svgo):
```console
npm install image-minimizer-webpack-plugin svgo --save-dev
```
Images can be optimized in two modes:
1. [Lossless](https://en.wikipedia.org/wiki/Lossless_compression) (without loss of quality).
2. [Lossy](https://en.wikipedia.org/wiki/Lossy_compression) (with loss of quality).
### Optimize with [`imagemin`](https://github.com/imagemin/imagemin)
> [!NOTE]
>
> - [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg) can be configured in lossless and lossy mode.
> - [imagemin-svgo](https://github.com/imagemin/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**
```shell
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
```
**Recommended imagemin plugins for lossy optimization**
```shell
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev
```
For `imagemin-svgo` v9.0.0+ need use svgo [configuration](https://github.com/svg/svgo#configuration)
**webpack.config.js**
```js
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: "asset",
},
],
},
optimization: {
minimizer: [
"...",
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
// 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 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 with [`squoosh`](https://github.com/GoogleChromeLabs/squoosh/tree/dev/libsquoosh)
```console
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 the [codecs.ts](https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/src/codecs.ts) file under codecs.
**webpack.config.js**
```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: [
"...",
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.squooshMinify,
options: {
// Your options for `squoosh`
},
},
}),
],
},
};
```
**Recommended `squoosh` options for lossless optimization**
For lossless optimization we recommend using the options listed below in `minimizer.options.encodeOptions`.
**webpack.config.js**
```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: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.squooshMinify,
options: {
encodeOptions: {
mozjpeg: {
// That setting might be close to lossless, but it’s not guaranteed
// https://github.com/GoogleChromeLabs/squoosh/issues/85
quality: 100,
},
webp: {
lossless: 1,
},
avif: {
// https://github.com/GoogleChromeLabs/squoosh/blob/dev/codecs/avif/enc/README.md
cqLevel: 0,
},
},
},
},
}),
],
},
};
```
### Optimize with [`sharp`](https://github.com/lovell/sharp)
```console
npm 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](https://sharp.pixelplumbing.com/api-output).
**webpack.config.js**
```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: [
"...",
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.sharpMinify,
options: {
encodeOptions: {
// Your options for `sharp`
// https://sharp.pixelplumbing.com/api-output
},
},
},
}),
],
},
};
```
**Recommended `sharp` options for lossless optimization**
For lossless optimization we recommend using the options listed below in `minimizer.options.encodeOptions`.
**webpack.config.js**
```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: [
new ImageMinimizerPlugin({
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 with [`svgo`](https://github.com/svg/svgo)
```console
npm 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](https://github.com/svg/svgo/tree/main/plugins).
**webpack.config.js**
```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: /\.(svg)$/i,
type: "asset",
},
],
},
optimization: {
minimizer: [
"...",
new ImageMinimizerPlugin({
minimizer: {
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",
],
},
},
},
}),
],
},
};
```
### 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](#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:
```js
const myImage1 = new URL("image.png?width=150&height=120", import.meta.url);
const myImage2 = new URL("image.png?w=150&h=120", import.meta.url);
// You can omit one of the parameters to auto-scale
const myImage3 = new URL("image.png?w=150", import.meta.url);
// It works with the `preset` query parameter
const myImage4 = new URL("image.png?as=webp&w=150&h=120", import.meta.url);
// You can use `auto` to reset `width` or `height` from the `preset` option
const myImage5 = new URL("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 sized
const myImage6 = new URL("image.png?width=50&unit=percent", import.meta.url);
```
```css
.class {
background: url("./image.png?width=150&height=120");
}
```
```html
