vite-plugin-image-optimizer weekly downloads statistics

<div align="center"> <a href="https://vitejs.dev/"> <img width="200" height="200" hspace="10" src="https://vitejs.dev/logo.svg" alt="vite logo" /> </a> <h1>Vite Image Optimizer</h1> <p> Plugin for <a href="https://vitejs.dev/">Vite</a> to optimize all images assets using <a href="https://github.com/lovell/sharp">Sharp.js</a> and <a href="https://github.com/svg/svgo">SVGO</a> at build time. </p> <img src="https://img.shields.io/node/v/vite-plugin-image-optimizer" alt="node-current" /> <img src="https://img.shields.io/npm/dependency-version/vite-plugin-image-optimizer/peer/vite" alt="npm peer dependency version" /> <img src="https://img.shields.io/bundlephobia/minzip/vite-plugin-image-optimizer?label=minfied" alt="npm bundle size"/> <img src="https://img.shields.io/github/v/release/fatehak/vite-plugin-image-optimizer" alt="GitHub release" /> <img src="https://img.shields.io/npm/l/vite-plugin-image-optimizer" alt="licence" /> </div> <p>&nbsp;</p>

Features

• Optimize SVG assets using SVGO and pass custom configs.
• Optimize Raster assets (png, jpeg, gif, tiff, webp, avif) using Sharp.js with the option to pass custom configs for each extension type.
• Option to process all assets from your public directory defined in the bundler.
• Configure test, include, and exclude to filter assets.
• Caching support to avoid re-optimization (optional)
• Skips processing assets if their optimized size is greater than their original size.
• Log the optimization stats showing the before and after size difference, ratio and total savings (optional)

Motivation

This plugin is based on the awesome image-minimizer-webpack-plugin for Webpack. I wanted to combine the optimization capabilities of Sharp.js and SVGO in a single package and I couldn't find a plugin for Vite that could accomplish this. I initially thought of adding squoosh and imagemin support as well but dropped the idea since they are no longer maintained.

If you find the plugin useful, consider showing your support by giving a ⭐

Contributions are most welcome! We follow conventional-commits

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-optimizer --save-dev

Warning

sharp and svgo don't come installed as part of the package. You will have to install them manually and add it as a dev dependency. This is a design decision so you can choose to skip installing sharp if you only want to optimize svg assets using svgo and vice versa.

npm install sharp --save-dev

npm install svgo --save-dev

Usage

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

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

Default Configuration

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

const DEFAULT_OPTIONS = {
  logStats: true,
  ansiColors: true,
  test: /\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i,
  exclude: undefined,
  include: undefined,
  includePublic: true,
  svg: {
    multipass: true,
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            cleanupNumericValues: false,
            cleanupIds: {
              minify: false,
              remove: false,
            },
            convertPathData: false,
          },
        },
      },
      'sortAttrs',
      {
        name: 'addAttributesToSVGElement',
        params: {
          attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
        },
      },
    ],
  },
  png: {
    // https://sharp.pixelplumbing.com/api-output#png
    quality: 100,
  },
  jpeg: {
    // https://sharp.pixelplumbing.com/api-output#jpeg
    quality: 100,
  },
  jpg: {
    // https://sharp.pixelplumbing.com/api-output#jpeg
    quality: 100,
  },
  tiff: {
    // https://sharp.pixelplumbing.com/api-output#tiff
    quality: 100,
  },
  // gif does not support lossless compression
  // https://sharp.pixelplumbing.com/api-output#gif
  gif: {},
  webp: {
    // https://sharp.pixelplumbing.com/api-output#webp
    lossless: true,
  },
  avif: {
    // https://sharp.pixelplumbing.com/api-output#avif
    lossless: true,
  },
  cache: false,
  cacheLocation: undefined,
};

Plugin Options

• test
• include
• exclude
• includePublic
• logStats
• ansiColors
• svg
• png
• jpeg
• tiff
• gif
• webp
• avif
• cache
• cacheLocation

test

Type: RegExp

Default: /\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i

Test to match files against.

exclude

Type: String | RegExp | Array<string>

Default: undefined

Files to exclude. RegExp can be used on the source path to exclude a particular folder (exclude: /textures/).

include

Type: String | RegExp | Array<string>

Default: undefined

Files to include. RegExp can be used on the source path to include a particular folder (include: /textures/).

Warning

This will override any options set in test and exclude and has a higher preference. Use this option if you want to include specific assets only.

includePublic

Type: boolean

Default: true…