OptimizedImage Component
Load images efficiently with lazy-loading and responsive features
The OptimizedImage component helps improve performance by implementing best practices for image loading. It supports lazy loading, responsive images, WebP format, and placeholder images for better user experience.
Live Examples
Laptop na biurku
Example 1 | With placeholder and srcset
Smartfon na stole
Example 2 | With placeholder and srcset
Słuchawki bezprzewodowe
Example 3 | With placeholder and srcset
Konsola do gier
Example 4 | With placeholder and srcset
Usage Examples
Podstawowe użycie
<OptimizedImage src="ścieżka/do/obrazka.jpg" alt="Opis obrazka" />
Z placeholderem
<OptimizedImage src="ścieżka/do/obrazka.jpg" alt="Opis obrazka" placeholder="ścieżka/do/małego-placeholdera.jpg" />
Responsywne obrazy
<OptimizedImage src="ścieżka/do/obrazka.jpg" alt="Opis obrazka" srcset="obraz-mały.jpg 400w, obraz-średni.jpg 800w, obraz-duży.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" />
Z obsługą WebP
<OptimizedImage src="ścieżka/do/obrazka.jpg" alt="Opis obrazka" srcWebp="ścieżka/do/obrazka.webp" srcsetWebp="obraz-mały.webp 400w, obraz-średni.webp 800w, obraz-duży.webp 1200w" />
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | undefined | Main image source URL |
| alt | string | '' | Alternative text for accessibility |
| className | string | '' | Additional CSS classes |
| placeholder | string | null | null | Low-resolution image to show while loading |
| lazy | boolean | true | Whether to use lazy loading |
| width | number | null | null | Image width |
| height | number | null | null | Image height |
| srcset | string | null | null | Responsive srcset attribute |
| sizes | string | null | null | Responsive sizes attribute |
| srcWebp | string | null | null | WebP format source URL |
| srcsetWebp | string | null | null | WebP format srcset attribute |
| format | string | 'auto' | Image format preference (auto, webp, avif) |
| autoSrcSet | boolean | false | Automatically generate srcset based on breakpoints |
| breakpoints | number[] | [640, 960, 1280, 1920] | Width breakpoints for auto srcset generation |
| rootMargin | string | '200px' | Root margin for intersection observer |
| fetchPriority | 'auto' | 'high' | 'low' | 'auto' | Browser hint for image loading priority |
| quality | number | 80 | Image quality (0-100) |
| generatePlaceholder | boolean | false | Auto-generate a low quality placeholder from source |
| loadHighResOnIdle | boolean | false | Load higher quality image when user is idle |
| highResQuality | number | 95 | Quality of high-resolution image (0-100) |
| idleTimeout | number | 3000 | Time in ms before user is considered idle |
Runed Integration
The OptimizedImage component leverages several utilities from the Runed library to enhance functionality while using Svelte 5 runes:
- IsMounted - Tracks component mounting state to prevent memory leaks and ensure proper lifecycle management.
- useIntersectionObserver - Efficiently implements lazy loading by only loading images when they enter the viewport.
- useEventListener - Manages image load and error events with proper cleanup.
- ElementSize - Reactively tracks the image container dimensions for responsive behavior.
- IsIdle - Detects when the user is idle to load higher quality versions of images.
Advanced Usage
Auto-generated responsive images
<OptimizedImage
src="https://example.com/image.jpg"
alt="Example image"
autoSrcSet={true}
breakpoints={[400, 800, 1200, 1600]}
sizes="(max-width: 768px) 100vw, 50vw"
/>
High quality on idle
<OptimizedImage
src="https://example.com/image.jpg"
alt="Example image"
loadHighResOnIdle={true}
highResQuality={95}
idleTimeout={2000}
/>
Auto-generated placeholders
<OptimizedImage
src="https://example.com/image.jpg"
alt="Example image"
generatePlaceholder={true}
/>
Format detection and prioritization
<OptimizedImage
src="https://example.com/image.jpg"
alt="Example image"
format="auto" {/* Will try AVIF, then WebP, then fallback */}
fetchPriority="high" {/* Prioritize this image */}
/>
Benefits
Performance
Lazy loading defers loading images until they enter the viewport, reducing initial page load time.
Responsive
Load appropriate image sizes based on viewport size, saving bandwidth on mobile devices.
User Experience
Placeholders provide visual feedback during loading, reducing content layout shifts.