Image

Displays images

Usage

Use the Image component to display pictures in your UI while keeping them accessible and performant. See the basic example above.

Always provide meaningful alt text (or alt="" for purely decorative images).
Set explicit width and height (via attributes or CSS) to prevent layout shifts.
Prefer responsive sources (for example, srcset/sizes) so images scale across breakpoints.
Lazy-load offscreen images to improve performance.
Provide a placeholder or fallback for loading and error states.
Optimize assets (compression, modern formats like WebP/AVIF) and choose appropriate object-fit and position for cropping/letterboxing.

import { Image } from "@elemnts-ui/react"
<Image src="..." />

Control an image’s vertical size with either element attributes or CSS. Pair width and height to reserve space and avoid layout shifts.

Make an image appear circular by applying a 50% border-radius (or a "rounded-full" utility).

The Image component accepts all standard HTML <img> attributes and forwards them to the underlying element.