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.
- 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.
- Uses optional cache by default to skip processing of unchanged files
npm install @vheemstra/vite-plugin-imagemin --save-devYou also need to install the minifier plugins you want to use.
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(),
},
},
}),
],
})Type: object
Object containing the minifiers to use per file extension, where:
keyis the file extension
Side note:jpgmatches.jpgand.jpegfiles.valueis 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.
Type: boolean
Default: false
Process only files in project's assets folder (
true) or process all files in project's dist folder (false).
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).
Type: String | RegExp | Array[...String|RegExp]
Default: /node_modules/
Valid picomatch pattern to exclude files from processing (used in
createFilter).
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).
Type: boolean
Default: true
Ignore the optimized output if it is larger than the original file.
Type: object
Default: undefined
Opt-in to create additional Avif and/or WebP versions of the processed images.
Type: object
Same as options.plugins.
Type: function
Default: (file: string) => `${file}.avif`
Like options.formatFilePath, but by default the
.avif/.webpextension is appended to the filepath.
The file argument holds the filepath as produced byoptions.formatFilePath.
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)
Type: boolean
Default: true
Skip optimizing the input if it did not change since the last run.
Type: string
Default: <packageRoot>/node_modules/.cache/vite-plugin-imagemin/<packageName>/
Choose the directory to use for caching.
- Relative paths will be relative to the Vite project's root directory.
- Absolute paths will be use as-is.
- Absent/non-string value will use the default location.
Type: string
Default: ''
Optional string to distinguish build configs and their caches.
The cache identifier is a hash of most used options including this key. Note: Because options like
formatFilePathandpluginscannot be stringified, they will have little or no influence on the hash key and its uniqueness.
Type: boolean
Default: false
Clears the cache folder before processing.
Type: string
Default: Vite's resolvedConfig.root or current working directory
Path to project root directory.
Type: boolean
Default: true
Whether to log process results to console.
Type: object | Logger
Default: Vite's resolvedConfig.logger
Logger object with callback functions on the
info,warnanderrorkeys.
Type: number
Default: 1000
Choose the size format to use in the logs:
1000displays size in kilobytes (kB)1024displays size in kibibytes (KiB)
| 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 |
| 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... 😉)
<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]
# Same for AVIF
RewriteCond %{HTTP_ACCEPT} image/avif
RewriteCond %{REQUEST_FILENAME}.avif -f
RewriteRule (.+)\.(jpe?g|png|gif)$ $1.avif [T=image/avif,E=REQUEST_image]
</IfModule>
<IfModule mod_headers.c>
# Tell the browser the response (for this image) varies
# depending on the "Accept" request header.
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
# Add file type MIME support
AddType image/webp .webp
AddType image/avif .avif
</IfModule>Adopted from answers given here.
