Jedes inhaltliche Bild braucht einen Alt-Text. Rundungen setzt du mit u-rad--m — nicht als eigenen Wert am Element.
Alt-Text — das Wichtigste
Der Alt-Text beschreibt, was auf dem Bild zu sehen ist. Er wird gelesen von Screenreadern, von Suchmaschinen und angezeigt, wenn das Bild nicht lädt.
In Elementor: Bild auswählen → Mediathek öffnen → Feld Alternativtext. Er hängt am Bild in der Mediathek, du musst ihn also nur einmal pro Bild setzen.
| Schlecht | Gut |
|---|---|
| „Bild1“, „IMG_4821“ | „Zwei Mitarbeiterinnen im Beratungsgespräch“ |
| „Foto von unserem Team“ | „Das achtköpfige Team vor dem Bürogebäude“ |
| Stichwortliste für Google | ein Satz, der das Bild beschreibt |
Ausnahme: Rein dekorative Bilder — Hintergrundmuster, Trennlinien, Schmückelemente — bekommen einen leeren Alt-Text. Dann überspringen Screenreader sie, statt „Dekoration Punkt jpg“ vorzulesen.
Und: Wenn direkt neben dem Bild eine Bildunterschrift steht, die dasselbe sagt, ist der Alt-Text leer. Sonst hört man alles doppelt.
Rundungen
Nicht als direkter Wert, sondern per Klasse am Bild-Element:
u-rad--s · u-rad--m · u-rad--l
So folgen die Bilder derselben zentralen Rundungs-Einstellung wie Buttons und Karten. Ändert sich die, ziehen die Bilder mit.
Bilder in Karten
Nicht das Bild-Widget bekommt eine Klasse, sondern der Container darum: c-card__media. Das System rechnet dann die passende innere Rundung aus. Siehe Karten bauen.
Bildgröße vor dem Hochladen
Nicht Teil des Design Systems, aber der häufigste Grund für langsame Seiten: Handy-Fotos haben oft 4000 Pixel Breite und mehrere Megabyte. Für eine Website reichen fast immer 1600 Pixel Breite.
Ein zu großes Bild wird nicht besser dargestellt — nur langsamer geladen.