📦📦 unplugin Imagemin Picture compression


> [!IMPORTANT]
> Tips:
> 1.0 goals unplugin-imagemin is preparing to release version 1.0, which will be released after achieving the following goals

- [x] Support all node versions by re-modifying the wasm syntax of squoosh
- [x] remove sharp deps
- [x] support compress publicDir images
- [x] support css compress image
- [x] Supports full cache mode
- [x] Support Node 22 and more
- [x] Type options
- [ ] Supports farm, rsbuild, webpack, and other frameworks

> [!WARNING]
New features and stability, compatibility and performance features are constantly being updated
Recommended to use the latest version pnpm add unplugin-imagemin@latest -D

> [!WARNING]
Since Google squoosh no longer maintains the node direction, This fock came out and revised some compatibility issues. Details squoosh-next

$3

``bash
✨ : unplugin-imagemin
✔ : Process start with mode squoosh
✅ : [test1.png] [12.39 MB] -> [102.54 KB]
✔ : Process start with mode squoosh
✅ : [test2.png] [16.38 MB] -> [76.79 KB]
`

#### 🌈 Features

- 🍰 Support png jpeg webp avif svg tiff Format
- 🦾 High Performance based on squoosh
- ✨ Multiple picture formats can be configured
- 🪐 Compress the code at build time
- 😃 Caching Mechanism
- 🌈 You can convert different picture types at build time

Squoosh && Svgo

Unplugin-imagemin supports two compression tools

Squoosh is an image compression web app that reduces image sizes through numerous formats.
Squoosh with rust & wasm

Svgo Support compression of pictures in svg format

📦 Installation

`bash
pnpm add unplugin-imagemin@latest -D
`

#### support vite and rollup



Basic

`ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'unplugin-imagemin/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), imagemin()],
});
`








Advanced

`ts
iimport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'unplugin-imagemin/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
imagemin({
// default true
cache: false,
// Default configuration options for compressing different pictures
compress: {
jpg: {
quality: 10,
},
jpeg: {
quality: 10,
},
png: {
quality: 10,
},
webp: {
quality: 10,
},
},
conversion: [
{ from: 'jpeg', to: 'webp' },
{ from: 'png', to: 'webp' },
{ from: 'JPG', to: 'jpeg' },
],
}),
],
});

`




🌸 DefaultConfiguration

Squoosh DefaultConfiguration

DefaultConfiguration see DefaultConfiguration

Plugin property configuration see configuration

`typescript
export interface PluginOptions {
/**
* @description Picture compilation and conversion
* @default []
*/
conversion?: ConversionItemType[];
/**
* @description Whether to turn on caching
* @default true
*/
cache?: boolean;
/**
* @description Path to the cache file location
* @default ./node_modules/.cache/unplugin-imagemin/.unplugin-imagemin-cache
*/
cacheLocation?: string;
/**
* @description Compilation attribute
* @default CompressTypeOptions
*/
compress?: CompressTypeOptions;
}
``