Bilder-SEO Leitfaden: Alt-Text, Dateigröße und Ranking in der Bildersuche

Auf einer durchschnittlichen Webseite sind Bilder der größte Posten der heruntergeladenen Datenmenge. Gleichzeitig sind sie auf den meisten Websites auch der am wenigsten optimierte Posten.

Das hat zwei getrennte Kosten: Die Seite wird langsamer (Core Web Vitals sinken, Conversions gehen zurück), und der Traffic, der über die Google-Bildersuche kommen könnte, bleibt komplett aus. Dieser Leitfaden behandelt beides.

Was umfasst Bilder-SEO?

Es ist die Schnittmenge dreier verschiedener Bereiche:

Barrierefreiheit: Kann jemand, der einen Screenreader nutzt, verstehen, was das Bild zeigt?
Performance: Wie schnell lädt das Bild, und verschiebt es das Seitenlayout?
Auffindbarkeit: Erscheint es in der Google-Bildersuche und in visuellen Suchergebnissen?

Alle drei werden von denselben technischen Entscheidungen beeinflusst, daher müssen sie gemeinsam betrachtet werden.

Alt-Text richtig schreiben

Der Alt-Text ist das textliche Gegenstück zum Bild. Er wird angezeigt, wenn das Bild nicht geladen werden kann, von Screenreadern vorgelesen und ist das wichtigste Signal, mit dem Google ein Bild versteht.

Situation	Schlecht	Gut
Produktfoto	alt="produkt1.jpg"	alt="Blaue Damen-Umhängetasche aus Leder, Vorderansicht"
Screenshot	alt="Screenshot"	alt="Abfragefilter im Search-Console-Leistungsbericht"
Keyword-Stuffing	alt="seo agentur seo dienstleistung seo preise"	alt="Monatliches Diagramm des organischen Traffics, Januar-Juni 2026"
Dekoratives Bild	alt="dekorative Linie"	alt="" (leer gelassen)

Regeln:

Schreiben Sie, als würden Sie das Bild jemandem beschreiben, der es nicht sehen kann. Das ist der richtige Test.
Überschreiten Sie nicht 125 Zeichen. Manche Screenreader schneiden danach ab.
Beginnen Sie nicht mit „Bild von" oder „Foto von". Dass es sich um ein Bild handelt, ist bereits bekannt.
Lassen Sie bei dekorativen Bildern alt="" stehen. Löschen Sie es nicht — ein leeres Alt-Attribut sagt dem Screenreader „das überspringen"; fehlt das Attribut ganz, wird stattdessen der Dateiname vorgelesen.
Betreiben Sie kein Keyword-Stuffing. Das kann als Spam-Signal gewertet werden.

Dateiname und URL

Bilddateinamen sind nach wie vor ein Signal — und kosten nichts:

IMG_20260813_113244.jpg   →   blaue-leder-umhaengetasche.jpg

Verwenden Sie keine Umlaute oder Sonderzeichen (ä, ö, ü, ß verursachen auf manchen Servern Probleme), trennen Sie Wörter mit Bindestrichen, keine Unterstriche.

Das richtige Format: WebP oder AVIF?

Format	Wann	Hinweis
WebP	Standardwahl	In allen aktuellen Browsern unterstützt, deutlich kleiner als JPEG
AVIF	Große Bilder, fotolastige Seiten	Kleinere Datei, aber langsamere Kodierung
SVG	Logo, Icon, einfache Grafiken	Vektorformat; verzerrt beim Vergrößern nicht
JPEG	Nur bei Bedarf an alter Kompatibilität	Wurde von WebP abgelöst
PNG	Fälle mit Transparenzbedarf	Nicht für Fotos verwenden, wird zu groß

Praktischer Ansatz: Machen Sie WebP zum Standard, liefern Sie AVIF über das <picture>-Tag aus und lassen Sie JPEG als Fallback.

<picture>
  <source srcset="produkt.avif" type="image/avif">
  <source srcset="produkt.webp" type="image/webp">
  <img src="produkt.jpg" alt="Blaue Damen-Umhängetasche aus Leder" width="800" height="1000">
</picture>

Größe und Auflösung

Die häufigste Verschwendung: Ein 4000 Pixel breites Foto wird in einen Bereich eingebunden, der auf dem Bildschirm nur 600 Pixel groß angezeigt wird. Der Browser lädt die komplette Datei herunter und verkleinert sie erst danach.

Regeln:

Laden Sie ein Bild nicht größer hoch als das Doppelte der größten Anzeigegröße (2x reicht für Retina-Displays).
Liefern Sie mit srcset unterschiedliche Größen für unterschiedliche Bildschirme aus.
Zielgröße für Inhaltsbilder: unter 200 KB. Versuchen Sie, bei vollbreiten Titelbildern 400 KB nicht zu überschreiten.

<img src="produkt-800.webp"
     srcset="produkt-400.webp 400w, produkt-800.webp 800w, produkt-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Blaue Damen-Umhängetasche aus Leder"
     width="800" height="1000">

Warum sind width und height entscheidend?

Ohne die Attribute width und height weiß der Browser nicht, wie viel Platz das Bild einnehmen wird. Sobald das Bild geladen ist, verschiebt sich der darunterliegende Inhalt nach unten — das verschlechtert die Metrik Cumulative Layout Shift (CLS) und drückt Ihre Core-Web-Vitals-Bewertung.

Besonders auf Mobilgeräten führt ein verrutschendes Layout auch dazu, dass Nutzer versehentlich an der falschen Stelle klicken. Diese beiden Attribute sind der günstigste Core-Web-Vitals-Gewinn überhaupt; Details finden Sie in unserem Core-Web-Vitals-Leitfaden.

Die Lazy-Loading-Falle

loading="lazy" lädt Bilder erst, wenn sie in den sichtbaren Bereich kommen; das beschleunigt den Seitenaufbau. Aber setzen Sie es nicht bei Bildern im ersten sichtbaren Bereich (above the fold).

Das Titelbild ganz oben auf der Seite ist meist das Largest-Contentful-Paint (LCP)-Element. Lazy Loading darauf anzuwenden verschlechtert direkt die wichtigste Geschwindigkeitsmetrik, die Sie messen.

Die Regel: Was im ersten sichtbaren Bereich liegt, bekommt loading="eager", alles darunter loading="lazy".

Traffic über die Google-Bildersuche gewinnen

Die Bildersuche ist in vielen Branchen (Mode, Einrichtung, Essen, Möbel, Kfz-Ersatzteile) eine unterschätzte Trafficquelle. Die wichtigsten Faktoren, die das Ranking beeinflussen:

Der Text rund um das Bild. Google leitet den Kontext eines Bildes am stärksten aus der nahegelegenen Überschrift und dem Absatz ab.
Das Ranking der Seite selbst. Ist die Seite in ihrem Thema autoritativ, ranken auch ihre Bilder weiter oben.
Originalität. Stockfotos sind auf Tausenden Websites identisch; ein eigenes Bild hat eine hohe Chance, sich abzuheben.
Strukturierte Daten. Product-, Recipe- und Video-Schema verschaffen in den Bildergebnissen ein Badge — wir haben das in unserem Schema-Markup-Leitfaden erklärt.
Die Bilder-Sitemap. Erleichtert die Auffindbarkeit besonders bei Websites, die Bilder per JavaScript nachladen.

Die Bilder-Sitemap

Sie können Ihrer normalen Sitemap Bildinformationen hinzufügen:

<url>
  <loc>https://meineseite.de/produkt/tasche</loc>
  <image:image>
    <image:loc>https://meineseite.de/img/tasche.webp</image:loc>
  </image:image>
</url>

Das macht bei Websites, die Bilder erst nach dem Laden der Seite per JavaScript nachladen, einen spürbaren Unterschied. Zur gesamten Sitemap-Struktur finden Sie mehr in unserem robots.txt- und Sitemap-Leitfaden.

Checkliste

[ ] Haben alle Inhaltsbilder einen aussagekräftigen alt-Text?
[ ] Ist bei dekorativen Bildern alt="" gesetzt?
[ ] Sind Dateinamen aussagekräftig, mit Bindestrichen getrennt und ohne Sonderzeichen?
[ ] Ist das Format WebP (oder AVIF)?
[ ] Liegen die Dateigrößen unter 200 KB?
[ ] Sind width und height gesetzt?
[ ] Ist das Bild im ersten sichtbaren Bereich nicht lazy?
[ ] Wird über srcset eine kleinere Version für Mobilgeräte ausgeliefert?
[ ] Werden Bilder über ein CDN ausgeliefert?
[ ] Enthält die Sitemap Bildinformationen?

Häufig gestellte Fragen

Sollte ich ein Keyword in den Alt-Text einbauen?

Wenn es sich natürlich einfügt, ja — erzwungen, nein. Die Hauptaufgabe des Alt-Texts ist es, das Bild zu beschreiben; wirkt das Keyword innerhalb dieser Beschreibung natürlich, gibt es kein Problem.

Ist die Verwendung von Stockfotos schädlich?

Es gibt keine Ranking-Strafe, aber Ihre Chance, sich in der Bildersuche abzuheben, ist gering, weil dieselbe Datei auf Hunderten Websites liegt. Ein eigenes Foto ist immer besser — auch mit kleinem Budget.

Wirkt sich die Auslagerung von Bildern auf ein CDN auf SEO aus?

Positiv — die Ladezeit sinkt. Liefern Sie von einer anderen Domain aus, verwenden Sie in der Bilder-Sitemap die vollständigen Adressen.

Wie viele Bilder sind zu viele?

Nicht die Anzahl ist das Problem, sondern das Gesamtgewicht. Bleibt eine Seite mit zehn Bildern bei 800 KB, gibt es kein Problem; eine Seite mit drei Bildern und 6 MB dagegen schon.

Verwandte Artikel: