Installation

You can add it as a dev dependency to any of the package managers (NPM, Yarn, PNPM)

Supports Vite >=3 and Node >=14

npm install vite-plugin-image-compress --save-dev

Usage

import VitePluginImageCompress from "vite-plugin-image-compress"
import { defineConfig } from "vite"

export default defineConfig(() => {
  return {
    plugins: [
      VitePluginImageCompress({
        /* pass your config */
      })
    ]
  }
})

Default Configuration

The default configuration is made for lossless compression of image assets.

const DEFAULT_OPTIONS = {
  includePublic: true,
  png: {
    // https://sharp.pixelplumbing.com/api-output#png
    quality: 80
  },
  jpeg: {
    // https://sharp.pixelplumbing.com/api-output#jpeg
    quality: 80
  },
  jpg: {
    // https://sharp.pixelplumbing.com/api-output#jpeg
    quality: 80
  },
  tiff: {
    // https://sharp.pixelplumbing.com/api-output#tiff
    quality: 80
  },
  // gif does not support lossless compression
  // https://sharp.pixelplumbing.com/api-output#gif
  gif: {},
  webp: {
    // https://sharp.pixelplumbing.com/api-output#webp
    lossless: true,
    quality: 80
  },
  avif: {
    // https://sharp.pixelplumbing.com/api-output#avif
    lossless: true,
    quality: 80
  }
}