UI
Image
Image component with LQIP/palette placeholder
Image
An image component with LQIP (blur-up) or palette color placeholder support. Provides automatic srcSet generation and fade transition on load.
Basic Usage
import { Image } from '@01.software/sdk/ui/image'
function ProductCard({ product }) {
return (
<Image
image={product.thumbnail}
placeholder="blur"
sizes="(max-width: 768px) 100vw, 50vw"
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
image | ImageData | — | Payload image document (required) |
width | number | — | CSS pixel width |
dpr | number | 1 | Device pixel ratio |
placeholder | 'blur' | 'color' | 'none' | 'blur' | Placeholder strategy (defaults to 'none' when imageRendering is pixelated/crisp-edges) |
className | string | — | Container CSS class |
style | CSSProperties | — | Container style |
imgClassName | string | — | <img> CSS class |
imgStyle | CSSProperties | — | <img> style |
sizes | string | — | HTML sizes attribute |
loading | 'lazy' | 'eager' | 'lazy' | Loading strategy (forced to 'eager' when priority is true) |
onLoad | () => void | — | Image load complete callback |
objectFit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' | 'cover' | object-fit |
priority | boolean | false | For LCP images. Sets loading="eager" + fetchPriority="high" |
fill | boolean | false | Fill parent container (removes aspect ratio, sets width/height: 100%) |
imageRendering | 'auto' | 'pixelated' | 'crisp-edges' | — | CSS image-rendering (for pixel art, etc.) |
Priority
Set priority on LCP (Largest Contentful Paint) images for immediate loading.
<Image image={hero.thumbnail} priority />Automatically applies loading="eager" and fetchPriority="high". All images use decoding="async" to avoid render-blocking.
Fill Mode
Fills the parent element's dimensions. Aspect ratio is removed.
<div style={{ position: 'relative', height: 400 }}>
<Image image={banner} fill />
</div>Pixel Art (imageRendering)
For images that need nearest-neighbor rendering (no interpolation). Placeholder defaults to 'none' automatically.
<Image image={icon} imageRendering="pixelated" />Placeholder Strategies
blur: Overlays a blurred LQIP image, fades out on load. Falls back to palette color if LQIP is unavailable.color: Uses palette color as background.none: No placeholder.
Image Utilities
Utility functions for image processing. Can be used independently without the Image component.
import {
getImageUrl,
getImageSrcSet,
getImageLqip,
getImagePalette,
getImagePlaceholderStyle,
IMAGE_SIZES,
} from '@01.software/sdk'| Function | Returns | Description |
|---|---|---|
getImageUrl(image, displayWidth, dpr?) | string | Select optimal image URL for display width |
getImageSrcSet(image) | string | Generate HTML srcset attribute string |
getImageLqip(image) | string | undefined | LQIP data URL |
getImagePalette(image) | ImagePalette | undefined | 6-color palette (vibrant, muted, darkVibrant, darkMuted, lightVibrant, lightMuted) |
getImagePlaceholderStyle(image, options?) | Record<string, string> | Inline CSS styles for placeholder |
IMAGE_SIZES | [384, 768, 1536] | Pre-generated image size breakpoints |
Usage Example
// Select optimal URL
const url = getImageUrl(product.thumbnail, 400, 2) // 400px @ 2x
// Custom <img> tag
<img
src={getImageUrl(image, 768)}
srcSet={getImageSrcSet(image)}
sizes="(max-width: 768px) 100vw, 50vw"
style={getImagePlaceholderStyle(image, { type: 'color' })}
/>