Image

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Img, Thumbnail

Beschreibung: Die Image-Komponente stellt Bilder dar und unterstützt responsive Darstellung mit verschiedenen Auflösungen, Pixeldichten und Dateiformaten. Sie bietet optimiertes Laden durch Lazy Loading und gewährleistet volle Barrierefreiheit mit Alternativtexten.

Beispiel

Grunddarstellung eines Bildes mit erforderlichem Alternativtext:

<KolImage _alt="Beispielbild" _loading="lazy" _src="/assets/sample-image.png" />

Barrierefreiheit

• Alternativtext erforderlich: Das Attribut _alt ist verpflichtend und wird von Screenreadern vorgelesen. Bei rein dekorativen Bildern kann es leer (_alt="") sein, wird dann aber von assistiven Technologien ignoriert.
• Fallback bei fehlenden Bildern: Der Alternativtext wird von Browsern angezeigt, wenn das Bild nicht geladen werden kann oder nicht verfügbar ist.
• Semantil korrekt: Die Komponente nutzt native HTML5-<img>-Elemente und unterstützt alle Standard-Bildformate und Browser-Features.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Aussagekräftige Alternativtexte: Schreiben Sie prägnante Beschreibungen, die den Inhalt und Zweck des Bildes vermitteln. Vermeiden Sie „Bild von..." oder generische Beschreibungen.
• Decorative Bilder: Lassen Sie _alt leer für rein dekorative Bilder, die keine semantische Information tragen.
• Responsive Bilder: Nutzen Sie _srcset und _sizes für verschiedene Geräteauflösungen und Pixeldichten, um Bandbreite zu sparen und scharfe Bilder auf hochauflösenden Displays zu liefern.
• Moderne Dateiformate: Verwenden Sie _srcset mit verschiedenen Dateiformaten (z. B. WebP für moderne Browser, JPEG als Fallback), um Performance zu optimieren.
• Lazy Loading nutzen: Setzen Sie _loading="lazy" für Bilder außerhalb des initialen Sichtbereichs, um die Seitenladeleistung zu verbessern.
• Eager Loading für kritische Bilder: Nutzen Sie _loading="eager" nur für Bilder im sichtbaren Bereich (z. B. Logo, Hero-Bild), die sofort geladen werden sollen.

Anwendungsfälle

• Produktbilder und Galerien in E-Commerce-Anwendungen
• Benutzerpfotos und Avatare (in Verbindung mit anderen Komponenten)
• Illustrationen und Icons zur Veranschaulichung von Inhalten
• Hero-Bilder und Bannergrafiken auf Landingpages
• Responsive Bilder in Artikeln, Blogeinträgen oder Dokumentationen
• Hintergrundbilder und Markenelemente

FAQ

Wann sollte ich _srcset verwenden? Nutzen Sie _srcset, wenn Sie dasselbe Bild in verschiedenen Auflösungen oder Größen bereitstellen möchten. Dadurch können Browser die beste Variante basierend auf Geräteauflösung und Betrachtungsgröße auswählen.

Was ist der Unterschied zwischen _loading="eager" und _loading="lazy"? eager lädt das Bild sofort beim Laden der Seite. lazy verzögert das Laden bis kurz bevor das Bild im Sichtbereich erscheint. lazy ist Standard und verbessert die Seitenladeleistung.

Kann ich beliebige Bildformate verwenden? Ja, alle gängigen Formate werden unterstützt (PNG, JPEG, WebP, SVG, GIF usw.). Verwenden Sie _srcset mit verschiedenen Formaten für maximale Browser-Kompatibilität und Performance.

Konstruktion / Technik

Playground

<KolImage _alt="Beispielbild" _loading="lazy" _src="/assets/sample-image.png" />

Funktionalitäten (mit Code)

Bildquelle

Die Bildquelle wird über das erforderliche Attribut _src gesetzt. Dies ist die Fallback-URL, die verwendet wird, wenn _srcset nicht unterstützt wird oder keine passende Variante vorhanden ist.

<KolImage _alt="Beispielbild" _loading="lazy" _src="/assets/sample-image.png" />

Alternativtext

Das erforderliche Attribut _alt bietet eine Textbeschreibung oder Alternative für das Bild. Bei dekorativen Bildern kann es leer sein.

<KolImage _alt="Beispielbildbeschreibung" _loading="lazy" _src="/assets/sample-image.png" />

Responsive Bilder mit Srcset und Sizes

Mit _srcset können verschiedene Bildversionen für unterschiedliche Auflösungen, Pixeldichten und Dateiformate angegeben werden. Das Attribut _sizes hilft dem Browser zu verstehen, welche Breiten das Bild auf verschiedenen Viewport-Größen haben wird.

<KolImage _alt="Beispielbild" _loading="lazy" _sizes="(max-width: 600px) 100vw, 50vw" _src="/assets/sample-image.png" _srcset="/assets/image-small.png 600w, /assets/image-large.png 1200w" />

Ladeverhalten

Das Attribut _loading steuert, wann das Bild vom Browser geladen wird. lazy ist der Standard und verbessert die Performance, eager sollte nur für Bilder im sichtbaren Bereich verwendet werden.

<KolImage _alt="Beispielbild" _loading="lazy" _src="/assets/sample-image.png" />

Verfügbare Werte:

• lazy: Ladeverschiebung bis zum Erreichen des Sichtbereichs (Standard)
• eager: Sofortiges Laden beim Seiteneintritt

API

Overview

The Image component renders an image with support for responsive loading via srcset and sizes, lazy loading, and accessible alternative text.

Properties

Property	Attribute	Description	Type	Default
_alt (required)	_alt	Sets the alternative text of the image.	string	undefined
_loading	_loading	Defines the loading mode for the image.	"eager" | "lazy" | undefined	undefined
_sizes	_sizes	Defines the image sizes for different screen resolutions, supporting _srcset.	string | undefined	undefined
_src (required)	_src	Sets the image src attribute to the given string.	string	undefined
_srcset	_srcset	Sets a list of source URLs with widths of the images.	string | undefined	undefined

---