Bilder-SEO: Wie Alt-Texte und Dateinamen den Unterschied machen

Die meisten Betriebe schieben Fotos auf ihre Website hoch — und denken dabei nicht eine Sekunde an SEO. Das ist verständlich, aber ein Fehler. Bilder sind einer der größten ungenutzten SEO-Hebel, besonders für lokale Unternehmen wie Handwerker, Makler oder Dienstleister.

Dabei kostet es keine Programmierkenntnisse, Bilder richtig aufzubereiten. Es braucht nur das Wissen, worauf es ankommt. Dieser Artikel zeigt dir genau das — in vier konkreten Schritten.

Warum Bilder für SEO wichtig sind

Google kann Bilder nicht „sehen" wie ein Mensch. Die KI kann zwar inzwischen Bildinhalte grob erkennen, verlässt sich für die Einordnung aber primär auf Text: Dateinamen, Alt-Attribute, umliegenden Fließtext und Seitenkontext.

Das bedeutet: Ein Foto deines Betriebs ohne beschreibenden Dateinamen und ohne Alt-Text ist für Google ein leeres Dokument. Es trägt nichts zur Relevanz der Seite bei — weder für allgemeine Suchanfragen noch für lokale.

Gleichzeitig gilt: Schlecht optimierte Bilder bremsen die Ladezeit. Und Ladezeit ist ein direkter Rankingfaktor. Ein 4-MB-JPEG auf der Startseite kostet nicht nur SEO-Punkte, sondern auch Besucher — wer auf dem Smartphone drei Sekunden auf den ersten sichtbaren Inhalt wartet, ist weg.

Dateinamen: Der erste Kontext-Hinweis für Google

Wenn du ein Foto direkt von der Kamera auf deine Website lädst, heißt die Datei in der Regel IMG_4821.jpg oder ähnliches. Für Google ist das bedeutungslos — ein zufälliger Zahlencode sagt nichts über den Bildinhalt aus.

Besser ist ein beschreibender, deutschsprachiger Dateiname mit Bindestrichen als Trennzeichen (keine Leerzeichen, keine Unterstriche). Er sollte beschreiben, was auf dem Bild zu sehen ist — und wenn möglich, auch wo.

Gute Dateinamen folgen dem Muster: was-macht-wer-wo.jpg. Also zum Beispiel:

• elektriker-solingen-sicherungskasten.jpg
• maklerin-duesseldorf-hausuebergabe.jpg
• dachdeckerbetrieb-wuppertal-ziegelreparatur.jpg

Wörter, die für dein Suchfeld relevant sind, gehören in den Dateinamen — aber nicht auf Teufel komm raus. Keyword-Stuffing (fünf Keywords hintereinander) schadet eher als es hilft. Beschreibend und natürlich ist die Leitlinie.

Alt-Texte: Was Google statt Augen benutzt

Das alt-Attribut im HTML-Bild-Tag ist ursprünglich eine Barrierefreiheitsfunktion: Screenreader lesen es vor, wenn jemand das Bild nicht sehen kann. Google nutzt es zusätzlich als primären Textsignal für den Bildinhalt.

Ein fehlendes Alt-Attribut ist deshalb doppelt schlecht: schlechte Barrierefreiheit und verpasstes SEO-Signal. Beides ließe sich in Sekunden beheben.

Ein guter Alt-Text beschreibt das Bild so, als würdest du es jemandem am Telefon erklären — konkret, sachlich, knapp. Und bei lokalen Dienstleistern: mit Ort und Leistung, wenn sie zum Bildinhalt passen.

<img src="IMG_4821.jpg">

<img
  src="elektriker-solingen-sicherungskasten.jpg"
  alt="Elektriker tauscht Sicherungskasten in Solingen aus"
  loading="lazy"
  width="800"
  height="533">

Was im Alt-Text stehen sollte: Wer ist zu sehen oder was passiert? Wo findet es statt (wenn relevant)? Welche Leistung wird gezeigt? Was im Alt-Text nicht stehen sollte: der Satz „Foto von …", Keywords ohne Kontext, oder ein Satz, der keinen Bezug zum tatsächlichen Bildinhalt hat.

WebP: Das richtige Format für die Ladezeit

JPEG und PNG sind die klassischen Bildformate im Web — beide funktionieren, aber beide liefern größere Dateien als nötig. Das modernere Format WebP erzielt bei gleichbleibender visueller Qualität in der Regel 25–40% kleinere Dateien.

Alle aktuellen Browser unterstützen WebP. Wenn du mit einem CMS arbeitest (WordPress, Squarespace, Webflow), konvertiert ein Plugin oder eine Einstellung Bilder oft automatisch. Bei statischen HTML-Websites lohnt sich ein Tool wie Squoosh (kostenlos, direkt im Browser), das Bilder komprimiert und in WebP konvertiert.

Als Faustregel gilt: Kein Bild auf einer Startseite sollte unkomprimiert über 150 KB groß sein. Fotos im Blog oder in Galerien dürfen etwas größer sein, aber 400–500 KB sollte die Obergrenze für normale Inhaltsbilder sein.

Lazy Loading: Bilder laden, wenn sie gebraucht werden

Standardmäßig lädt der Browser alle Bilder einer Seite beim ersten Aufruf — auch jene, die weit unten stehen und der Nutzer vielleicht nie sieht. Das kostet Ladezeit für den ersten sichtbaren Bereich.

Mit dem Attribut loading="lazy" sagst du dem Browser: Lade dieses Bild erst, wenn es sich dem sichtbaren Bereich nähert. Das ist eine einzeilige Änderung im HTML und verbessert die wahrgenommene Ladezeit messbar — besonders auf Seiten mit vielen Bildern.

Wichtig: Das erste prominente Bild der Seite — der sogenannte LCP-Kandidat (das größte sichtbare Element) — sollte loading="eager" haben oder das Attribut weglassen. Lazy Loading auf dem Hero-Bild würde paradoxerweise die wahrgenommene Startgeschwindigkeit verschlechtern.

Ebenfalls empfehlenswert: Gib jedem Bild explizite width- und height-Attribute. Der Browser kann damit den Platz für das Bild reservieren, bevor es geladen ist — und verhindert so unerwünschte Layout-Verschiebungen (CLS), die ebenfalls in Googles Core Web Vitals einfließen.

Checkliste: 6 Punkte für optimierte Bilder

Mit diesen sechs Punkten stellst du sicher, dass deine Bilder das volle SEO-Potenzial ausschöpfen — ohne tiefes technisches Wissen: