vite-plugin-image-to-webp

A very basic vite plugin which will, when building, find all .jpeg, .jpg, and .png images, convert them to .webp and then adjust the image urls accordingly.

Usage

vite.config.ts

import { imageToWebpPlugin } from 'vite-plugin-image-to-webp'

export default {
  plugins: [
    imageToWebpPlugin(),
  ]
}

Options

There are also a limited number of options for the image conversion.

vite.config.ts

import { imageToWebpPlugin } from 'vite-plugin-image-to-webp'

// default options
export default {
  plugins: [
    imageToWebpPlugin({
      imageFormats: ['jpg', 'jpeg', 'png'],
      webpQuality: {},
      destinationFolder: 'dist',
    }),
  ]
}

Logs

When building, logs show which images have been converted and their old and new file sizes:

Motivation

Even though webp is probably the best image format for the web, most images are exported as png or jpeg. With this plugin we can still use these image files and the build process will convert the files automatically.