<img>

Zuletzt aktualisiert am 3. Juli 2026

Bilder machen Webseiten lebendig, egal ob Produktfotos, Diagramme oder Illustrationen. Das <img>-Element bettet ein Bild in deine Seite ein. Es ist ein Void-Element, also selbstschließend: Es hat keinen Inhalt und keinen schließenden Tag. Neben dem Einbetten selbst spielen bei Bildern zwei Themen eine große Rolle: Performance (wie schnell lädt das Bild?) und Accessibility (was sehen Nutzer, die das Bild nicht sehen können?). Auf dieser Seite lernst du beides.

Grundlagen

Wenn du ein Bild einbindest, sind zwei Attribute unverzichtbar: src (wo liegt das Bild?) und alt (was zeigt das Bild?). Das alt-Attribut ist nicht nur ein Pflichtfeld, sondern hat echten Nutzen: Wenn das Bild nicht lädt, sehen Nutzer den Alt-Text als Fallback. Screenreader lesen ihn blinden Nutzern vor. Und Suchmaschinen nutzen ihn, um den Inhalt des Bildes zu verstehen.

Ein guter Alt-Text beschreibt was auf dem Bild zu sehen ist, nicht wie es aussieht. Vergleiche:

• Schlecht: alt="Bild" oder alt="foto.jpg"

• Gut: alt="Goldener Retriever spielt im Park mit einem Ball"

• <img> ist ein Void-Element: Es hat keinen schließenden Tag, du schreibst einfach <img>

• src und alt sind die beiden wichtigsten Attribute: src ist der Pfad zum Bild, alt der Alternativtext

• Das alt-Attribut ist Pflicht für Barrierefreiheit und SEO. Bei rein dekorativen Bildern (z.B. Schmuckgrafiken) setzt du alt="", denn ein leerer Alt-Text sagt dem Screenreader: “Dieses Bild kannst du ignorieren”

• Bilder sind standardmäßig Inline-Elemente und fließen im Text mit

Syntax

<img src="bild.jpg" alt="Beschreibung des Bildes">

Attribute

Performance-Konzepte für Bilder

Bilder sind oft der größte Teil einer Webseite. Deshalb lohnt es sich, ein paar Performance-Grundlagen zu kennen:

• CLS (Cumulative Layout Shift): Kennst du das, wenn eine Seite beim Laden “springt”? Du willst auf einen Button klicken, und plötzlich rutscht alles nach unten, weil ein Bild geladen wurde. Das passiert, wenn du width und height nicht angibst. Der Browser reserviert dann keinen Platz für das Bild und muss alles verschieben, sobald es da ist. Gib deshalb immer width und height an.

• LCP (Largest Contentful Paint): Das ist die Zeit, bis das größte sichtbare Element (oft ein Hero-Bild) geladen ist. Für dein Hauptbild oben auf der Seite solltest du loading="eager" (Standard) und fetchpriority="high" verwenden, damit der Browser es priorisiert.

• Lazy Loading: Bilder, die erst beim Scrollen sichtbar werden, sollten loading="lazy" bekommen. Der Browser lädt sie dann erst, wenn der Nutzer in ihre Nähe scrollt. Das spart Bandbreite und beschleunigt den initialen Seitenaufbau.

Bildformate

Moderne Formate sparen deutlich Dateigröße bei gleicher Qualität:

• WebP: Guter Kompromiss aus Qualität und Dateigröße, wird von allen modernen Browsern unterstützt
• AVIF: Noch bessere Kompression als WebP, aber langsameres Encoding. Wird von allen modernen Browsern unterstützt
• JPEG/PNG: Die Klassiker. JPEG für Fotos, PNG für Grafiken mit Transparenz. Nutze sie als Fallback oder wenn du keine Build-Pipeline hast

Beispiele

Bild mit festen Maßen

Wenn du width und height angibst, reserviert der Browser den Platz schon vor dem Laden. So vermeidest du Layout-Shifts:

<img
  src="landschaft.jpg"
  alt="Zufälliges Landschaftsbild"
  width="400"
  height="250"
>

Lazy Loading

Für Bilder weiter unten auf der Seite verwendest du loading="lazy". Der Browser lädt sie erst, wenn der Nutzer in ihre Nähe scrollt:

<img
  src="foto.jpg"
  alt="Lazy geladenes Bild"
  width="400"
  height="200"
  loading="lazy"
>

Bild mit figure und figcaption

Wenn ein Bild eine Bildunterschrift braucht, wickelst du es in ein <figure>-Element und fügst die Beschriftung mit <figcaption> hinzu. Das ist semantisch korrekt und hilft Screenreadern, Bild und Beschriftung zusammenzuordnen:

<figure>
  <img src="foto.jpg"
       alt="Beispielbild mit Bildunterschrift"
       width="400" height="250">
  <figcaption>Abb. 1: Ein Beispielbild mit Bildunterschrift</figcaption>
</figure>

Barrierefreiheit

Bilder sind für blinde und sehbehinderte Nutzer nicht wahrnehmbar, deshalb ist der Alt-Text das wichtigste Barrierefreiheits-Feature bei <img>. Hier die Grundregeln:

Aussagekräftige Alt-Texte schreiben. Beschreibe, was auf dem Bild zu sehen ist, nicht wie es aussieht. Ein guter Alt-Text gibt die Information weiter, die das Bild vermitteln soll. Vergleiche: alt="Bild" (nutzlos) vs. alt="Balkendiagramm: Umsatz stieg von 50.000€ im Q1 auf 120.000€ im Q3" (informativ). Vermeide Formulierungen wie “Bild von…”, der Screenreader sagt bereits “Grafik:” vor dem Alt-Text.

Dekorative Bilder mit alt="" kennzeichnen. Schmuckgrafiken, Trennlinien oder rein ästhetische Bilder, die keine inhaltliche Information transportieren, bekommen einen leeren Alt-Text: alt="". Das signalisiert dem Screenreader: “Dieses Bild kannst du ignorieren.” Ohne alt-Attribut liest der Screenreader stattdessen den Dateinamen vor, das ist für niemanden hilfreich.

role="presentation" für Layout-Bilder. Wenn ein Bild rein dekorativ ist und auch semantisch ignoriert werden soll, kannst du zusätzlich role="presentation" setzen. Das entfernt das Bild komplett aus dem Accessibility-Tree. In der Praxis reicht alt="" für die meisten Fälle aus.

<figure> und <figcaption> für Bilder mit Beschriftung. Wenn ein Bild eine Bildunterschrift hat, wickle beides in ein <figure>-Element und nutze <figcaption> für die Beschriftung. Screenreader erkennen dann die Zusammengehörigkeit von Bild und Beschreibung. Wichtig: Die <figcaption> ersetzt nicht den Alt-Text, beide haben unterschiedliche Aufgaben.

Häufige Fehler

• Kein alt-Attribut: Ohne alt kann ein Screenreader das Bild nicht beschreiben und liest stattdessen den Dateinamen vor, das ist für blinde Nutzer nutzlos. Für dekorative Bilder (Schmuckgrafiken, Hintergründe) setze bewusst alt="". Das signalisiert: “Dieses Bild ist nicht inhaltstragend.”

• Fehlende width/height: Ohne diese Angaben weiß der Browser nicht, wie viel Platz das Bild braucht, bis es geladen ist. Das Ergebnis: Die Seite springt und verschiebt sich (CLS), was Nutzer frustriert und sich negativ auf dein Google-Ranking auswirkt.

• Riesige Bilder: Ein 4000px breites JPEG für einen 400px breiten Bereich zu verwenden, verschwendet Bandbreite. Liefere Bilder in passender Größe aus und nutze moderne Formate wie WebP oder AVIF. Viele Frameworks (darunter auch Astro) können das automatisch für dich erledigen.

• loading="lazy" für Hero-Bilder: Das erste sichtbare Bild auf der Seite (oft ein großes Hero-Bild) sollte nicht lazy geladen werden. Lazy Loading verzögert das Laden, und genau bei diesem Bild möchtest du, dass es so schnell wie möglich erscheint. Verwende hier fetchpriority="high" statt loading="lazy".

Browser-Kompatibilität

Das img-Element wird universell unterstützt. Auch loading='lazy' und fetchpriority werden von allen modernen Browsern unterstützt.

Email-Kompatibilität

Bilder werden in den meisten Email-Clients angezeigt, aber einige blockieren sie standardmäßig oder haben Einschränkungen.

Verwandte Elemente