EN | FR

Automatically optimize your images for faster load times and maximum performance.

BrowserUX Image Optimize is a configurable Vite plugin that generates .avif and .webp versions of your images before build, then intelligently compresses all JPG, PNG, SVG, AVIF and WebP files after build. With a simple configuration, you control quality, target formats, and exclusions. Perfect for reducing asset weight in production without visible quality loss, and boosting your Lighthouse performance scores.

• Project website
• Documentation
• Changelog

• 🖼️ Generates .avif and .webp from .jpg/.png in /public/img
• 🚀 Optimizes images in /dist/img (JPG, PNG, SVG, WebP, AVIF)
• ⚡ Parallel processing with Promise.all for fast builds
• 🔁 Skips pre-build generation when output is already up to date
• 🔍 Supports glob-based file exclusion
• 🔧 Configurable quality settings per format
• 📦 Optionally logs detailed per-file compression stats
• 🛠️ Powered by sharp and svgo

npm install vite-plugin-image-optimize --save-dev

import { defineConfig } from 'vite'
import imageOptimize from 'vite-plugin-image-optimize'

export default defineConfig({
  plugins: [
    imageOptimize({
      jpegQuality: 80,
      pngQuality: 80,
      webpQuality: 75,
      avifQuality: 50,
      webpEnable: true,
      avifEnable: true,
      exclude: [],
      logListings: true
    })
  ]
})

For detailed documentation, see docs/index.md.

• Introduction : what it is, why it exists, the two-phase approach
• Getting started : installation and configuration in vite.config
• How it works : pre-build generation, post-build compression, incremental builds
• HTML usage : serving AVIF/WebP with fallback using <picture>

• Options : complete options table with details and defaults
• Hooks : configResolved, buildStart, closeBundle
• Utilities : getAllImages, fileIsNewer, formatSize

• Compatibility : Node.js, Vite versions, image format browser support
• Contributing : report a bug, suggest an improvement, submit a PR

MIT © 2026 Effeilo