Image
Bild-Komponente
Minimales Beispiel für die Image-Komponente.
Codebeispiel
<Image src="~/assets/images/default.png" alt="Lorem ipsum" width={800} height={600} />Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| src | string | ImageMetadata | Bildquelle (lokaler Pfad oder importiertes Asset) | - |
| alt | string | Alternativtext für Barrierefreiheit (required) | - |
| width | number | Ausgabe-Breite in px (bei imageType/imageSize automatisch) | - |
| height | number | Ausgabe-Höhe in px (bei imageType/imageSize automatisch) | - |
| sizes | string | Responsive sizes-Attribut | - |
| widths | number[] | Explizite responsive Breakpoints | - |
| loading | 'lazy' | 'eager' | Ladeverhalten | lazy |
| decoding | 'async' | 'sync' | 'auto' | Bild-Decoding-Strategie | async |
| class | string | Zusätzliche CSS-Klassen | - |
| style | string | Inline-Styles | - |
| inferSize | boolean | Größe aus semantischem Typ ableiten | false |
| quality | number | Bildqualität (1–100) | 90 (prod) / 100 (dev) |
| fallbackSrc | string | JPEG-Fallback für Browser ohne WebP | - |
| progressive | boolean | Progressive-Fade-In beim Laden | false |
| imageType | 'hero' | 'thumb' | 'teaser' | 'icon' | 'logo' | Semantischer Bildtyp (validiert Namen & Dimensionen) | - |
| imageSize | 'full' | 'large' | 'medium' | 'small' | 'half' | 'mobile' | Größenvariante passend zu imageType | - |
| threshold | number | IntersectionObserver-Threshold für progressive Bilder | 0.1 |
Semantische Größen
imageType + imageSize
Width/Height werden aus dem semantischen Typ abgeleitet.
Codebeispiel
<Image src="~/assets/images/default.png" alt="Lorem ipsum" imageType="hero" imageSize="full"/>
Fallback & Progressive
WebP + JPEG Fallback
In Production wird WebP bevorzugt; optionales JPEG-Fallback für ältere Browser.
Codebeispiel
<Image src="~/assets/images/default.png" fallbackSrc="~/assets/images/default.png" alt="Lorem ipsum" progressive sizes="(max-width: 768px) 100vw, 600px" widths={[400, 600, 900]}/>