Image

Image refers to the built-in <Image/> component that comes with Elegance.

It automatically handles compession and optimization of images from your public directory based on what sizes are used.

Usage

First, import Image from elegance-js.

Image is a regular component, so it can be used in both JSX and regular TS.

Example:

<Image width={30} height={30} src={"/profile-picture.jpg"}>

Elegance during the pre-processing step will transform Image elements into <picture> elements with different <source> elements.

Most common image formats are supported.

Props

Image accepts all the normal props of the <img/> element, alongside an unoptimized prop which opts out of optimization. src, width and height are all required props.

Default Configuration

You can configure the optimization options within the elegance.config.ts config.

The default values are:

export const defaultImageConfig: ImageConfig = {
    optimize: true,
    formats: ["webp"],
    quality: { webp: 75, png: 80, jpeg: 80 },
    viewports: [320, 375, 414, 768, 1024, 1280, 1440, 1920, 2560],
    maxVariantsPerImage: 6,
    outDir: "/images",
};