@vheemstra/vite-plugin-imagemin

Minify bundled asset and static images in your Vite build with Imagemin. It optimizes all images you want, with the plugins you pick, using the configuration you choose.

Features

Supports all Imagemin-* plugins.
Full control over:
- which plugin(s) to use
- what options to apply
- which files to process
- output files' path and name
Can create WebP versions of supported images (jpg/png/gif).
Can create Avif versions of supported images (jpg/png).
Skips optimized version if output is larger than original.
Skips Avif/WebP version if output is larger than original, optimized version or smallest version of an image.

Install

npm install @vheemstra/vite-plugin-imagemin --save-dev

You also need to install the minifier plugins you want to use.

Usage

Add vite-plugin-imagemin and the minifier plugins to your vite.config.js:

// vite.config.js
import { defineConfig } from 'vite'
import viteImagemin from '@vheemstra/vite-plugin-imagemin'

// The minifiers you want to use:
import imageminMozjpeg from 'imagemin-mozjpeg'
import imageminWebp from 'imagemin-webp'

export default defineConfig({
  // ...your Vite config
  plugins: [
    // ...your other plugins
    viteImagemin({
      plugins: {
        jpg: imageminMozjpeg(),
      },
      makeWebp: {
        plugins: {
          jpg: imageminWebp(),
        },
      },
    }),
  ],
})

Options

plugins ^required

Type: object

Object containing the minifiers to use per file extension, where:

key is the file extension
Side note: jpg matches .jpg and .jpeg files.

value is the initiated minifier plugin (or array of plugins)

All imagemin-* plugins can be used. See their documentation for install instructions and options. See also Suggested minifier plugins.

onlyAssets

Type: boolean
Default: false

Process only files in project's assets folder (true) or process all files in project's dist folder (false).

include

Valid picomatch pattern to include image files to minify (used in createFilter).

exclude

Type: String | RegExp | Array[...String|RegExp]
Default: /node_modules/

Valid picomatch pattern to exclude files from processing (used in createFilter).

formatFilePath

Type: function
Default: (file: string) => file

Callback function to change the output filepath, defaults to overwriting the original file.
The file argument holds the input filepath relative to the project's root directory (e.g. dist/assets/image.jpg).

skipIfLarger

Type: boolean
Default: true

Ignore the optimized output if it is larger than the original file.

makeAvif / makeWebp

Type: object
Default: undefined

Opt-in to create additional Avif and/or WebP versions of the processed images.

make*.plugins ^required

Type: object

Same as options.plugins.

make*.formatFilePath

Type: function
Default: (file: string) => `${file}.avif`

Like options.formatFilePath, but by default the .avif/.webp extension is appended to the filepath.
The file argument holds the filepath as produced by options.formatFilePath.

make*.skipIfLargerThan

Type: false | 'original' | 'optimized' | 'smallest'
Default: 'optimized'

Skip Avif/WebP version if:

larger than the original image ('original')

larger than the optimized image ('optimized')

it is not the smallest version of the image ('smallest')

never skip (false)

root

Type: string
Default: Vite's resolvedConfig.root or current working directory

Path to project root directory.

verbose

Type: boolean
Default: true

Whether to log process results to console.

logger

Type: object | Logger
Default: Vite's resolvedConfig.logger

Logger object with callback functions on the info, warn and error keys.

logByteDivider

Type: number
Default: 1000

Choose the size format to use in the logs:

1000 displays size in kilobytes (kB)

1024 displays size in kibibytes (KiB)

Suggested minifier plugins

Optimize plugins

Plugin	Recommended	Type	Options
imagemin-gifsicle	✅	GIF	see docs
imagemin-mozjpeg	✅	JPG	see docs
imagemin-jpegoptim		JPG	see docs
imagemin-jpegtran		JPG	see docs
imagemin-pngquant	✅	PNG	see docs
imagemin-optipng		PNG	see docs
imagemin-svgo	✅	SVG	see docs

Make plugins

Plugin	Types	Options
imagemin-webp	JPG / PNG	see docs
imagemin-gif2webp	GIF	see docs
@vheemstra/imagemin-avifenc	JPG / PNG	see docs

Additional created versions can be delivered by the server if the client supports its format (see example config below). If not, the original (optimized) image can be delivered.

Tip: Use skipIfLargerThan option to ensure additional versions of images are smaller than the regular ones. (Otherwise, what was the point... 😉)

Example `.htaccess` config for WebP

<IfModule mod_rewrite.c>
  RewriteEngine On

  # If browser supports WebP images...
  RewriteCond %{HTTP_ACCEPT} image/webp

  # ...and WebP replacement image exists in the same directory...
  RewriteCond %{REQUEST_FILENAME}.webp -f

  # ...serve WebP image instead of jpeg/png/gif.
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>

<IfModule mod_headers.c>
  # Vary: Accept for all the requests to jpeg, png and gif
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  # Add file type MIME support
  AddType image/webp .webp
</IfModule>

Adopted from answers given here.

License

MIT