Optimized Image
Image component with lazy loading, blur placeholder, graceful fallback and a built-in lightbox. Plug in a `loader` to route every request through your own image service and get a real responsive srcSet.
Pro features
What the Pro version adds to this component.
Lightbox Preview
Open images in a built-in zoomable lightbox on click
Graceful Fallback
Show a fallback image when the source fails to load
Hover Controls
Zoom, download and image-info controls on hover
Bring Your Own Loader
Route every request through your image service — Cloudinary, ImageKit, /_next/image or a custom endpoint
Responsive Images
Generate a srcSet from the width prop (0.5x / 1x / 1.5x / 2x) once a loader is supplied
Lazy Loading
Load images only when they enter the viewport
Blur Placeholder
Show a blur skeleton placeholder while the image loads
Installation
Install via CLI
npx @moontra/moonui-cli add optimized-imageUsage
Examples
Responsive Image Gallery
Automatically optimized images for different screen sizes
Progressive Loading with Blur Placeholder
Show blur placeholder while loading high-quality images
Custom Image Loader (format & quality)
`format` and `quality` are inert on their own — they take effect only through a `loader`, which is the function that actually builds the URL. Pick a format below and watch the generated URL change.
Device-Specific Optimization
With a `loader` in place, `width` seeds a real srcSet (0.5x / 1x / 1.5x / 2x) and `sizes` tells the browser which candidate to pick. Without a loader no srcSet is emitted at all — pass `srcSet` yourself instead.