vite-plugin-png2webp

A Vite plugin to automatically convert PNG images to WebP format, supporting cached conversion and CSS url replacement.

Install

npm install vite-plugin-png2webp -D
# or
yarn add vite-plugin-png2webp -D
# or
pnpm add vite-plugin-png2webp -D

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from "vite";
import PngWebpPlugin from "vite-plugin-png2webp";

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

Then append ?webp to your imports:

import imageUrl from './assets/image.png?webp';

Or for CSS:

.bg {
  background: url('./assets/image.png');
}

(The plugin handles .css, .scss, and .vue blocks automatically)