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.

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

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" }]
    })]
})

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

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

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

set DEBUG=vite-plugin-squoosh

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

pnpm run build:ex