Bilder und Alternativtext

Ein img-Element braucht zwei Attribute, um nützlich zu sein: src, das sagt, wo das Bild liegt, und alt, das sagt, was es zeigt, wenn man es nicht sehen kann.

Das Element img

Bilder werden nicht in der HTML-Datei gespeichert. Die Seite verweist auf sie, und der Browser lädt jedes als eigene Datei. Das Element <img> übernimmt diesen Verweis. Es ist ein leeres Element, hat also kein schließendes Tag, und sein Attribut src enthält die Adresse des Bildes, absolut oder relativ, genau wie das href eines Links. Bilder sind ersetzte Elemente: Der Browser ersetzt das Element durch das Bild, und das Bild bestimmt seine Größe, solange du nichts anderes angibst.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

Die Attribute width und height geben die Größe des Bildes in Pixeln an, ohne Einheit. Setz sie auf die echte Größe der Datei. Das HTML kommt meist vor den Bildern an. Ohne diese Zahlen setzt der Browser zuerst den Text und schiebt ihn dann nach unten, sobald ein Bild fertig geladen ist, was störend ist, wenn du schon angefangen hast zu lesen. Mit ihnen reserviert der Browser von Anfang an den richtigen Platz. Um ein Bild kleiner oder größer anzuzeigen, verwende CSS, statt diese Zahlen zu ändern.

Alternativtext schreiben

Das Attribut alt enthält eine Textalternative. Ein Screenreader liest sie vor, ein Browser zeigt sie an, wenn die Datei nicht lädt, und Suchmaschinen lesen sie, um das Bild zu verstehen. MDN schlägt einen einfachen Test vor: Was ginge verloren, wenn das Bild nicht erscheint? Schreib genau das, kurz. Bei einem Produktfoto beschreibst du, was man wissen muss, um es auszuwählen. Bei einem Diagramm nennst du die Aussage des Diagramms, etwa „Der Umsatz hat sich von Januar bis März verdreifacht“, statt „Balkendiagramm“.

• Fang nicht mit „Bild von“ oder „Foto von“ an. Screenreader sagen bereits an, dass es ein Bild ist.
• Dekorative Bilder, etwa eine wellige Trennlinie, bekommen ein leeres alt="". Dann überspringen Screenreader sie. alt ganz wegzulassen ist etwas anderes: Manche Screenreader lesen dann den Dateinamen vor.
• Ist ein Bild der einzige Inhalt eines Links, ist sein Alternativtext der Linktext. Beschreib also, wohin der Link führt (Startseite), nicht das Bild (Brot-Logo).
• Steht dieselbe Information schon im Text neben dem Bild, vermeidet alt="", dass sie zweimal gesagt wird.

Abbildungen und Bildunterschriften

Kommt ein Bild mit einer Bildunterschrift, umschließe beides mit <figure> und setz die Unterschrift in <figcaption>. So verbindet assistive Technik die Unterschrift mit dem Bild, was ein einfacher Absatz unter dem Bild nicht leistet. Bildunterschrift und Alternativtext haben verschiedene Aufgaben: Die Unterschrift liest jeder, während alt das Bild ersetzt, wenn es fehlt. Sie sollten sich nicht einfach wiederholen. Eine figure muss kein Bild enthalten. Auch ein Codebeispiel, eine Tabelle oder ein Gedicht kann eine Abbildung sein.

Formate, Data-URLs und eingebettetes SVG

Fotos sind meist JPEG oder WebP, flache Grafiken mit scharfen Kanten PNG, und Zeichnungen aus Formen oft SVG, ein Textformat, das in jeder Größe scharf bleibt. Ein kleines Bild kann sogar direkt als Data-URL in src stehen, die mit data:image/svg+xml, beginnt. Die Übungen unten nutzen das, damit nichts von einer anderen Website geladen wird. Ein SVG lässt sich auch direkt mit einem <svg>-Element ins HTML schreiben. Gib ihm role="img" und ein Kindelement <title>, damit Screenreader einen Namen dafür haben. Und schließlich sagt loading="lazy" bei Bildern weit unten auf einer langen Seite dem Browser, dass er warten soll, bis der Leser in ihre Nähe scrollt.

Noch eine Regel von MDN: Verwende nur Bilder, die du verwenden darfst. Bilder, die du online findest, sind urheberrechtlich geschützt, sofern ihre Lizenz nichts anderes sagt. Wer sein src ohne Erlaubnis auf den Server eines anderen zeigen lässt, betreibt Hotlinking und lässt diesen auch noch für den eigenen Datenverkehr bezahlen.