vite-plugin-to-webp

A Vite plugin that converts images in your public directory to WebP while the dev server runs. Drop a .jpg/.png/.gif/.svg into the directory and a .webp sibling appears next to it; edit the source and the .webp regenerates; delete the source and the .webp is cleaned up.

The plugin only runs during vite dev (serve command, development mode). The generated .webp files live alongside your sources, so commit them and reference them from your app as usual.

Install

npm install -D vite-plugin-to-webp

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import { vitePluginWebp } from 'vite-plugin-to-webp'

export default defineConfig({
  plugins: [vitePluginWebp()],
})

Options

vitePluginWebp({
  // Directory to watch, relative to the project root. Default: './public'
  dir: './public',
  // Forwarded to sharp().webp(). Defaults: quality 80, effort 6, alphaQuality 80.
  webpOptions: { quality: 90 },
})

Passing a plain string is also supported as a shorthand for dir:

vitePluginWebp('./src/assets')

Notes

• Converted formats: .jpg, .jpeg, .png, .gif, .svg. (BMP is not supported by sharp.)
• Existing .webp files are never overwritten by the startup sweep; only edits to a source image regenerate its .webp.
• Requires Node ^18.17 || ^20.3 || >=21 and Vite 5–8.