Das img-Element: Bilder einbinden
Mit <img> holst du Bilder auf die Seite. Das Element hat keinen Inhalt und deshalb auch kein schließendes Tag, alles Wichtige steckt in den Attributen. Zwei davon sind praktisch Pflicht: src sagt wo das Bild liegt, alt sagt was darauf zu sehen ist.
Syntax und Beispiel
HTML-Code
<img src="demo-diskette.png" alt="Pixelgrafik einer blauen Diskette"
width="120" height="120">
Das alt-Attribut ist keine Deko
Der Alternativtext wird angezeigt wenn das Bild nicht laden kann, und er wird vorgelesen wenn jemand mit einem Screenreader unterwegs ist. Er beschreibt knapp was zu sehen ist: "Pixelgrafik einer blauen Diskette", nicht "Bild1.png" und auch nicht ein Keyword-Stapel. Rein dekorative Bilder bekommen ein leeres alt="", dann überspringt die Vorlesesoftware sie, oder sie wandern gleich als Hintergrund ins CSS. Ein fehlendes alt ist dagegen immer ein Fehler, das meldet dir auch der Validator.
Weitere wichtige Attribute
| Attribut | Zweck |
|---|---|
width / height | Die Maße des Bilds in Pixeln. Der Browser reserviert damit schon beim Laden den Platz und die Seite springt nicht, wenn das Bild eintrifft. Immer angeben. |
loading="lazy" | Lädt das Bild erst wenn es in die Nähe des sichtbaren Bereichs scrollt. Ideal für Bilder weiter unten auf der Seite, spart Datenvolumen. |
title | Hinweistext bei Mauskontakt. Optional und kein Ersatz für alt. |
srcset | Bietet das Bild in mehreren Auflösungen an, der Browser wählt die passende. Für den großen Bruder davon siehe picture. |
Formate und Dateigröße
Fotos liefert man heute am besten als WebP oder AVIF aus, die sind bei gleicher Qualität deutlich kleiner als das alte JPEG. Für Grafiken mit wenigen Farben eignet sich PNG, für Logos und Icons SVG. Und egal welches Format: Bilder vor dem Hochladen auf die tatsächlich benötigte Größe verkleinern. Das 4000 Pixel breite Urlaubsfoto in einen 300-Pixel-Rahmen zu quetschen funktioniert optisch, lädt aber trotzdem die volle Datenmengge.
Typische Fehler
- alt vergessen oder mit Suchbegriffen vollstopfen.
- width und height weglassen, die Seite ruckelt dann beim Laden zusammen.
- Text als Bild einbinden. Echten Text kann man kopieren, vergrößern und vorlesen lassen, ein Bild von Text kann nichts davon.