Bilder für SEO optimieren: Der Leitfaden vom Dateinamen bis zur Bildersuche

Ein Bild ist für eine Suchmaschine zunächst eine Datei ohne Inhalt. Was ein Foto zeigt, erschließt Google überwiegend aus dem, was drumherum steht: aus dem Dateinamen, dem Alt-Text, der Überschrift darüber, dem Absatz daneben. Genau hier setzt Bilder-SEO an. Es geht nicht darum, möglichst viele Bilder einzubauen, sondern darum, jedes einzelne Bild so auszuliefern und zu beschreiben, dass es gefunden, verstanden und schnell angezeigt wird.

Dieser Leitfaden geht ein einzelnes Bild von vorne bis hinten durch: Auswahl, Dateiname, Format, Abmessungen, Alt-Text, HTML-Einbindung, responsive Auslieferung, Indexierung, der praktische Ablauf in WordPress und am Ende die Frage, woran Sie erkennen, ob es gewirkt hat.

Was Bilder-SEO leisten kann und was nicht

Optimierte Bilder wirken auf drei Wegen. Erstens über die Google Bildersuche, in der ein Bild ein eigener Einstieg auf Ihre Seite sein kann. Zweitens über die klassische Websuche, in der Bilder in Ergebnissen erscheinen und ein Thema für die Suchmaschine greifbarer machen. Drittens über die Nutzererfahrung: Ein Bild, das erst nach dem Text erscheint oder das Layout verschiebt, kostet Aufmerksamkeit.

Was Bilder-SEO nicht ist: eine Abkürzung für schwache Inhalte. Ein Bild rankt nicht gegen seine Seite an. Es verstärkt, was die Seite ohnehin behandelt.

Schritt 1: Das passende Bild wählen

Bevor Sie irgendetwas optimieren, entscheidet die Auswahl. Drei Fragen helfen:

1. Zeigt das Bild das, worüber der Abschnitt spricht? Ein austauschbares Stockfoto neben einer Anleitung liefert keinen Hinweis auf den Inhalt. Ein Screenshot des beschriebenen Dialogs, ein Foto der eigenen Werkstatt oder eine selbst gebaute Grafik dagegen schon.
2. Ist das Bild eigenständig? Eigene Aufnahmen und eigene Grafiken existieren genau einmal im Netz. Ein weit verbreitetes Stockmotiv konkurriert in der Bildersuche mit allen anderen Seiten, die es ebenfalls nutzen.
3. Steht es an der richtigen Stelle? Ein Bild gehört in die Nähe des Textes, den es illustriert. Diese Nähe ist ein Teil des Kontextes, aus dem der Bildinhalt erschlossen wird.

Praktisch heißt das: lieber vier gute, eigene Bilder als vierzehn dekorative. Jedes Bild, das Sie behalten, sollten Sie in einem Satz begründen können.

Schritt 2: Der Dateiname

Aussagekräftige Dateinamen liefern Google Hinweise zum Inhalt und Kontext eines Bildes. Das ist der billigste Optimierungsschritt überhaupt, und er wird trotzdem am häufigsten ausgelassen, weil Kameras und Bildschirmwerkzeuge Namen wie IMG_4821.jpg oder Bildschirmfoto 2026-08-07 um 10.14.22.png vergeben.

Eine brauchbare Regel:

• Kleinbuchstaben, Wörter mit Bindestrich getrennt, keine Unterstriche.
• Keine Umlaute, kein ��, keine Leerzeichen, keine Sonderzeichen.
• Beschreibend, nicht werblich: werkstatt-bremsscheibe-wechsel.jpg statt bestes-angebot-2.jpg.
• Kurz genug, um lesbar zu bleiben. Drei bis fünf Wörter reichen fast immer.
• Keine aneinandergereihten Keywords. seo-bilder-optimieren-bilder-seo-bild-optimierung.jpg beschreibt nichts, es wiederholt nur.

Benennen Sie Dateien vor dem Upload. Nachträgliche Umbenennungen ändern die URL des Bildes, und damit verlieren Sie alles, was die alte Bild-URL an Signalen aufgebaut hat, sofern Sie nicht weiterleiten.

Schritt 3: Das richtige Format

Google unterstützt in der Bildersuche unter anderem BMP, GIF, JPEG, PNG, WebP und SVG. Die Auswahl ist damit weniger eine Frage der Indexierbarkeit als eine Frage von Dateigröße und Darstellung.

Die pragmatische Faustregel für die meisten Websites: Fotos als WebP mit JPEG als Rückfallebene, Grafiken mit klaren Kanten als SVG, Screenshots als PNG oder WebP.

Schritt 4: Abmessungen und Kompression

Die Seitengeschwindigkeit ist Teil der Nutzererfahrung, und Bildgröße und Bildqualität sollten deshalb gegeneinander abgewogen werden. Diese Abwägung ist der Kern der technischen Bildoptimierung, und sie besteht aus zwei getrennten Schritten, die oft verwechselt werden.

Erstens die Abmessungen. Ein Bild sollte nicht wesentlich größer hochgeladen werden, als es im Layout je dargestellt wird. Wer ein Kamerabild in voller Auflösung einbindet und es per CSS auf Spaltenbreite schrumpft, überträgt ein Vielfaches der nötigen Daten. Messen Sie die tatsächliche Anzeigebreite in Ihrem Layout und leiten Sie daraus die Vorlage ab.

Zweitens die Pixeldichte. Displays mit hoher Pixeldichte stellen ein Bild schärfer dar, wenn eine Variante mit entsprechend mehr Bildpunkten vorliegt. Sie brauchen dafür keine Sonderbehandlung und keine doppelte Pflege: Die höher aufgelösten Varianten gehören einfach als zusätzliche Einträge in die responsive Auslieferung aus Schritt 7. Das Gerät wählt dann selbst.

Drittens die Kompression. Reduzieren Sie die Qualitätsstufe so weit, bis der Unterschied bei normaler Betrachtung sichtbar würde, und bleiben Sie eine Stufe darüber. Bei Fotos mit viel Struktur ist der Spielraum groß, bei glatten Flächen und Farbverläufen klein, weil dort Artefakte früh auffallen. Entfernen Sie außerdem überflüssige Metadaten aus der Datei, sofern Sie sie nicht bewusst brauchen.

Der Effekt betrifft immer nur die Bilddateien selbst. Ob Ihre Seite insgesamt schnell ist, hängt an vielen weiteren Faktoren; hier geht es allein darum, dass die Bilder nicht der Bremsklotz sind.

Schritt 5: Der Alt-Text

Aussagekräftige Alt-Texte liefern Google zusammen mit dem Dateinamen Hinweise zum Inhalt und Kontext eines Bildes. Gleichzeitig ist der Alt-Text das, was Screenreader vorlesen. Beide Zwecke führen zur selben Anforderung: Ein präziser Alt-Text beschreibt den sichtbaren Bildinhalt knapp und im jeweiligen Seitenkontext, statt Keywords aufzuzählen.

Vier Regeln, die in der Praxis tragen:

• Beschreiben Sie, was zu sehen ist, nicht, was Sie ranken wollen.
• Beginnen Sie nicht mit Bild von oder Grafik zeigt. Dass es ein Bild ist, weiß die vorlesende Software bereits.
• Halten Sie sich kurz. Ein Satz genügt fast immer; komplexe Diagramme erklären Sie besser im Fließtext oder in der Bildunterschrift.
• Rein dekorative Bilder bekommen ein leeres Alt-Attribut, nicht ein weggelassenes. Weggelassen bedeutet für Screenreader oft, dass stattdessen der Dateiname vorgelesen wird.

Das Keyword darf im Alt-Text vorkommen, wenn es die Szene tatsächlich beschreibt. Es muss aber nicht in jedem Bild derselben Seite stehen.

Schritt 6: Bildunterschrift, Titel und Umfeld

Die Bildunterschrift ist sichtbarer Text und wird gelesen, oft sogar dann, wenn der Fließtext nur überflogen wird. Sie eignet sich für die Einordnung, die im Alt-Text keinen Platz hat: Wer ist zu sehen, wann entstand die Aufnahme, was ist die Pointe des Diagramms.

Das title-Attribut dagegen erscheint bestenfalls als Tooltip und ist auf Touchgeräten unsichtbar. Es ersetzt keinen Alt-Text und ist kein Pflichtfeld.

Wichtiger als beide ist das direkte Textumfeld. Steht über dem Bild eine Zwischenüberschrift, die zum Motiv passt, und darunter ein Absatz, der es aufgreift, dann ist der Kontext eindeutig. Ein Bild, das isoliert zwischen zwei thematisch fremden Absätzen sitzt, bleibt schwerer zuzuordnen.

Schritt 7: Sauber einbinden und responsiv ausliefern

Google empfiehlt, Bilder über semantische HTML-Elemente wie img einzubetten, weil in CSS eingebundene Hintergrundbilder nicht auf dieselbe Weise indexiert werden. Das ist die wichtigste technische Einzelregel dieses Leitfadens: Jedes Bild, das gefunden werden soll, gehört ins HTML. CSS-Hintergründe bleiben Dekoration vorbehalten.

Responsive Bilder lassen sich mit dem picture-Element oder den Attributen srcset und sizes an unterschiedliche Geräte und Darstellungsgrößen anpassen. Der Unterschied in der Praxis:

• srcset plus sizes liefert dasselbe Motiv in mehreren Auflösungen. Der Browser wählt anhand von Viewport und Pixeldichte. Das ist der Normalfall.
• picture wählt zwischen verschiedenen Quellen. Damit liefern Sie etwa WebP mit JPEG als Rückfallebene aus oder für schmale Bildschirme einen anderen Bildausschnitt.

Ein Beispiel für den Normalfall:

<img
  src="werkstatt-bremsscheibe-wechsel-800.jpg"
  srcset="werkstatt-bremsscheibe-wechsel-400.jpg 400w,
          werkstatt-bremsscheibe-wechsel-800.jpg 800w,
          werkstatt-bremsscheibe-wechsel-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="800" height="533"
  alt="Mechaniker wechselt eine Bremsscheibe an einer Hebebühne"
  loading="lazy">

Drei Details in diesem Beispiel verdienen Aufmerksamkeit:

width und height sind angegeben. Damit kennt der Browser das Seitenverhältnis, bevor die Datei geladen ist, und reserviert den Platz. Ohne diese Angaben springt das Layout beim Nachladen.

loading=“lazy” verschiebt das Laden, bis das Bild in die Nähe des sichtbaren Bereichs kommt. Genau dieses Attribut gehört nicht an das große Bild ganz oben auf der Seite. Dort verzögert es die Anzeige des wichtigsten Motivs.

sizes beschreibt die Anzeigebreite im Layout, nicht die Bildgröße. Ist der Wert falsch, wählt der Browser trotz korrekter srcset-Liste die falsche Datei.

Schritt 8: Dafür sorgen, dass die Bilder gefunden werden

Ein technisch perfektes Bild nützt nichts, wenn es nicht erreichbar oder nicht auffindbar ist. Drei Punkte:

Nicht blockieren. Prüfen Sie, ob Ihre robots.txt das Bildverzeichnis oder den Pfad Ihres Bilder-CDN ausschließt. Ein pauschaler Ausschluss von Upload-Ordnern ist ein häufiger, stiller Fehler.

Bilder-Sitemap. Eine Bilder-Sitemap kann Google dabei helfen, Bilder zu finden, die andernfalls möglicherweise nicht entdeckt würden. Das lohnt sich vor allem, wenn Bilder erst durch JavaScript eingebunden werden, auf einer eigenen Domain liegen oder in Galerien stecken, die nachladen. Bei einer klassischen Seite mit Bildern direkt im HTML ist der Zusatznutzen kleiner.

Strukturierte Daten. Strukturierte Daten können Google dabei helfen, Bilder bestimmten Inhaltstypen zuzuordnen und sie für geeignete Rich-Suchergebnisse zu verwenden. Für Rezepte, Produkte oder Artikel gehört die Bild-URL also in das jeweilige Markup, nicht nur ins HTML.

Der Ablauf in WordPress

In WordPress lässt sich der komplette Weg als kurze Routine abarbeiten:

1. Vor dem Upload: Bild auf die im Layout benötigte Maximalbreite herunterrechnen, komprimieren, Datei beschreibend benennen.
2. Beim Upload: In der Mediathek den Alternativtext ausfüllen. Das Feld steht direkt neben der Vorschau. Titel und Beschreibung sind optional, die Bildunterschrift füllen Sie, wenn sie sichtbar gebraucht wird.
3. Beim Einfügen: Ausrichtung und Größe wählen, aber die Verlinkung auf die Mediendatei nur setzen, wenn ein Klick auf das Bild wirklich Sinn ergibt. Der Standard Zur Mediendatei erzeugt sonst Seiten ohne eigenen Inhalt.
4. Automatik nutzen: WordPress erzeugt beim Upload mehrere Bildgrößen und baut daraus selbst srcset-Listen. Ihre Aufgabe ist es, eine ausreichend große Vorlage zu liefern, damit die Zwischengrößen sauber entstehen.
5. Format ergänzen: Für die WebP-Auslieferung sorgt entweder Ihr Hosting, Ihr CDN oder ein Plugin, das Kopien anlegt und ausliefert. Prüfen Sie danach im Browser, welches Format tatsächlich ankommt.
6. Aufräumen: Alte Uploads, die nirgends eingebunden sind, kosten nur Platz und Pflegeaufwand. Bilder, die noch verlinkt sind, dürfen Sie nicht ersatzlos löschen.

Bei Themes mit Bildern in Slidern, Headern oder Kacheln lohnt ein Blick in den Quelltext: Solche Bereiche binden Motive gern als CSS-Hintergrund ein. Wenn dort ein Bild steckt, das gefunden werden soll, gehört es in ein img-Element.

Erfolgskontrolle

Bilder-SEO ist messbar, wenn Sie an der richtigen Stelle nachsehen.

Google Search Console, Suchtyp Bild. Im Leistungsbericht lässt sich der Suchtyp von Web auf Bild umstellen. Damit sehen Sie Impressionen, Klicks und Suchanfragen, die tatsächlich aus der Bildersuche kommen. Das ist die einzige Quelle, die diesen Kanal sauber trennt. Setzen Sie einen Ausgangswert, bevor Sie mit der Optimierung beginnen, sonst fehlt Ihnen später der Vergleich.

URL-Prüfung. Für eine einzelne Seite zeigt die URL-Prüfung, was Google beim Rendern gesehen hat. Wenn ein Bild dort fehlt, liegt es meist an Blockierung, an einer JavaScript-Einbindung oder an einem CSS-Hintergrund.

Stichprobe im Browser. Öffnen Sie eine optimierte Seite in den Entwicklerwerkzeugen und prüfen Sie für ein konkretes Bild drei Werte: das ausgelieferte Format, die tatsächlich übertragene Dateigröße und die geladene Variante aus dem srcset. Weicht die geladene Variante stark von der Anzeigebreite ab, stimmt Ihre sizes-Angabe nicht.

Prüfwerte am Bild statt an der Seite. Wenn ein Geschwindigkeitswerkzeug ein Bild bemängelt, sind meist vier Hinweise bildbezogen: zu große Abmessungen, ungünstiges Format, fehlende Größenangaben und ein verzögert geladenes Bild im ersten sichtbaren Bereich. Diese vier arbeiten Sie ab. Alles Weitere ist eine andere Baustelle.

Rechnen Sie mit Geduld. Bildindexierung braucht Zeit, und ein neu benanntes oder neu hochgeladenes Bild startet für die Bildersuche bei null.

Die häufigsten Fehler auf einen Blick

• Kameradateinamen wie IMG_4821.jpg unverändert hochladen.
• Alt-Texte mit Keywords füllen statt mit einer Beschreibung.
• Alt-Attribut bei dekorativen Bildern weglassen statt leer zu setzen.
• Bilder in voller Kameraauflösung einbinden und per CSS verkleinern.
• loading=“lazy” auch am ersten, großen Bild der Seite setzen.
• width und height weglassen und dafür ein springendes Layout in Kauf nehmen.
• Inhaltlich wichtige Motive als CSS-Hintergrund einbinden.
• Das Upload-Verzeichnis versehentlich in der robots.txt sperren.
• Dateien nach der Veröffentlichung umbenennen, ohne weiterzuleiten.

Eine Reihenfolge für den Anfang

Wenn Sie eine bestehende Website vor sich haben und nicht wissen, wo Sie anfangen sollen, arbeiten Sie in dieser Reihenfolge. Sie ist nach Aufwand-Wirkungs-Verhältnis sortiert.

1. Prüfen, ob Bilder überhaupt indexierbar sind: keine Blockade, keine reinen CSS-Hintergründe bei wichtigen Motiven.
2. Auf den wichtigsten Seiten Alt-Texte ergänzen und korrigieren.
3. Die größten Bilddateien identifizieren, herunterrechnen und neu komprimieren.
4. width, height und die richtige Lazy-Loading-Entscheidung setzen.
5. Auf WebP mit Rückfallebene umstellen.
6. Responsive Varianten und sizes prüfen und korrigieren.
7. Bei allen neuen Bildern ab sofort mit dem Dateinamen anfangen.
8. Nach einigen Wochen den Suchtyp Bild in der Search Console gegen den Ausgangswert halten.

Die ersten vier Punkte kosten wenig Zeit und beheben die Fehler, die am häufigsten vorkommen. Alles danach ist Feinarbeit, die sich vor allem für Seiten lohnt, bei denen das Bild selbst ein Grund für den Besuch ist.