Image

Mit der Image-Component lassen sich Bilder in der Benutzeroberfläche einbinden.GitHub Markdown

Grundlagen

Achte bei der Verwendung der Image-Component darauf, dass ...

die eingebundenen Bilder die Benutzeroberfläche sinnvoll ergänzen, indem sie zum Kontext und der allgemeinen Gestaltung passen.
Inhalt oder Zweck des Bildes mittels aussagekräftigem alt-Text beschrieben wird. Rein dekorative Bilder bekommen ein leeres alt-Attribut (alt="").
die Größenverhältnisse optimiert sind, um Ladezeiten und Performance zu verbessern.
Auflösung und Seitenverhältnis der gewählten Bilder angenehm und konsistent sind.
bei mangelndem Kontrast zum Hintergrund die Image-Component eine sichtbare Border erhält.
nach Möglichkeit kein Text im Bild verwendet wird, da dieser von Screenreadern nicht erfasst werden kann.

Verwende die Image-Component, um ...

dekorative Bilder anzuzeigen, die die Benutzeroberfläche visuell aufwerten und positive Emotionen bei den Usern auslösen können.
hilfreiche Bilder anzuzeigen, die den Kontext so unterstützen, dass Inhalte schneller erfasst und besser verstanden werden.