Images
An optimized image component with automatic image optimization, lazy loading, responsive sizing, and placeholder support. Built for performance and accessibility with support for various image formats and loading strategies.
Installation
Import
Usage
The Image component provides automatic image optimization, lazy loading, and responsive sizing. Use it for all images in your application to ensure optimal performance. Set priority=true for above-the-fold images that should load immediately. Use the sizes attribute with responsive images to help the browser choose the appropriate image size. Use blur placeholders for better perceived performance. Always provide meaningful alt text for accessibility.
Design Guidelines
Images should be properly sized and optimized for web delivery. Use responsive images with the sizes attribute to serve appropriately sized images on different devices. Provide blur placeholders for better user experience during loading. Ensure all images have descriptive alt text for accessibility. Use priority loading sparingly, only for critical above-the-fold images. Consider using object-fit and object-position for images that need to fill containers while maintaining aspect ratio.
Basic Usage
Simple image with src and alt text
Responsive Image
Image with responsive sizing using sizes attribute
With Placeholder
Image with blur placeholder while loading
Priority Loading
Image with priority loading for above-the-fold content
Lazy Loading
Image with lazy loading (default behavior)
With Object Fit
Image with custom object-fit styling
Unoptimized Image
Image without optimization (for external domains)
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
src | string | StaticImageData | - | The source URL or imported image data |
alt | string | - | Alternative text for the image (required for accessibility) |
width | number | - | The intrinsic width of the image in pixels |
height | number | - | The intrinsic height of the image in pixels |
sizes | string | undefined | Responsive image sizes attribute for responsive images |
priority | boolean | false | Whether to prioritize loading this image (for above-the-fold images) |
loading | "lazy" | "eager" | "lazy" | Loading strategy: lazy (default) or eager |
placeholder | "blur" | "empty" | "empty" | Placeholder type: blur (requires blurDataURL) or empty |
blurDataURL | string | undefined | Base64-encoded blur placeholder image data URL |
unoptimized | boolean | false | Whether to disable image optimization |
quality | number | 75 | Image quality (1-100) for optimized images |
objectFit | "contain" | "cover" | "fill" | "none" | "scale-down" | undefined | CSS object-fit property value |
objectPosition | string | undefined | CSS object-position property value |
className | string | — | Additional CSS classes to apply to the component |