# Image

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

## Guidelines

# Grundlagen

## Best practices

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.

## Verwendung

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.