Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/FatehAK/vite-plugin-image-optimizer
Optimize your image assets using Sharp.js and SVGO.
https://github.com/FatehAK/vite-plugin-image-optimizer
plugin vite
Last synced: 14 days ago
JSON representation
Optimize your image assets using Sharp.js and SVGO.
- Host: GitHub
- URL: https://github.com/FatehAK/vite-plugin-image-optimizer
- Owner: FatehAK
- License: mit
- Created: 2022-12-20T07:52:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T22:35:33.000Z (7 months ago)
- Last Synced: 2024-04-14T10:15:42.157Z (7 months ago)
- Topics: plugin, vite
- Language: TypeScript
- Homepage:
- Size: 1.04 MB
- Stars: 249
- Watchers: 2
- Forks: 12
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-image-optimizer - Optimize (compress) your image assets using Sharp.js and SVGO at build time. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-image-optimizer - Optimize (compress) your image assets using Sharp.js and SVGO at build time. (Plugins / Framework-agnostic Plugins)
README
Vite Image Optimizer
Plugin for Vite to optimize all images assets using Sharp.js and SVGO at build time.
## Features
- Optimize SVG assets using [SVGO](https://github.com/lovell/sharp) and pass custom configs.
- Optimize scalar 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.
- Option to process all assets from your `public` directory defined in the bundler.
- Configure `test`, `include`, and `exclude` to filter assets.
- Skip 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](https://github.com/webpack-contrib/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](https://github.com/GoogleChromeLabs/squoosh) and [imagemin](https://github.com/imagemin/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](https://www.conventionalcommits.org/en/v1.0.0/)
## Installation
You can add it as a dev dependency to any of the package managers (NPM, Yarn, PNPM)
Supports `Vite >=3` and `Node >=14`
```console
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.
>
> ```console
> npm install sharp --save-dev
> ```
>
> ```console
> npm install svgo --save-dev
> ```
## Usage
```js
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.
```js
const DEFAULT_OPTIONS = {
test: /\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i,
exclude: undefined,
include: undefined,
includePublic: true,
logStats: true,
ansiColors: true,
svg: {
multipass: true,
plugins: [
{
name: 'preset-default',
params: {
overrides: {
cleanupNumericValues: false,
removeViewBox: false, // https://github.com/svg/svgo/issues/1128
},
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`](#test)**
- **[`include`](#include)**
- **[`exclude`](#exclude)**
- **[`includePublic`](#includepublic)**
- **[`logStats`](#logstats)**
- **[`ansiColors`](#ansiColors)**
- **[`svg`](#svg)**
- **[`png`](#png)**
- **[`jpeg`](#jpeg)**
- **[`tiff`](#tiff)**
- **[`gif`](#gif)**
- **[`webp`](#webp)**
- **[`avif`](#webp)**
- **[`cache`](#cache)**
- **[`cacheLocation`](#cache)**
### `test`
Type: `RegExp`
Default: `/\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i`
Test to match files against.
### `exclude`
Type: `String` | `RegExp` | `Array`
Default: `undefined`
Files to exclude.
### `include`
Type: `String` | `RegExp` | `Array`
Default: `undefined`
Files to include.
> **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`
Include all assets within the public directory defined in Vite. When `true` it will recursively traverse the directory and optimize all the assets.
### `logStats`
Type: `boolean`
Default: `true`
Logs the optimization stats to terminal output with file size difference in kB, percent increase/decrease and total savings.
### `ansiColors`
Type: `boolean`
Default: `true`
Logs the optimization stats or errors with ansi colors in the terminal. Set it to `false` for shells that don't support color text.
### `svg`
Type: [`SVGOConfig`](https://github.com/svg/svgo/blob/main/lib/svgo.d.ts#L28)
Default:
```js
{
multipass: true,
plugins: [
{
name: 'preset-default',
params: {
overrides: {
cleanupNumericValues: false,
removeViewBox: false, // https://github.com/svg/svgo/issues/1128
},
cleanupIDs: {
minify: false,
remove: false,
},
convertPathData: false,
},
},
'sortAttrs',
{
name: 'addAttributesToSVGElement',
params: {
attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
},
},
]
}
```
Config object to pass to SVGO, you can override it with your custom config.
### `png`
Type: [`PngOptions`](https://github.com/lovell/sharp/blob/main/lib/index.d.ts#L1200)
Default:
```js
{
// https://sharp.pixelplumbing.com/api-output#png
quality: 100,
}
```
Config object to pass to Sharp.js for assets with `png` extension
### `jpeg`
Type: [`JpegOptions`](https://github.com/lovell/sharp/blob/main/lib/index.d.ts#L1060)
Default:
```js
{
// https://sharp.pixelplumbing.com/api-output#jpeg
quality: 100,
}
```
Config object to pass to Sharp.js for assets with `jpg` or `jpeg` extension
### `gif`
Type: [`GifOptions`](https://github.com/lovell/sharp/blob/main/lib/index.d.ts#L1156)
Default:
```js
{
// https://sharp.pixelplumbing.com/api-output#gif
}
```
Config object to pass to Sharp.js for assets with `gif` extension
### `tiff`
Type: [`TiffOptions`](https://github.com/lovell/sharp/blob/main/lib/index.d.ts#L1175)
Default:
```js
{
// https://sharp.pixelplumbing.com/api-output#tiff
quality: 100,
}
```
Config object to pass to Sharp.js for assets with `tiff` extension
### `webp`
Type: [`WebpOptions`](https://github.com/lovell/sharp/blob/main/lib/index.d.ts#L1113)
Default:
```js
{
// https://sharp.pixelplumbing.com/api-output#webp
lossless: true,
}
```
Config object to pass to Sharp.js for assets with `webp` extension
### `avif`
Type: [`AvifOptions`](https://github.com/lovell/sharp/blob/main/lib/index.d.ts#L1132)
Default:
```js
{
// https://sharp.pixelplumbing.com/api-output#avif
lossless: true,
}
```
Config object to pass to Sharp.js for assets with `avif` extension
### `cache`
Type: `boolean`
Default: `false`
Cache assets in `cacheLocation`. When enabled, reads and writes asset files with their hash suffix from the specified path.
### `cacheLocation`
Type: `String`
Default: `undefined`
Path to the cache directory. Can be used with GitHub Actions and other build servers that support cache directories to speed up consecutive builds.
## License
[MIT](./LICENSE)