<img>

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

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

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.

• 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".

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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

• Apple Mail

  Komplett

• Gmail

  Komplett

  Bilder werden über Google-Proxy geladen. Externe Bilder werden standardmäßig angezeigt.

• Outlook

  Teilweise

  Bilder werden standardmäßig blockiert und erst nach Nutzerfreigabe angezeigt. Die Word-Rendering-Engine kann Bildgrößen anders interpretieren.

• Thunderbird

  Teilweise

  Externe Bilder werden standardmäßig blockiert. Nutzer müssen das Laden manuell erlauben.

• Yahoo Mail

  Komplett