imageVariants

The imageVariants() Vite plugin. At the start of a production build it prepares the responsive AVIF and WebP files of the images of public/ that the source mentions and writes them into the client output, and it gives <Image> (of @shadow-js/dusk/components) the map of what was made, in both the browser and the server bundle. Nothing runs in vite dev, where the optimizer endpoint serves every image.

Add it next to dusk() in vite.config.ts. An image that is imported from the source (and so hashed by the bundler) is not prepared: it is served by the optimizer like any other image.

Import#

import { imageVariants } from "@shadow-js/dusk/vite";

Signature#

function imageVariants(options: ImageVariantsOptions = {}): Plugin

Parameters#

Returns#

A Vite plugin.

Throws#

• TypeError or RangeError for a bad option.

Examples#

// vite.config.ts
import { dusk, imageVariants } from "@shadow-js/dusk/vite";
export default { plugins: [dusk(), imageVariants({ widths: [480, 960, 1440] })] };