Image

Data Display

Enhanced image component with lazy loading, error boundaries, skeleton loading states, and aspect ratio preservation

Image

Flexible image component with variants for shape, fit and loading behavior.

Basic image

Render a responsive image by passing src, alt, width and height.

Sample image

Fit modes

Control how the image resizes in its box with the fit prop.

Cover

Cover

Contain

Contain

Shape & variants

Use the variant prop to change the border radius and style.

Rounded
Circular
Bordered

Loading behavior

Defer off-screen images with loading="lazy".

Lazy loaded

Usage Guidelines

When to Use

  • Optimized images
  • Lazy loading
  • Error boundaries

Accessibility

  • Alt text required
  • Decorative images hidden from AT

Performance

  • Native lazy loading
  • Skeleton loading prevents CLS

Common Mistakes

  • Missing alt text
  • Not optimizing large images

Frequently Asked Questions

Yes, Image supports native lazy loading with skeleton placeholder.
Yes, Image shows fallback on error and supports error boundaries.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Previous

IconButton

Next

Input