Bilder-SEO: 12 praktische Tipps für mehr organischen Traffic

📖 Anmerkung zur Quelle: Dieser Artikel wurde basierend auf Konzepten erstellt, die im Beitrag Image SEO: 12 Actionable Tips, ursprünglich von Ahrefs veröffentlicht, besprochen wurden. Der Inhalt hier wurde umgeschrieben, erweitert und an den deutschsprachigen Kontext angepasst, mit relevanten Beispielen, Tools und Referenzen für den deutschen Markt.

Viele Menschen denken, Bilder-SEO bedeutet nur, ein Schlüsselwort in das alt-Attribut zu setzen. In der Praxis gibt es mindestens zwölf Faktoren, die beeinflussen, wie Google die Bilder deiner Website findet, versteht und rankt. Diese Faktoren zu ignorieren bedeutet, Traffic zu verlieren, der leicht gewonnen werden könnte — auch über Google Bilder, das für einen erheblichen Teil der weltweiten Suchanfragen verantwortlich ist.

Google selbst macht Fortschritte bei der Bilderkennung durch maschinelles Lernen. Aber das macht Bilder-SEO nicht überflüssig — im Gegenteil, Google nutzt weiterhin alle verfügbaren Signale (Dateiname, Alt-Text, Seitenkontext, Ladegeschwindigkeit), um Bilder präzise zu interpretieren und zu ranken.

1. Benenne die Dateien beschreibend

Der Dateiname ist eines der ersten Signale, das Google nutzt, um das Thema eines Bildes zu verstehen. Kameras und Smartphones erzeugen generische Namen wie IMG_0023.JPG oder DSC_4817.jpg — die der Suchmaschine absolut nichts mitteilen.

Google selbst erklärt in seinen offiziellen Richtlinien, dass der Dateiname ein Hinweis auf den Bildinhalt ist. Die Empfehlung ist einfach: verwende beschreibende Schlüsselwörter, durch Bindestriche getrennt, ohne zu übertreiben:

Gut: schokoladenkuchen.jpg
Schlecht: IMG_2947.jpg
Auch schlecht: schokoladenkuchen-rezept-nachtisch-suess-dessert.jpg (Keyword-Stuffing)

Bilder vor dem Upload umzubenennen ist eine einfache Gewohnheit, die einen Unterschied macht — besonders für E-Commerce-Shops, Kochblogs, Portfolios und jede Website, die auf Traffic über die Bildersuche angewiesen ist.

2. Schreibe nützliche Alt-Texte

Das alt-Attribut beschreibt ein Bild für den Browser. Es wird angezeigt, wenn das Bild nicht lädt, von Screenreadern für sehbehinderte Menschen gelesen und von Google genutzt, um den visuellen Inhalt der Seite zu verstehen.

Die Syntax ist einfach:

<img src="dalmatiner-welpe.jpg" alt="Dalmatiner-Welpe spielt im Park">

Google nutzt den Alt-Text zusammen mit Computer-Vision-Algorithmen und dem Seitenkontext, um das Thema des Bildes zu verstehen. Die Anleitung ist, nützliche und informationsreiche Beschreibungen zu erstellen, mit kontextuellen Schlüsselwörtern — niemals sinnlose Wörter anzuhäufen (Keyword-Stuffing).

Eine Abkürzung, die gut funktioniert: vervollständige den Satz "Dies ist ein Foto von ___". Das Ergebnis der Lücke, leicht angepasst, ist meist ein guter Alt-Text. Beispiele:

"Dies ist ein Foto von einem Schokoladen-Käsekuchen mit Erdbeersoße." → alt="Schokoladen-Käsekuchen mit Erdbeersoße"
"Dies ist ein Foto von einem Laptop mit zerbrochenem Bildschirm auf einem Tisch." → alt="Laptop mit zerbrochenem Bildschirm auf Schreibtisch"

Bei Produktbildern kann das Einschließen der Modellnummer oder SKU-Codes im Alt-Text helfen, bei spezifischen technischen Suchen zu erscheinen. Vergiss auch nicht die Bildunterschriften — Google extrahiert Informationen über das Thema des Bildes aus dem umgebenden Text, einschließlich sichtbarer Bildunterschriften auf der Seite.

3. Wähle das richtige Dateiformat

Die Formatwahl beeinflusst direkt die Dateigröße — und damit die Ladegeschwindigkeit der Seite. Die drei häufigsten Formate im Web sind JPG, PNG und WebP, jedes mit unterschiedlichen Eigenschaften:

Format	Am besten für	Transparenz	Typische Größe
JPG	Fotografien, Bilder mit Verläufen	Nein	Klein bis mittel
PNG	Logos, Icons, Screenshots mit Text	Ja	Mittel bis groß
WebP	Jede Nutzung im modernen Web	Ja	25–35% kleiner als JPG/PNG
GIF	Einfache Animationen	Teilweise	Variabel
SVG	Logos, Icons, Vektorillustrationen	Ja	Sehr klein

Die Faustregel: nutze JPG für Fotografien, PNG für Bilder, die transparenten Hintergrund und scharfen Text brauchen, und WebP wo immer möglich fürs Web — das Format bietet überlegene Komprimierung bei gleichwertiger Qualität. Nutze den Bild-Konverter von ImageTools, um vor dem Upload zwischen Formaten zu konvertieren.

4. Ändere die Größe der Bilder auf die tatsächlichen Anzeigedimensionen

Ein 4000px breites Foto an eine Website zu senden, die Bilder in 800px anzeigt, ist Bandbreitenverschwendung. Der Browser lädt das vollständige Bild herunter und verwirft dann die überschüssigen Pixel — der Nutzer wartet länger, ohne jeglichen visuellen Gewinn.

Identifiziere die maximale Anzeigebreite der Bilder in deinem Layout (meist zwischen 800px und 1440px, abhängig vom Bildtyp und der Website) und ändere die Größe vor dem Upload. Um Retina-Displays (HiDPI) abzudecken, nutze die doppelte Anzeigebreite. Nutze den Bildgrößen-Ändern von ImageTools, um die Abmessungen präzise anzupassen.

Ändere jetzt die Größe und komprimiere deine Bilder

Passe Abmessungen an und reduziere das Gewicht der Bilder deiner Website kostenlos, ohne Dateien an externe Server zu senden.

Größe ändern Komprimieren

5. Komprimiere die Bilder ohne sichtbaren Qualitätsverlust

Komprimierung ist der Prozess, die Dateigröße zu reduzieren, ohne die Bildabmessungen zu ändern. Bei JPG-Fotos kann die Reduzierung der Qualität von 100% auf 80% die Datei um das 5- bis 10-Fache verkleinern, mit auf dem Bildschirm nicht wahrnehmbarem Unterschied.

Ladegeschwindigkeit ist ein von Google bestätigter Ranking-Faktor — sowohl auf Desktop als auch auf Mobilgeräten. Bilder sind oft die größte Komponente des Gewichts einer Webseite. Alle Bilder vor dem Upload zu komprimieren ist die technische SEO-Optimierung mit dem höchsten Ertrag pro Aufwand.

Praktische Gewichtsziele nach Bildtyp:

Banner / Hero Full-Width: unter 200 KB
Produktfoto oder Blog-Bild: 60–150 KB
Thumbnail oder Miniatur: 15–40 KB
Logo in PNG/WebP: unter 30 KB

Nutze den Bild-Komprimierer von ImageTools, um JPG, PNG und WebP direkt im Browser zu reduzieren — ohne Versand an externe Server.

6. Erstelle eine Bilder-Sitemap

Die Bilder-Sitemap informiert Google über die Existenz von Bildern, die es möglicherweise nicht von selbst entdeckt — besonders Bilder, die über JavaScript geladen oder in komplexe Galerien eingebettet sind. Anders als die normale Sitemap kann die Bilder-Sitemap URLs von anderen Domains enthalten (wie CDNs).

Wenn deine Website WordPress mit dem Yoast-SEO-Plugin nutzt, werden Bilder bereits automatisch zur Sitemap hinzugefügt. Bei individuellen Websites kann die Bilder-Sitemap manuell hinzugefügt werden, gemäß der offiziellen Google-Dokumentation. Die wichtigsten verfügbaren Tags sind image:loc (Bild-URL), image:title und image:caption.

7. Nutze strukturierte Daten für Produktbilder

Google unterstützt strukturierte Daten (Schema.org) für Bilder in verschiedenen Kontexten — Rezepte, Produkte, Artikel, Events. Bei korrekter Implementierung ermöglichen diese Daten, dass Bilder in erweiterten Ergebnissen (Rich Results) bei Google erscheinen, mit zusätzlicher visueller Hervorhebung, die die Klickrate erhöht.

Für E-Commerce-Shops ist das Produkt-Markup mit Bild besonders wertvoll: Produkte mit korrekt markiertem Bild können in Google Shopping und in Produktkarten im Google-Wissenspanel erscheinen.

8. Implementiere Lazy Loading

Lazy Loading ist die Technik, Bilder erst zu laden, wenn sie kurz davor sind, in den sichtbaren Bildschirmbereich einzutreten, statt alle auf einmal beim ersten Laden herunterzuladen. Auf Seiten mit vielen Bildern (lange Blogs, Produktlisten) kann Lazy Loading das anfängliche Seitengewicht um 60–80% reduzieren.

Die einfachste Implementierung ist nativ in HTML:

<img src="produkt.webp" alt="Blaue Sneaker" loading="lazy">

Wichtig: wende loading="lazy" niemals auf das Hauptbild oberhalb des Folds an (das erste sichtbare Bild ohne zu scrollen). Das verzögert den LCP — Largest Contentful Paint, eine der Core-Web-Vitals-Metriken — und schadet direkt dem Ranking.

9. Definiere width und height in allen Bild-Tags

Wenn der Browser die Größe eines Bildes vor dem Laden nicht kennt, reserviert er nicht den richtigen Platz im Layout — und wenn das Bild lädt, "springt" der Seiteninhalt. Dieses Phänomen misst Google als CLS (Cumulative Layout Shift), eine weitere Core-Web-Vital.

Die Lösung ist, immer width und height in den Bild-Tags anzugeben:

<img src="produkt.webp" alt="Blaue Sneaker" width="800" height="800" loading="lazy">

Die Werte müssen nicht der visuell angezeigten Größe entsprechen — sie definieren nur das Seitenverhältnis, damit der Browser den richtigen Platz vor dem Laden des Bildes reserviert.

10. Nutze responsive Bilder mit srcset

Das srcset-Attribut ermöglicht es, verschiedene Versionen desselben Bildes für unterschiedliche Bildschirmgrößen bereitzustellen. Der Browser wählt automatisch die passendste Version — liefert ein kleineres Bild für Smartphones und ein größeres für Desktops. Auf Websites mit viel Mobile-Traffic kann das die übertragene Datenmenge um 40–60% reduzieren.

<img
  src="produkt-800.webp"
  srcset="produkt-400.webp 400w,
          produkt-800.webp 800w,
          produkt-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Blaue Sneaker"
  width="800" height="800"
  loading="lazy"
>

11. Optimiere das Hauptbild für Open Graph und soziale Medien

Wenn jemand eine URL bei WhatsApp, Instagram, LinkedIn oder einer anderen Plattform teilt, kommt das in der Vorschau angezeigte Bild aus den Open-Graph-Meta-Tags. Sind diese Tags nicht konfiguriert, wählt die Plattform ein beliebiges Bild der Seite — oft mit schlechtem Ergebnis.

Konfiguriere immer das og:image-Tag mit einem 1200×630px-Bild auf jeder wichtigen Seite deiner Website:

<meta property="og:image" content="https://deinewebsite.de/bilder/artikel-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Ein gut gestaltetes Vorschaubild — mit lesbarem Titel, visueller Markenidentität und relevantem Bild — erhöht die Klickrate bei Shares deutlich.

12. Berücksichtige den Kontext der gesamten Seite

Google bewertet Bilder nicht isoliert. Es analysiert das Gesamtbild: den Text um das Bild herum, den Seitentitel, den semantischen Kontext, die anderen visuellen Elemente, die Bildunterschrift unter dem Bild und sogar den Text der Links, die auf die Seite verweisen. Ein Bild eines roten Schuhs auf einer Seite über Damenmode hat einen völlig anderen Kontext als dasselbe Bild auf einer Kochseite.

Bewährte Kontext-Praktiken:

Platziere Bilder nahe am Text, der sie beschreibt oder auf den sie sich beziehen
Nutze sichtbare Bildunterschriften unter Bildern, wo immer möglich
Stelle sicher, dass das Bildthema relevant für das Thema der Seite ist
Nutze Seitentitel und Überschriften, die das Thema der Hauptbilder verstärken

🔍 Schnelles Audit: nutze die Google Search Console, um zu prüfen, welche Bilder deiner Website indexiert werden. Öffne Index → Seiten und filtere nach "Bilder", um den Indexierungsstatus und eventuelle Probleme zu sehen.

Checkliste für Bilder-SEO

☑ Beschreibender Dateiname mit Schlüsselwörtern (mit Bindestrichen, ohne Keyword-Stuffing)
☑ Beschreibendes und kontextuelles alt-Attribut bei allen Bildern
☑ Richtiges Format für jeden Typ: WebP oder JPG für Fotos, PNG/SVG für Logos und Icons
☑ Abmessungen an die tatsächliche Anzeigegröße angepasst (max. 2× für Retina)
☑ Komprimierung angewendet — Gewicht unter den Zielen pro Typ
☑ width und height in allen <img>-Tags angegeben
☑ loading="lazy" bei Bildern unterhalb des Folds
☑ LCP-Bild ohne Lazy Loading, mit fetchpriority="high" wenn möglich
☑ Bilder-Sitemap konfiguriert (oder geprüft, ob das Plugin das bereits erledigt)
☑ Meta-Tag og:image auf allen Hauptseiten konfiguriert
☑ Strukturierte Daten für Produktbilder wo anwendbar
☑ Bilder mit relevantem Text, Bildunterschriften und Überschriften kontextualisiert

Häufig gestellte Fragen

Sind Alt-Text und Bildunterschrift dasselbe?

Nein. Der Alt-Text ist ein für den normalen Nutzer unsichtbares HTML-Attribut — er wird nur angezeigt, wenn das Bild nicht lädt, und wird von Screenreadern und Google gelesen. Die Bildunterschrift ist der sichtbare Text unter dem Bild auf der Seite. Beide ergänzen sich und haben unterschiedliche SEO-Auswirkungen: Der Alt-Text ist direkt zum Bildthema; die Bildunterschrift fügt narrativen Kontext hinzu und kann Google helfen, die Beziehung zwischen Bild und umgebendem Inhalt zu verstehen.

Verbessern WebP-Bilder wirklich das Ranking?

Indirekt ja. WebP erzeugt Dateien, die 25–35% kleiner sind als JPG und PNG bei gleichwertiger Qualität, was zu schnelleren Seiten beiträgt. Ladegeschwindigkeit ist ein von Google bestätigter Ranking-Faktor, besonders über Core Web Vitals (LCP). Eine leichtere Seite lädt schneller, hat einen niedrigeren LCP, und das beeinflusst das Ranking. WebP selbst ist kein direkter Faktor, aber die Auswirkung auf die Performance ist real.

Erzeugt Google Bilder relevanten Traffic?

Das hängt von der Nische ab. Für Websites zu Kochen, Einrichtung, Mode, physischen Produkten und jeder Kategorie, in der Menschen nach visueller Inspiration suchen, kann Google Bilder eine bedeutende Traffic-Quelle sein. Für rein informative oder B2B-Inhalte ist die Auswirkung geringer. Es lohnt sich, in der Google Search Console das Volumen an Impressionen und Klicks speziell aus der Bildersuche zu überwachen.

Soll ich denselben Alt-Text für wiederholte Bilder auf der Website verwenden?

Wenn das Bild exakt dasselbe ist und im selben Kontext erscheint, ist derselbe Alt-Text akzeptabel. Aber wenn dasselbe Bild in verschiedenen Kontexten erscheint (zum Beispiel das Produktfoto auf der Startseite und auch auf der Produktseite), ist es besser, den Alt-Text an den Kontext jeder Seite anzupassen — das signalisiert Google mehr Kontext.

Wie erkenne ich, ob die Bilder meiner Website gut optimiert sind?

Google PageSpeed Insights (pagespeed.web.dev) analysiert jede URL und listet spezifisch Bildprobleme auf — falsche Dimensionierung, fehlende Komprimierung, veraltete Formate. Die Google Search Console zeigt auch, welche Bilder indexiert werden und eventuelle Fehler. Für ein umfassenderes Audit crawlen Tools wie Ahrefs Site Audit oder Screaming Frog die gesamte Website und listen Bilder mit fehlendem Alt-Text, übermäßigen Größen und anderen Problemen auf.