vite-plugin-squoosh

a build plugin for Vite that uses the squoosh library to compress images. It offers persistent caching and parallel processing, and supports a range of image formats. This can help improve performance and reduce image size in web applications.

Install

Node: version 16.x
Vite: version >=2.x
vite-plugin-squoosh: see on NPM

Usage

Using NPM:

npm install --save-dev vite-plugin-squoosh

Using yarn:

yarn add -D vite-plugin-squoosh

Vite configuration in vite.config.ts

import squooshPlugin from 'vite-plugin-squoosh';

export default () => ({
    plugins: [squooshPlugin({
        // Specify codec options.
        codecs: {
            mozjpeg: { quality: 30, smoothing: 1 },
            webp: { quality: 25 },
            avif: { cqLevel: 20, sharpness: 1 },
            jxl: { quality: 30 },
            wp2: { quality: 40 },
            oxipng: { level: 3 }
        },
        // Do not encode .wp2 and .webp files.
        exclude: /.(wp2|webp)$/,
        // Encode png to webp.
        encodeTo: [{ from: /.png$/, to: "webp" }]
    })]
})

Plugin options

The squooshPlugin function takes an options object as its only argument. The possible properties of this options object are:

Option	Description
`cacheLevel`	A string that determines how aggressively to use caching to speed up processing. This can be `"None"`, `"PerSession"`, or `"Persistent"`.
`cachePath`	A string that specifies the path to the cache file on the filesystem.
`codecs`	An object that specifies the codecs to use for encoding the images.
`coreCount`	An optional integer that specifies the number of CPU cores to use for processing the images.
`exclude`	An array of glob patterns that specify which files to exclude from processing.
`includeDirs`	An array of strings or objects that specify additional directories to search for images to process.
`silent`	A boolean that specifies whether to suppress logging output from the plugin.

Build locally

Pnpm (version 7.x) is a requirement.

npm install -g pnpm

Next, run 'install' with pnpm. This will install all the right dependencies for the workspaces.

pnpm install

(Optional)

To see debug logs, set the DEBUG environment variable to vite-plugin-squoosh.

set DEBUG=vite-plugin-squoosh

Run examples

This will run all the examples in the packages/examples/ directory.

pnpm run build:ex