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 extensionSide 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

Type: String | RegExp | Array[...String|RegExp] Default: /\.(png|jpg|jpeg|gif|svg)$/i

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... :wink:)

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

Related

• Vite
• imagemin
• imagemin-jpegtran
• imagemin-mozjpeg
• imagemin-jpegoptim
• imagemin-pngquant
• imagemin-optipng
• imagemin-gifsicle
• imagemin-svgo
• imagemin-webp
• imagemin-gif2webp
• @vheemstra/imagemin-avifenc