📦📦 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
• [ ] Type options
• [ ] start dev action
• [ ] add query search
• [x] support css compress image
• [ ] Supports full cache mode
• [x] Support Node 22 and more
• [ ] 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

✨✨ Continuous iterative development in testing

✨ : 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 modes

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

🍰 Effect display

https://github.com/unplugin/unplugin-imagemin/assets/66500121/49169b22-7f5b-4cdc-b023-302003b15522

📦 Installation

pnpm add unplugin-imagemin@latest -D

support vite and rollup.

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()],
});

iimport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'unplugin-imagemin/vite';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    imagemin({
      // 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

export interface PluginOptions {
  /**
   * @description Picture compilation and conversion
   * @default []
   */
  conversion?: ConversionItemType[];
  /**
   * @description Whether to turn on caching
   * @default true
   */
  cache?: boolean;
  /**
   * @description Cache folder directory read
   * @default node_modules/unplugin-imagemin/cache
   *
   */
  cacheDir?: string;
  /**
   * @description Compilation attribute
   * @default CompressTypeOptions
   */
  compress?: CompressTypeOptions;
}