📦📦 unplugin Imagemin Picture compression

✨✨ Continuous iterative development in testing

✨ : unplugin-imagemin
✔ : Process start with mode squoosh 
✅ : [test1.png] [12.39 MB] -> [423.54 KB]
✔ : Process start with mode squoosh  
✅ : [test2.png] [16.38 MB] -> [117.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 && Sharp

Unplugin-imagemin supports two compression modes

Sharp The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions.

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

✨Warning

Although squoosh has done a good job, there will be all kinds of problems in future node versions, so don't use squoosh mode for the time being.

Due to the loading problem of squoosh, unplugin-imagmin currently only supports versions below node 18.

Due to the rapid update of vite version and squoosh stop maintenance and other unstable factors

It is recommended that mode choose sharp.

🍰 Effect display

📦 Installation

npm i unplugin-imagemin@latest -D

yarn add unplugin-imagemin@latest -D

pnpm add unplugin-imagemin@latest -D

Currently only vite rollup is supported.

Basic

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

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({
      // Default mode squoosh. support squoosh and sharp
      mode: 'sharp',
      // Default configuration options for compressing different pictures
      compress: {
        jpg: {
          quality: 70,
        },
        jpeg: {
          quality: 70,
        },
        png: {
          quality: 70,
        },
        webp: {
          quality: 70,
        },
      },
      // The type of picture converted after the build
      conversion: [
        { from: 'png', to: 'jpeg' },
        { from: 'jpeg', to: 'webp' },
      ]
    })
  ]
});

🌸 Sharp DefaultConfiguration

jpeg

  jpeg: {
    // quality (Number) Image quality, an integer from 1 to 100 (optional, default is 80)
    // progressive (Boolean) Use progressive (interlaced) scanning (optional, default is false)
    // chromaSubsampling (String) Set to "4:4:4" to prevent chroma subsampling when quality <= 90 (optional, default is "4:2:0")
    // trellisQuantisation (Boolean) Apply trellis quantization, requires mozjpeg (optional, default is false)
    // overshootDeringing (Boolean) Apply overshoot deringing, requires mozjpeg (optional, default is false)
    // optimiseScans (Boolean) Optimize progressive scanning, force progressive scanning, requires mozjpeg (optional, default is false)
    // optimizeScans (Boolean) Alternative spelling for optimiseScans (optional, default is false)
    // optimiseCoding (Boolean) Optimize Huffman coding table (optional, default is true)
    // optimizeCoding (Boolean) Alternative spelling for optimiseCoding (optional, default is true)
    // quantisationTable (Number) Which quantization table to use, an integer from 0 to 8, requires mozjpeg (optional, default is 0)
    // quantizationTable (Number) Alternative spelling for quantisationTable, an integer from 0 to 8, requires mozjpeg (optional, default is 0)
    // force (Boolean) Force JPEG output, otherwise attempt to use input format (optional, default is true)
    quality: 75,
    progressive: false,
    chromaSubsampling: '4:4:4',
    trellisQuantisation: false,
    overshootDeringing: false,
    optimiseScans: false,
    optimizeScans: false,
    optimiseCoding: true,
    optimizeCoding: true,
    quantisationTable: 0,
    quantizationTable: 0,
    force: true,
  }

png

  png: {
    progressive: false,
    compressionLevel: 6,
    adaptiveFiltering: false,
    force: true,
    palette: true,
    quality: 75,
    effort: 5,
    bitdepth: 8,
    dither: 1,
  }

webp

  webp: {
    quality: 75,
    alphaQuality: 100,
    lossless: false,
    nearLossless: false,
    smartSubsample: false,
    effort: 4,
  },

tiff

  tiff: {
    quality: 80,
    compression: 'jpeg',
    predictor: 'horizontal',
    pyramid: false,
    bitdepth: 8,
    tile: false,
    tileHeight: 256,
    tileWidth: 256,
    xres: 1,
    yres: 1,
    resolutionUnit: 'inch',
  },

🌸 Squoosh DefaultConfiguration

OxiPNG Png format converts webp format by default, but if you do not specify the conversion attribute, the suffix will not be modified.

MozJPEG

    defaultEncoderOptions: {
      quality: 75,
      baseline: false,
      arithmetic: false,
      progressive: true,
      optimize_coding: true,
      smoothing: 0,
      color_space: 3 /*YCbCr*/,
      quant_table: 3,
      trellis_multipass: false,
      trellis_opt_zero: false,
      trellis_opt_table: false,
      trellis_loops: 1,
      auto_subsample: true,
      chroma_subsample: 2,
      separate_chroma_quality: false,
      chroma_quality: 75,
    },

WebP

    defaultEncoderOptions: {
      quality: 75,
      target_size: 0,
      target_PSNR: 0,
      method: 4,
      sns_strength: 50,
      filter_strength: 60,
      filter_sharpness: 0,
      filter_type: 1,
      partitions: 0,
      segments: 4,
      pass: 1,
      show_compressed: 0,
      preprocessing: 0,
      autofilter: 0,
      partition_limit: 0,
      alpha_compression: 1,
      alpha_filtering: 1,
      alpha_quality: 100,
      lossless: 0,
      exact: 0,
      image_hint: 0,
      emulate_jpeg_size: 0,
      thread_level: 0,
      low_memory: 0,
      near_lossless: 100,
      use_delta_palette: 0,
      use_sharp_yuv: 0,
    },

WebP2

    defaultEncoderOptions: {
      quality: 75,
      alpha_quality: 75,
      effort: 5,
      pass: 1,
      sns: 50,
      uv_mode: 0 /*UVMode.UVModeAuto*/,
      csp_type: 0 /*Csp.kYCoCg*/,
      error_diffusion: 0,
      use_random_matrix: false,
    },

JPEG-XL

    defaultEncoderOptions: {
      effort: 1,
      quality: 75,
      progressive: false,
      epf: -1,
      lossyPalette: false,
      decodingSpeedTier: 0,
      photonNoiseIso: 0,
      lossyModular: false,
    },

AVIF

    defaultEncoderOptions: {
      cqLevel: 33,
      cqAlphaLevel: -1,
      denoiseLevel: 0,
      tileColsLog2: 0,
      tileRowsLog2: 0,
      speed: 6,
      subsample: 1,
      chromaDeltaQ: false,
      sharpness: 0,
      tune: 0 /* AVIFTune.auto */,
    },

OxiPNG

    defaultEncoderOptions: {
      level: 2,
    },

use cache in node_modules
Various types of pictures （Svg is not supported）
Attribute compress test error
typescript Type hint

ErKeLost / unplugin-imagemin