vite-plugin-image-optimizer

Install the plugin as a dev dependency using your preferred package manager.

Important: This plugin does not include sharp or svgo by default. You must install them manually as dev dependencies. This allows you to choose whether you want to optimize only SVGs (install svgo) or only raster images (install sharp).

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

# Manually install required engines
npm install sharp --save-dev
npm install svgo --save-dev

To avoid re-optimizing assets in consecutive builds, you can enable caching.

• cache: A boolean to enable or disable caching (default: false).
• cacheLocation: A String specifying the path to the cache directory. This is useful for CI/CD environments like GitHub Actions to speed up builds.

Control how optimization statistics are displayed in your terminal:

• logStats: A boolean (default: true) that logs optimization stats including file size difference (kB), percentage change, and total savings.
• ansiColors: A boolean (default: true) that enables/disables ANSI colors in the terminal output. Set to false if your shell does not support color text.

You can control which files are processed using these three options:

• test: A RegExp used to match files against. Default is /\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i.
• exclude: A String, RegExp, or Array<string> of files to skip. Using a RegExp allows you to exclude specific folders (e.g., exclude: /textures/).
• include: A String, RegExp, or Array<string> of files to process.

Note: include has higher precedence than test and exclude and will override them if provided.

You can pass custom configuration objects to Sharp.js for different image formats using the following keys:

• png: Accepts PngOptions.
• jpeg / jpg: Accepts JpegOptions.
• gif: Accepts GifOptions.
• tiff: Accepts TiffOptions.
• webp: Accepts WebpOptions.
• avif: Accepts AvifOptions.

Example for setting quality:

{ 
  png: { quality: 100 },
  webp: { lossless: true }
}

The svg option accepts an SVGOConfig object to pass custom settings to SVGO.

Default configuration:

{
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupNumericValues: false,
          removeViewBox: false,
          cleanupIDs: {
            minify: false,
            remove: false,
          },
          convertPathData: false,
        },
      },
    },
    'sortAttrs',
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
      },
    },
  ]
}

Import ViteImageOptimizer from vite-plugin-image-optimizer and add it to the plugins array in your vite.config.js or vite.config.ts file.

import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import { defineConfig } from 'vite';

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

To use the plugin, call ViteImageOptimizer() within your vite.config.ts file. It is a Vite plugin that optimizes images (SVG, PNG, JPEG, JPG, TIFF, GIF, WebP, AVIF) during the build process using svgo and sharp. By default, it only applies during the build phase and enforces post order.

import { defineConfig } from 'vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

export default defineConfig({
  plugins: [
    ViteImageOptimizer(),
  ],
});