Vite Plugin Imagemin

0.6.1 verified Mon Apr 27 auth: no javascript

A Vite plugin for compressing image assets (PNG, JPEG, WebP, SVG, GIF) using imagemin. Version 0.6.1 is the current stable, released intermittently. It integrates seamlessly with Vite's build pipeline, offering lossy and lossless compression via configurable imagemin plugins. Key differentiators: supports Vite >=2, provides both lossy and lossless modes, and is actively maintained with TypeScript types included.

Common errors

error Error: Cannot find module 'vite-plugin-imagemin' ↓

cause Package not installed or wrong import path.

fix

Run 'npm install vite-plugin-imagemin --save-dev' and verify import path.

error TypeError: Cannot read properties of undefined (reading 'gifsicle') ↓

cause Missing dependency for the specified compression plugin.

fix

Install the required imagemin plugin, e.g., 'npm install imagemin-gifsicle --save-dev'.

error Error: 'default' is not exported by ... ↓

cause Using CommonJS require with ESM-only package.

fix

Switch to ES module import syntax or downgrade to v0.3.x.

Warnings

breaking ESM-only since v0.4.0; CommonJS require will throw an error. ↓

fix Use ES module imports (import).

gotcha Some imagemin plugins require native binaries and may fail to install on certain systems. ↓

fix Ensure build-essential tools are installed; fallback to lossless-only config.

gotcha Configuration keys are optional; if a key is missing, that format is not compressed. ↓

fix Explicitly configure only the formats you want to compress.

deprecated The 'imagemin' package was deprecated; this plugin may not receive updates for new imagemin versions. ↓

fix Consider alternative image optimization plugins (e.g., vite-plugin-image-optimizer).

Install

npm install vite-plugin-imagemin

yarn add vite-plugin-imagemin

pnpm add vite-plugin-imagemin

Imports

vitePluginImagemin

wrong

const vitePluginImagemin = require('vite-plugin-imagemin')

correct

import vitePluginImagemin from 'vite-plugin-imagemin'

Default export; ESM-only since v0.4.0. CommonJS require will fail.

type Options

wrong

import { Options } from 'vite-plugin-imagemin' (if not using type-only import)

correct

import type { Options } from 'vite-plugin-imagemin'

Options type is exported for TypeScript users; use type import to avoid runtime side-effects.

VitePluginImagemin
wrong
```
import { VitePluginImagemin } from 'vite-plugin-imagemin'
```
correct
```
import VitePluginImagemin from 'vite-plugin-imagemin'
```
The default export is the plugin function; using named import will result in undefined.

Quickstart

Configures vite-plugin-imagemin in vite.config.ts with compression settings for various image formats.

import { defineConfig } from 'vite';
import vitePluginImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    vitePluginImagemin({
      gifsicle: { optimizationLevel: 3 },
      optipng: { optimizationLevel: 7 },
      pngquant: { quality: [0.65, 0.8] },
      mozjpeg: { quality: 80 },
      svgo: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeEmptyAttrs', active: false },
        ],
      },
      webp: { quality: 75 },
    }),
  ],
});