Bild-SEO: Alt-Texte und Bildmaße korrekt setzen
Fehlende Alt-Texte, fehlende Bildmaße oder falsch dimensionierte Bilder kosten Sichtbarkeit in der Bildersuche und verursachen Layout-Sprünge. So beheben Sie es.
Inhaltsverzeichnis
Was ist das Problem#
Bilder sind ohne begleitende technische Angaben für Suchmaschinen kaum interpretierbar und können sich negativ auf Ladeverhalten und Layoutstabilität einer Seite auswirken. EverAudit meldet drei verwandte Probleme: <img>-Elemente ohne alt-Attribut, Bilder ohne explizite width/height-Angaben sowie Bilder, die in einer Auflösung ausgeliefert werden, die deutlich von ihrer tatsächlichen Anzeigegröße abweicht.
In Kürze: Fehlende Alt-Texte schließen Bilder von der Google-Bildersuche und von Screenreader-Nutzern aus. Fehlende Bildmaße und überdimensionierte Bilder verursachen Layout-Sprünge und unnötig lange Ladezeiten — beides Faktoren, die auch in die Core Web Vitals einfließen.
Warum EverAudit das prüft#
EverAudit untersucht jedes <img>-Element auf jeder gecrawlten Seite: ob ein alt-Attribut vorhanden ist, ob width/height gesetzt sind und wie das tatsächliche Verhältnis von ausgelieferter zu angezeigter Bildgröße aussieht. Diese drei Aspekte werden gemeinsam unter „Bild-SEO“ geführt, weil sie an derselben Stelle im Quellcode ansetzen und häufig gemeinsam aus derselben Ursache entstehen – etwa Bilder, die direkt und unbearbeitet aus einer Redaktionsvorlage ohne Bildoptimierung eingebunden werden.
Welche Auswirkung das hat#
Ein Bild ohne Alt-Text ist für Suchmaschinen inhaltlich unsichtbar – es kann in der Google-Bildersuche nicht gefunden werden und trägt nichts zur thematischen Einordnung der Seite bei. Für Menschen, die Screenreader nutzen, ist der Alt-Text die einzige verfügbare Information über den Bildinhalt; fehlt er, schließt das diese Besucher faktisch aus. Fehlende Bildmaße führen dazu, dass der Browser beim Laden keinen Platz für das Bild reserviert und der nachfolgende Inhalt beim Eintreffen des Bildes abrupt verrutscht (Layout-Shift) – das irritiert Besucher, kann zu Fehlklicks führen und wirkt sich negativ auf die Core-Web-Vitals-Metrik CLS aus. Überdimensionierte Bilder verlängern die Ladezeit unnötig, besonders auf mobilen Verbindungen, und erhöhen dadurch die Absprungrate.
Wie Sie das beheben#
Alt-Texte ergänzen: Beschreiben Sie informative Bilder kurz und präzise; dekorative Bilder ohne eigenen Informationswert erhalten ein leeres, aber vorhandenes Attribut:
<!-- Informatives Bild -->
<img src="team-beratung.jpg" alt="Beratungsgespräch mit zwei Mitarbeitern am Konferenztisch">
<!-- Rein dekoratives Bild -->
<img src="deko-linie.svg" alt="">Vermeiden Sie Keyword-Aneinanderreihungen im Alt-Text („Webdesign Beratung Agentur Webdesign“) – das hilft weder Suchmaschinen noch Screenreader-Nutzern und wirkt unnatürlich.
Bildmaße setzen: Geben Sie width und height explizit im HTML an, damit der Browser vorab den korrekten Platz reserviert, auch wenn die tatsächliche Darstellungsgröße per CSS gesteuert wird:
<img src="team-beratung.jpg" alt="…" width="800" height="450">Bilder richtig dimensionieren: Liefern Sie Bilder in einer Auflösung aus, die nahe an ihrer tatsächlichen Anzeigegröße liegt, idealerweise über srcset für unterschiedliche Bildschirmgrößen:
<img src="team-beratung-800.jpg"
srcset="team-beratung-400.jpg 400w, team-beratung-800.jpg 800w, team-beratung-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="…" width="800" height="450">Viele CMS und Bildoptimierungs-Plugins übernehmen die Erzeugung mehrerer Auflösungsstufen automatisch – prüfen Sie, ob diese Funktion aktiviert und korrekt konfiguriert ist.
Selbst ausprobieren#
Alt-Text formulieren
Formulieren Sie einen Alt-Text für dieses Beispielbild — die Prüfung gibt sofort Rückmeldung.
Beispielszene, Stichworte: Person, Schreibtisch, Laptop, Schreibtischlampe.
Noch kein Alt-Text
Kein Alt-Text: Screenreader lesen dann den Dateinamen vor oder überspringen das Bild. Beschreiben Sie in einem kurzen Satz, was zu sehen ist.
Beispiel für einen guten Alt-Text
„Person sitzt an einem Schreibtisch und arbeitet an einem Laptop, daneben leuchtet eine Schreibtischlampe." — konkret, knapp und ohne einleitende Floskel.
Fazit#
Bild-SEO verbindet Sichtbarkeit, Barrierefreiheit und Performance in einem einzigen Themenfeld. Da die drei Probleme oft aus derselben unbearbeiteten Bildeinbindung entstehen, lohnt sich eine gemeinsame, seitenweite Kontrolle der Bildauslieferung besonders.
Häufige Fragen
Was gehört in einen guten Alt-Text?
Ein guter Alt-Text beschreibt kurz und präzise, was auf dem Bild zu sehen ist und welche Funktion es im Kontext der Seite hat — ohne Keyword-Aneinanderreihung. Rein dekorative Bilder ohne Informationswert erhalten ein leeres alt="", nicht gar kein Attribut.
Warum verursachen fehlende Bildmaße Layout-Sprünge?
Ohne explizite width/height reserviert der Browser vor dem Laden des Bildes keinen Platz dafür. Sobald das Bild eintrifft, schiebt es den nachfolgenden Inhalt abrupt nach unten — das ist der Layout-Shift, der auch in die Core-Web-Vitals-Metrik CLS einfließt.
Was bedeutet falsch dimensioniertes Bild konkret?
Das Bild wird in einer deutlich größeren Auflösung ausgeliefert, als es auf der Seite tatsächlich angezeigt wird — etwa eine 4000 Pixel breite Originaldatei für eine 400 Pixel breite Anzeigefläche. Das kostet unnötig Ladezeit und Datenvolumen, ohne einen sichtbaren Qualitätsgewinn zu bringen.
Hilft Alt-Text auch Menschen, nicht nur Suchmaschinen?
Ja, in erster Linie sogar: Alt-Text ist die zentrale Information, die Screenreader-Nutzern anstelle des Bildes vorgelesen wird, und wird auch angezeigt, wenn ein Bild nicht lädt. Der SEO-Nutzen für die Bildersuche ist ein positiver Nebeneffekt derselben guten Praxis.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.