MoonUI

Optimized Image

PRO

High-performance image component with automatic optimization, lazy loading, responsive sizing, and advanced format support for optimal web performance.

Pro Features

Unlock advanced capabilities with the Pro version

Automatic Optimization

Compress and optimize images on-the-fly

CDN Integration

Serve images from global CDN edges

Format Conversion

Auto-convert to WebP/AVIF for supported browsers

Responsive Images

Generate multiple sizes for different devices

Lazy Loading

Load images only when they enter viewport

Blur Placeholders

Show beautiful placeholders while loading

Installation

Install via CLI

moonui add optimized-image

Usage

Pro Required
Optimized hero image
Click to enlarge

Examples

Responsive Image Gallery

PRO

Automatically optimized images for different screen sizes

Pro Required
Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4
Gallery image 5
Gallery image 6
Gallery image 7
Gallery image 8

Progressive Loading with Blur Placeholder

PRO

Show blur placeholder while loading high-quality images

Pro Required
Progressive loading demo

Loading HD Image...

Adaptive Format Selection

PRO

Automatically serve WebP/AVIF for supported browsers

Pro Required
Format: Auto
Size Saving: 40%
Adaptive format demo

Device-Specific Optimization

PRO

Serve different image sizes based on device type

Pro Required

Mobile

640px

Tablet

1024px

Desktop

1920px
Device optimized image

Art Direction with Picture Element

PRO

Different images for different breakpoints

Pro Required
Desktop optimized