Image
Display optimized images with captions and zoom functionality
The Image component displays optimized images with optional captions and zoom-on-click functionality.
Usage
mdx
1<Image 2 src="/images/screenshot.png" 3 alt="Application screenshot"4 caption="Dashboard overview"5/>Live Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | Image source URL |
alt | string | required | Accessible alt text |
caption | string | - | Caption displayed below image |
width | number | 1200 | Image width |
height | number | 675 | Image height |
zoom | boolean | true | Enable click-to-zoom |
Features
Zoom Functionality
Info
Click on any image to view it in a full-screen lightbox. A zoom icon appears on hover.
Captions
Add context to images with the caption prop. Captions are styled italicized and centered below the image.
Optimization
Images are automatically optimized using optimized images for:
- Lazy loading
- Responsive sizing
- Modern formats (WebP)
- Caching
Best Practices
- Always provide descriptive
alttext for accessibility - Use appropriate
widthandheightto prevent layout shift - Add
captionfor complex diagrams or screenshots that need explanation - Set
zoom={false}for decorative or small images