Das img-Element bindet ein Bild ein. Es ist ein leeres Element ohne schließendes Tag und braucht zwei Attribute zwingend: src für die Quelle und alt für den Alternativtext.

Die vollständige Form

<img src="/bilder/2026/diagramm.webp"
     alt="Umsatz je Quartal, Anstieg von 12 auf 19 Prozent"
     width="800" height="450"
     loading="lazy">

alt beschreibt, was das Bild an dieser Stelle leistet – nicht, was darauf zu sehen ist. Ein rein dekoratives Bild bekommt alt=""; weglassen darf man das Attribut auch dann nicht, sonst liest der Screenreader den Dateinamen vor.

width und height sind keine Gestaltungsangaben, sondern das Seitenverhältnis. Der Browser reserviert damit den Platz, bevor die Datei da ist – ohne sie springt das Layout beim Laden. Die tatsächliche Darstellungsgröße kommt weiterhin aus CSS.

loading="lazy" lädt das Bild erst, wenn es in Sichtweite kommt. Für das erste sichtbare Bild einer Seite ist das falsch – dort verzögert es genau das, worauf gewartet wird.

Verschiedene Größen ausliefern

<img src="/bilder/foto-800.jpg"
     srcset="/bilder/foto-400.jpg 400w,
             /bilder/foto-800.jpg 800w,
             /bilder/foto-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     alt="Beschreibung">

Der Browser wählt selbst – er kennt Bildschirmbreite, Pixeldichte und Zoomstufe. Das src-Attribut bleibt als Rückfall stehen.

Soll sich der Bildausschnitt ändern oder ein moderneres Dateiformat mit Rückfall angeboten werden, kommt stattdessen das picture-Element zum Einsatz.

Bild mit Bildunterschrift

<figure>
  <img src="/bilder/aufbau.svg" alt="Aufbau eines HTML-Dokuments">
  <figcaption>Kopfbereich und Rumpf im Überblick</figcaption>
</figure>

Die Bildunterschrift ersetzt den Alternativtext nicht: Sie steht für alle sichtbar daneben, der Alternativtext tritt an die Stelle des Bildes.

Der häufigste Fehler bei der Ladezeit

Ein Bild in Desktop-Auflösung auf einem Telefon kostet Ladezeit, die sich an keiner anderen Stelle wieder einspielen lässt. Prüfen lässt sich das in den Entwicklerwerkzeugen: angezeigte Größe gegen tatsächliche Dateigröße. Faktor vier oder mehr ist keine Seltenheit und mit srcset in wenigen Minuten behoben.