I have a Vite build with the following vite.config.js configuration:
import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
build: {
inject: true
},
plugins: [
[injectHTML()],
ViteImageOptimizer({
dir: 'public/images',
outDir: 'dist/images',
png: {
quality: 80,
},
jpeg: {
quality: 80,
},
jpg: {
quality: 80,
},
webp: {
lossless: true,
},
}),
legacy({
targets: ['defaults', 'not IE 11']
}),
],
});
The vite-plugin-image-optimizer plugin helps compress images by taking them from public/images and sending them to dist/images, everything works fine.
I also need to convert these same images to the webp format in parallel and save them to the same path for use in the picture tag. Is it possible to configure this plugin in this way? I couldn't find anything in the documentation. If it's not possible to configure, is there a plugin that won't conflict and can convert images in parallel? Thank you in advance.