Bilder

Bilder sind nach Text der häufigste Inhalt im Web. Das Element dafür ist img, und es ist ein Void-Element: kein Inhalt, kein schließender Tag.

01 / 04src und alt

<img
  src="/lernen/media/demo-600.jpg"
  alt="Rotes Demobild mit der Aufschrift Demo 600 x 338"
  width="600"
  height="338"
>

src ist die Quelle, also der Pfad zur Bilddatei. Es gelten genau die Regeln aus der Pfad-Lektion: absolut ab Wurzel, relativ zum Dokument oder mit vollständiger Adresse nach außen.

Das Bild steckt damit nicht in deiner HTML-Datei, es ist eine zweite Datei, die der Browser dazuholt. Im Reiter „Netzwerk“ stehen deshalb zwei Zeilen: das Dokument selbst und /lernen/media/demo-600.jpg, dazu die Zeit, die das gedauert hat. In diesem Abschnitt lohnt sich der Blick dorthin öfter, denn ab jetzt holt der Browser für eine Seite mehr als nur das Dokument.

alt ist die Textalternative. Sie beschreibt, was auf dem Bild zu sehen ist, für alle, die es nicht sehen: Screenreader-Nutzer, Menschen mit langsamer Verbindung, Suchmaschinen.

width und height geben die Maße der Bilddatei in Pixeln an. Ohne CSS erscheint das Bild genau so groß. Ändere die beiden Zahlen im Beispiel testweise, dann siehst du es sofort. (In den Beispielen weiter unten stehen bewusst kleinere Zahlen als die echten 600 mal 338, sonst steht das Bild breiter da, als die Seite hier Platz hat. Auf einer echten Seite trägst du die Maße der Datei ein.) Sobald CSS eine Breite setzt, gewinnt allerdings CSS, und die Angaben bleiben trotzdem stehen: Der Browser rechnet daraus schon vor dem Laden das Seitenverhältnis aus und reserviert den Platz. Ohne sie springt der Text nach unten, sobald das Bild eintrifft, und das trifft immer den Moment, in dem jemand gerade klicken wollte.

02 / 04Warum alt Pflicht ist

<img src="/gibt-es-nicht.jpg" alt="Ein Teller Linsensuppe mit Petersilie" width="300" height="200">

<img src="/gibt-es-auch-nicht.jpg" width="300" height="200">

Beide Pfade zeigen ins Leere. Beim oberen Bild siehst du trotzdem, worum es ging, beim unteren nicht.

Im Reiter „Netzwerk“ steht für jeden der beiden eine eigene Zeile mit dem Vermerk „fehlgeschlagen“, und die Zahl am Reiter ist rot. Ein Bild, das nicht ankommt, verschwindet also nicht spurlos.

Genau das erlebt ein Screenreader-Nutzer bei jedem Bild. Fehlt das alt-Attribut komplett, liest die Software oft den Dateinamen vor, und „img underscore 4711 punkt jay peg“ hilft niemandem.

Was in einen guten alt-Text gehört: das, was ein Sehender aus dem Bild mitnimmt, in einem knappen Satz. Was nicht hineingehört: „Bild von“ oder „Foto:“ am Anfang, denn dass es ein Bild ist, sagt der Screenreader ohnehin. Auch keine Schlagwörter für Suchmaschinen, das erkennen die seit Jahren und werten es ab.

Eine Hilfe beim Formulieren: Stell dir vor, du liest jemandem den Text am Telefon vor. Was würdest du an dieser Stelle über das Bild sagen? Das ist der alt-Text.

03 / 04Deko bekommt einen leeren alt

<p>Das erste Bild trägt Information, das zweite ist reine Zierde:</p>

<img
  src="/lernen/media/demo-600.jpg"
  alt="Rotes Demobild mit der Aufschrift Demo 600 x 338"
  width="300"
  height="169"
>

<img src="/lernen/media/demo-600.jpg" alt="" width="300" height="169">

Nicht jedes Bild trägt Information. Trennlinien, Verzierungen, ein Hintergrundmuster, ein Icon neben einem Text, der schon alles sagt: Solche Bilder beschreibt man nicht, man blendet sie aus.

Dafür steht alt="" mit leerem Wert. Das ist ein Unterschied zum Weglassen: alt="" sagt ausdrücklich „hier gibt es nichts zu berichten“, und der Screenreader überspringt das Bild. Ohne alt weiß er nichts und liest den Dateinamen.

Die Entscheidung fällt so: Ginge Information verloren, wenn man das Bild ersatzlos entfernt? Wenn ja, braucht es eine Beschreibung. Wenn nein, ist es Deko.

04 / 04Ladeverhalten

Ein Attribut noch, das nichts kostet und viel bringt: loading="lazy". Damit lädt der Browser ein Bild erst, wenn es in die Nähe des sichtbaren Bereichs kommt. Bei einer langen Seite mit zwanzig Bildern spart das den Großteil der Ladezeit.

Eine Ausnahme: Das große Bild ganz oben, das man sofort sieht, bekommt kein lazy. Sonst verzögerst du genau das Bild, auf das alle warten.

<!-- Das obere Bild sieht man sofort, es lädt normal.
     Alles Weitere darunter bekommt loading="lazy". -->
<img
  src="/lernen/media/demo-600.jpg"
  alt="Rotes Demobild mit der Aufschrift Demo 600 x 338"
  width="300"
  height="169"
>

<img
  src="/lernen/media/demo-1200.jpg"
  alt="Grünes Demobild mit der Aufschrift Demo 1200 x 675"
  width="300"
  height="169"
  loading="lazy"
>

Genau so sieht das aus: Das obere Bild ohne loading, alles darunter mit. Im Reiter „Netzwerk“ stehen hier trotzdem beide, und das ist kein Fehler, sondern die Regel selbst: Die zwei Bilder sind gleichzeitig zu sehen, also gibt es nichts aufzuschieben. lazy spart nur, was noch außerhalb liegt.

Wenn du es sehen willst, schreib im Editor ein paar Absätze zwischen die beiden Bilder, so viele, dass das untere nicht mehr zu sehen ist. Dann steht im Reiter „Netzwerk“ nur noch eine Bildzeile, und die zweite kommt dazu, sobald du in der Seite nach unten scrollst. Bei zwanzig Bildern und einer langsamen Verbindung ist genau das der Unterschied.