Automating AVIF Generation with Webpack and Vite

Modern web performance relies heavily on next-generation image formats like AVIF, which offer superior compression compared to legacy formats like JPEG and PNG. This article explains how modern build tools, specifically Webpack and Vite, automate the conversion of standard source images into AVIF assets during compilation. By leveraging Node.js processing engines and dedicated asset plugins, developers can implement automated build pipelines that output optimized AVIF images without manual conversion workflows.

The Core Conversion Engine

Behind both Webpack and Vite, AVIF generation almost exclusively relies on Sharp, a high-performance Node.js image processing library built on libvips. Rather than re-encoding images manually, build plugins hook into the compilation lifecycle, pass source image buffers directly to Sharp, and output converted AVIF files along with their respective metadata.

Automating AVIF in Webpack

Webpack handles AVIF generation primarily through its loader pipeline and optimization plugins, the most standard being image-minimizer-webpack-plugin.

The Compilation Workflow

  1. Asset Interception: When a source file (e.g., .png or .jpg) is imported or referenced in a stylesheet, Webpack's Asset Modules capture the file path.
  2. Generator Hooks: Using image-minimizer-webpack-plugin configured with the Sharp adapter, Webpack registers a transformation rule. Instead of merely compressing the original format, the plugin exposes an AVIF generator function.
  3. Dual Output Generation: Webpack compiles the original asset while simultaneously emitting a transformed .avif sibling file into the output directory.

A typical configuration uses ImageMinimizerPlugin.sharpGenerate configured specifically for format: 'avif', setting quality metrics (typically between 50 and 80) and effort levels directly within webpack.config.js.

Automating AVIF in Vite

Vite approaches asset bundling differently, using native ES modules during development and Rollup for production builds. To automate AVIF generation, Vite developers typically use plugins like vite-imagetools or vite-plugin-image-optimizer.

The Query-Based Approach (vite-imagetools)

vite-imagetools provides direct, explicit control over image transformations using import directives:

  1. URL Directives: Developers import images using URL query parameters: 
    import avifImage from './hero.jpg?format=avif&quality=75';
  2. Rollup Resolution: Vite resolves the query, passes the file path to Sharp during the transform hook, generates the AVIF buffer, and replaces the import statement with the final resolved URL of the compiled asset.
  3. Picture Generation: The tool can also generate an entire metadata object (?as=picture) that yields AVIF along with original fallback sources automatically.

The Passive Build Approach (vite-plugin-image-optimizer)

For projects where modifying import paths is undesirable, plugins like vite-plugin-image-optimizer operate during the generateBundle hook:

  1. The plugin scans emitted image assets in the output chunk map.
  2. If an image matches configured target extensions, it produces an equivalent .avif file alongside the original file.
  3. The manifest is updated to ensure proper cache busting and deployment tracking.

Delivering Generated Assets

Automating AVIF generation solves the asset creation challenge, but delivery still requires graceful degradation for browsers without AVIF support. Both Webpack and Vite setups are designed to pair with the HTML <picture> element:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Optimized example" />
</picture>

By hooking conversion libraries into build lifecycle events, Webpack and Vite transform source-controlled JPEGs and PNGs into production-ready AVIF files automatically, ensuring smaller payload sizes and faster page loads without complicating developer workflows.