![\"vite](\"https://vitejs.dev/logo.svg\"){kind=logo}
\n \n Vite Image Optimizer
\n\n Plugin for Vite to optimize all images assets using Sharp.js and SVGO at build time.\n
\n![\"node-current\"](\"https://img.shields.io/node/v/vite-plugin-image-optimizer\")
\n ![\"npm](\"https://img.shields.io/npm/dependency-version/vite-plugin-image-optimizer/peer/vite\")
\n ![\"npm](\"https://img.shields.io/bundlephobia/minzip/vite-plugin-image-optimizer?label=minfied\")
\n ![\"GitHub](\"https://img.shields.io/github/v/release/fatehak/vite-plugin-image-optimizer\")
\n ![\"licence\"](\"https://img.shields.io/npm/l/vite-plugin-image-optimizer\")
\n\n \n \n Plugin for Vite to optimize all images assets using Sharp.js and SVGO at build time.\n
\n\n \n \n \n \n\n\n## Features\n\n- Optimize SVG assets using [SVGO](https://github.com/svg/svgo) and pass custom configs.\n- Optimize Raster assets (png, jpeg, gif, tiff, webp, avif) using [Sharp.js](https://github.com/lovell/sharp) with the option to pass custom configs for each extension type.\n- Option to process all assets from your `public` directory defined in the bundler.\n- Configure `test`, `include`, and `exclude` to filter assets.\n- Caching support to avoid re-optimization (optional)\n- Skips processing assets if their optimized size is greater than their original size.\n- Log the optimization stats showing the before and after size difference, ratio and total savings (optional)\n \n\n## Motivation\n\nThis plugin is based on the awesome [image-minimizer-webpack-plugin](https://github.com/webpack-contrib/image-minimizer-webpack-plugin) for Webpack. I wanted to combine the\noptimization capabilities of\n**Sharp.js** and **SVGO** in a single package and I couldn't find a plugin\nfor Vite that could accomplish this. I initially thought of adding [squoosh](https://github.com/GoogleChromeLabs/squoosh) and [imagemin](https://github.com/imagemin/imagemin) support as well but\ndropped the idea since they are no\nlonger\nmaintained.\n\nIf you find the plugin useful, consider showing your support by giving a ⭐\n\nContributions are most welcome! We follow [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/)\n\n## Installation\n\nYou can add it as a dev dependency to any of the package managers (NPM, Yarn, PNPM)\n\nSupports `Vite >=3` and `Node >=14`\n\n```console\nnpm install vite-plugin-image-optimizer --save-dev\n```\n\n> **Warning**\n>\n> `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\n> `sharp`\n> if you only want to optimize svg assets using `svgo` and vice versa.\n>\n> ```console\n> npm install sharp --save-dev\n> ```\n>\n> ```console\n> npm install svgo --save-dev\n> ```\n\n## Usage\n\n```js\nimport { ViteImageOptimizer } from 'vite-plugin-image-optimizer';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig(() => {\n return {\n plugins: [\n ViteImageOptimizer({\n /* pass your config */\n }),\n ],\n };\n});\n```\n\n## Default Configuration\n\nThe default configuration is made for lossless compression of image assets.\n\n```js\nconst DEFAULT_OPTIONS = {\n logStats: true,\n ansiColors: true,\n test: /\\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i,\n exclude: undefined,\n include: undefined,\n includePublic: true,\n svg: {\n multipass: true,\n plugins: [\n {\n name: 'preset-default',\n params: {\n overrides: {\n cleanupNumericValues: false,\n cleanupIds: {\n minify: false,\n remove: false,\n },\n convertPathData: false,\n },\n },\n },\n 'sortAttrs',\n {\n name: 'addAttributesToSVGElement',\n params: {\n attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],\n },\n },\n ],\n },\n png: {\n // https://sharp.pixelplumbing.com/api-output#png\n quality: 100,\n },\n jpeg: {\n // https://sharp.pixelplumbing.com/api-output#jpeg\n quality: 100,\n },\n jpg: {\n // https://sharp.pixelplumbing.com/api-output#jpeg\n quality: 100,\n },\n tiff: {\n // https://sharp.pixelplumbing.com/api-output#tiff\n quality: 100,\n },\n // gif does not support lossless compression\n // https://sharp.pixelplumbing.com/api-output#gif\n gif: {},\n webp: {\n // https://sharp.pixelplumbing.com/api-output#webp\n lossless: true,\n },\n avif: {\n // https://sharp.pixelplumbing.com/api-output#avif\n lossless: true,\n },\n cache: false,\n cacheLocation: undefined,\n};\n```\n\n## Plugin Options\n\n- **[`test`](#test)**\n- **[`include`](#include)**\n- **[`exclude`](#exclude)**\n- **[`includePublic`](#includepublic)**\n- **[`logStats`](#logstats)**\n- **[`ansiColors`](#ansiColors)**\n- **[`svg`](#svg)**\n- **[`png`](#png)**\n- **[`jpeg`](#jpeg)**\n- **[`tiff`](#tiff)**\n- **[`gif`](#gif)**\n- **[`webp`](#webp)**\n- **[`avif`](#webp)**\n- **[`cache`](#cache)**\n- **[`cacheLocation`](#cache)**\n\n### `test`\n\nType: `RegExp`\n\nDefault: `/\\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i`\n\nTest to match files against.\n\n### `exclude`\n\nType: `String` | `RegExp` | `Array