Bilder-SEO und Alt-Texte: sichtbar und zugänglich

Bilder machen einen großen Teil des Gewichts einer Webseite aus und tragen viel zur Wirkung bei. Doch für Suchmaschinen und für Menschen, die einen Screenreader nutzen, sind Bilder erst einmal unsichtbar. Was ein Foto zeigt, verstehen sie nur über den Text, den Du mitlieferst. Genau hier setzt Bilder-SEO an. Der wichtigste Hebel ist das alt-Attribut, aber es ist nicht der einzige. In diesem Ratgeber zeige ich Dir, wie Du gute Alt-Texte schreibst, wann ein bewusst leeres alt="" richtig ist, und welche weiteren Faktoren Deine Bilder schneller und auffindbarer machen.

Wozu das alt-Attribut dient

Das alt-Attribut (kurz für “alternativer Text”) ist Teil des <img>-Elements. Es erfüllt drei Aufgaben gleichzeitig:

• Ersatz, wenn das Bild nicht lädt. Ist die Verbindung schlecht, der Pfad falsch oder das Bild gelöscht, zeigt der Browser statt der Grafik den Alt-Text an. Der Nutzer versteht trotzdem, was dort stehen sollte.
• Vorlesen durch Screenreader. Blinde und sehbehinderte Menschen navigieren mit Screenreadern durch die Seite. Diese Programme lesen den Alt-Text vor. Fehlt er, liest der Screenreader im schlechtesten Fall nur den Dateinamen vor, also etwas wie “I-M-G unterstrich vier-sieben-neun-zwei Punkt J-P-G”. Das hilft niemandem.
• Kontext für die Bildersuche. Google und andere Suchmaschinen können ein Foto nicht so zuverlässig deuten wie ein Mensch. Der Alt-Text ist eines der wichtigsten Signale, um zu verstehen, was das Bild zeigt, und ob es zu einer Suchanfrage passt. Für die Google Bildersuche ist er dadurch ein direkter Ranking-Faktor.

Ein Alt-Text arbeitet also für drei sehr unterschiedliche “Leser” auf einmal. Das ist gut zu wissen, denn es erklärt, warum ein guter Alt-Text vor allem eines sein muss: eine ehrliche, nützliche Beschreibung des Bildinhalts.

Wie Du gute Alt-Texte schreibst

Die Faustregel lautet: Beschreibe, was auf dem Bild zu sehen ist, so wie Du es einem Menschen am Telefon erklären würdest, der die Seite nicht sehen kann. Dabei helfen ein paar konkrete Prinzipien.

Sei beschreibend und konkret. “Bild” oder “Foto” sagt nichts aus. “Rote Kaffeetasse auf einem Holztisch neben einem aufgeschlagenen Notizbuch” schon.

Halte es kurz. Ein bis zwei Sätze reichen fast immer. Screenreader lesen den kompletten Text am Stück vor, sehr lange Alt-Texte werden dadurch ermüdend. Wenn ein Bild eine ausführliche Erklärung braucht (etwa ein komplexes Diagramm), gehört diese in den sichtbaren Fließtext oder eine Bildunterschrift, nicht komplett ins alt.

Betreibe kein Keyword-Stuffing. Der Alt-Text ist keine Ablage für Suchbegriffe. Aneinandergereihte Keywords wie “Kaffee Kaffeemaschine kaufen günstig Kaffee Angebot” schaden mehr, als sie nützen: Screenreader-Nutzer werden damit belästigt, und Suchmaschinen erkennen das Muster als Spam.

Beziehe den Kontext der Seite ein. Dasselbe Bild kann je nach Seite eine andere Beschreibung verdienen. Ein Foto eines Laufschuhs braucht auf einer Produktseite den Modellnamen (“Laufschuh Modell XY in Blau, Seitenansicht”), in einem Ratgeber über Laufverletzungen vielleicht eher den relevanten Aspekt (“Laufschuh mit gedämpfter Sohle im Fersenbereich”).

Wiederhole nicht, was schon danebensteht. Steht direkt unter dem Bild bereits eine Bildunterschrift mit demselben Inhalt, muss der Alt-Text nicht dasselbe noch einmal sagen. Sonst hören Screenreader-Nutzer alles doppelt.

Hier ein Vergleich, der die Unterschiede deutlich macht:

Situation	Schlechter Alt-Text	Guter Alt-Text
Produktfoto	alt="bild1"	alt="Blaue Laufschuhe Modell XY, Seitenansicht"
Teamfoto	alt="foto"	alt="Vier Mitarbeiterinnen im Besprechungsraum am Whiteboard"
Diagramm	alt="Grafik"	alt="Balkendiagramm: Umsatz steigt von 2023 bis 2026 um 40 Prozent"
Keyword-Spam	alt="Schuhe kaufen günstig Laufschuhe Sneaker Angebot Sale"	alt="Blaue Laufschuhe Modell XY, Seitenansicht"

So sieht ein sauber ausgezeichnetes Bild im Code aus:

<img src="/bilder/laufschuh-xy-blau.webp"
     alt="Blaue Laufschuhe Modell XY, Seitenansicht"
     width="800" height="600">

Der Sonderfall alt="" für dekorative Bilder

Nicht jedes Bild trägt Bedeutung. Trennlinien, dekorative Muster, Hintergrundverläufe oder ein rein schmückendes Symbol neben einer Überschrift transportieren keine Information, die ein Screenreader-Nutzer bräuchte. Für solche Bilder ist ein leeres alt-Attribut die richtige Wahl:

<img src="/bilder/trennlinie.svg" alt="">

Das leere alt="" ist ein bewusstes Signal an den Screenreader: “Dieses Bild ist reine Dekoration, überspring es.” Der Nutzer wird dann nicht durch eine überflüssige Vorlese-Pause gestört. Das entspricht ausdrücklich der Empfehlung der Web Accessibility Initiative (WAI) des W3C.

Wichtig ist der Unterschied zwischen einem leeren alt="" und einem ganz fehlenden alt-Attribut. Beide sehen für das Auge ähnlich harmlos aus, verhalten sich aber völlig anders:

• alt="" (vorhanden, aber leer): Der Screenreader überspringt das Bild sauber. Bewusste Entscheidung, korrekt für Deko.
• Kein alt vorhanden: Der Screenreader weiß nicht, ob das Bild wichtig ist, und behilft sich oft damit, den Dateinamen oder die URL vorzulesen. Das ist verwirrend und gilt als Fehler.

Merke Dir: Jedes <img> sollte ein alt-Attribut haben. Die einzige Frage ist, ob es gefüllt (informativ) oder leer (dekorativ) sein muss. Ein komplett fehlendes alt ist nie die richtige Antwort.

Weitere Faktoren der Bilder-Optimierung

Der Alt-Text ist das Herzstück, aber gute Bilder-SEO umfasst mehr. Die folgenden Punkte verbessern Ladezeit, Auffindbarkeit und Nutzererlebnis.

Sprechende Dateinamen. laufschuh-xy-blau.webp sagt Suchmaschinen mehr als IMG_4792.jpg. Nutze kleingeschriebene Wörter, getrennt durch Bindestriche, ohne Umlaute und Sonderzeichen.

Moderne Formate. WebP und AVIF liefern bei gleicher Qualität deutlich kleinere Dateien als klassisches JPEG oder PNG. Kleinere Dateien laden schneller, und Ladezeit ist selbst ein Ranking-Faktor. Für die meisten Fotos ist WebP heute eine sichere Wahl, AVIF komprimiert noch stärker.

Komprimierung und Dateigröße. Ein Foto muss nicht in 4000 Pixel Breite ausgeliefert werden, wenn es auf der Seite nur 800 Pixel breit dargestellt wird. Skaliere Bilder auf die tatsächlich benötigte Größe herunter und komprimiere sie. Als grobe Orientierung sollten einzelne Inhaltsbilder selten über 200 bis 300 Kilobyte liegen.

Responsive Bilder mit srcset. Mit dem srcset-Attribut lieferst Du je nach Bildschirmgröße unterschiedlich große Varianten aus. Ein Smartphone lädt dann die kleine Version, ein großer Monitor die große.

<img src="/bilder/foto-800.webp"
     srcset="/bilder/foto-400.webp 400w,
             /bilder/foto-800.webp 800w,
             /bilder/foto-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Blaue Laufschuhe Modell XY, Seitenansicht"
     width="800" height="600">

width und height gegen Layout-Shift. Gibst Du width und height an, kennt der Browser das Seitenverhältnis schon, bevor das Bild geladen ist. Er reserviert den Platz und der Text springt beim Laden nicht mehr nach unten. Dieses Springen (Cumulative Layout Shift) ist einer der Core Web Vitals und wirkt sich auf die Bewertung aus.

Lazy Loading. Mit loading="lazy" lädt der Browser ein Bild erst, wenn der Nutzer in seine Nähe scrollt. Das beschleunigt den ersten Seitenaufbau spürbar, gerade bei langen Seiten mit vielen Bildern. Wichtig: Das große Bild ganz oben (oft das Hero-Bild) sollte man nicht faul laden, damit es sofort sichtbar ist.

<img src="/bilder/foto-weiter-unten.webp"
     alt="Beschreibung des Bildes"
     width="800" height="600"
     loading="lazy">

Bild-Sitemaps. Bei sehr bildlastigen Seiten kannst Du Bilder in einer Sitemap ausweisen, damit Suchmaschinen sie zuverlässiger finden. Für die meisten kleineren Sites ist das optional, für Bildergalerien oder Shops kann es sich lohnen.

Häufige Fehler

In der Praxis begegnen mir immer wieder dieselben Stolperstellen:

• Alt-Attribut ganz vergessen. Der klassische Fehler, besonders bei Bildern, die per Editor oder Copy-and-paste eingefügt wurden.
• Dateiname als Alt-Text. alt="IMG_4792.jpg" ist so gut wie kein Alt-Text.
• Keyword-Stuffing. Der Versuch, über den Alt-Text zu ranken, statt das Bild ehrlich zu beschreiben.
• Dekobilder mit gefülltem Alt-Text. Eine Zierlinie mit alt="dekorative Linie" zwingt den Screenreader, etwas Überflüssiges vorzulesen. Hier gehört alt="" hin.
• Riesige Originaldateien. Ein 5-Megabyte-Foto, herunterskaliert per CSS, bremst jede Seite aus.
• Fehlende width und height. Führt zu Layout-Shift und einem unruhigen Ladeverhalten.

So hilft Dir der Seitenprüfer

Der Seitenprüfer analysiert Deine Seite direkt im Browser und schaut sich unter anderem alle <img>-Elemente an. Er zählt, wie viele Bilder eine Seite enthält, und meldet gezielt die Bilder ohne alt-Attribut. So siehst Du auf einen Blick, ob und wo Alt-Texte fehlen, ohne den Quelltext von Hand durchsuchen zu müssen.

Wichtig zu verstehen: Ein Werkzeug kann prüfen, ob ein alt-Attribut vorhanden ist, aber nicht beurteilen, ob der Inhalt inhaltlich gut ist. Ob alt="Blaue Laufschuhe Modell XY" besser passt als alt="Schuhe", entscheidest weiterhin Du. Nutze die Meldung des Seitenprüfers also als Ausgangspunkt: Erst alle fehlenden Alt-Texte ergänzen, dann jeden einzelnen mit den Prinzipien aus diesem Ratgeber gegenlesen. Bei bewusst dekorativen Bildern setzt Du ein leeres alt="", damit sie sauber ausgezeichnet sind und der Prüfer sie nicht als echten Mangel wertet.

Bilder-SEO ist damit ein gutes Beispiel dafür, wie Zugänglichkeit und Suchmaschinenoptimierung Hand in Hand gehen: Was Du für Screenreader tust, hilft fast immer auch der Bildersuche. Wenn Du danach noch tiefer einsteigen willst, lohnt sich ein Blick auf die HTML-Struktur mit sauberen Überschriften und auf die Checkliste für technisches SEO, in der Ladezeit und Core Web Vitals noch einmal im größeren Zusammenhang stehen.