Warum deine schönsten Fotos im Web unsichtbar sind – und wie du das änderst

Gastbeitrag von Sandra Wild – UI/UX-Expertin und Mitgründerin der Digitalagentur die Komplizinnen

Du hast tolle Bilder auf deiner Website – aber warum sind deine Fotos im Web unsichtbar? Google sieht sie kaum und User:innen warten teils ewig, bis sie laden? Das Problem liegt aber nicht am Motiv, sondern an der technischen Aufbereitung. Dieser Artikel zeigt dir die 5 wichtigsten Hebel, mit denen deine Bilder endlich sichtbar werden – für Suchmaschinen, für deine User:innen und für alle Geräte.

Die 5 wichtigsten Hebel für die Sichtbarkeit deiner Bilder

1.  Alt-Texte hinterlegen – Bilder für Suchmaschinen lesbar machen
2. Dateiname optimieren – schon vor dem Upload zählt's
3. Dateigröße reduzieren – Ladezeit beeinflusst die Sichtbarkeit
4. Korrektes Bildformat wählen – bessere Performance durch WebP oder avif
5. Bildbeschriftung ergänzen – die oft unterschätzte Caption

1. Alt-Texte: Was Suchmaschinen und Menschen wirklich sehen

Suchmaschinen können Bilder nicht „sehen". Stattdessen lesen sie den Alt-Text (alternativer Text), der im HTML-Code hinterlegt ist. Fehlt der Alt-Text, ist das Bild für Google so gut wie unsichtbar.

Was ein guter Alt-Text leisten muss:

• Der Alt-Text beschreibt das Bild so, dass jemand, der es nicht sieht, versteht was darauf zu sehen ist
• Er enthält relevante Keywords – aber natürlich eingebettet, kein Keyword-Stuffing
• Er ist kurz und präzise (ca. 50–125 Zeichen sind ideal)

Der Alt-Text ist aber nicht nur für Suchmaschinen relevant – er spielt auch eine wichtige Rolle für die Barrierefreiheit. Menschen, die auf einen Screenreader angewiesen sind, bekommen den Bildinhalt über den Alt-Text vorgelesen. Fehlt er, wird das Bild einfach übersprungen – oder schlimmer: der Dateiname vorgelesen. „IMG_4872.jpg" ist für niemanden eine hilfreiche Information!

Ein gut formulierter Alt-Text sorgt also gleichzeitig dafür, dass deine Website für alle zugänglich ist – unabhängig davon, ob jemand das Bild sehen kann oder nicht. Barrierefreiheit und SEO sind hier kein Widerspruch, sondern zwei Ziele mit derselben Lösung.

Wie setze ich einen Alt-Text?

Für WordPress-Anwenderinnen: In der Mediathek direkt beim Upload oder im Gutenberg-Editor in der rechten Seitenleiste unter „Alternativtext".

Mein Tipp:

Ein leerer Alt-Text (alt="") ist korrekt für rein dekorative Bilder – z. B. ein grafisches Trennmuster. Screenreader überspringen diese dann, was gut ist, da das Bild nicht inhaltlich relevant ist. Bei inhaltlich relevanten Bildern darf das Feld aber nie leer bleiben!

2. Dateiname: Bevor das Bild überhaupt auf die Website kommt

Der Dateiname ist eine oft übersehene SEO-Chance. Google liest ihn aus und zieht Information daraus. Denk mal daran, wie du deine letzten Bilder benannt hast, was soll zum Beispiel IMG_4872.jpg einer Suchmaschine schon sagen?

Regeln für gute Dateinamen:

• Beschreibend und auf den Inhalt bezogen
• Kleinbuchstaben, keine Leerzeichen (stattdessen Bindestriche)
• Relevante Keywords einbauen, aber bitte auch hier nicht übertreiben

Mein Tipp:

Bilder nach dem Upload umzubenennen ist nicht bzw. wenn nur unter Aufwand möglich. Benenne die Bilder daher schon vor dem Upload richtig und spare dir so Zeit und Ärger!

3. Dateigröße & Ladezeit: Wer wartet, springt ab

Ein Bild mit 4 MB auf einer Webseite ist ein Problem, denn: Große Bilder verlangsamen die Ladezeit. Und das ist nicht nur ärgerlich für deine User:innen, zusätzlich bestraft Google dich mit einem schlechten Ranking.
Denke auch an dein eigenes Surfverhalten: Wartest du beim Online-Shopping 5 Sekunden bis das Produktbild geladen ist? Wohl kaum. Langsame Ladezeiten kosten dich Besucher:innen!

Richtwerte für die Praxis

• Hintergrundbild, Hero-Bild: max. 200–400 KB
• Produktbild, Beitragsbild: max. 100–150 KB
• Thumbnail, Icon max. 20–50 KB

Meine Tipps zur Aufbereitung deiner Bilder

• Komprimiere deine Bilder vor dem Upload
  Tools wie Squoosh, TinyPNG oder ImageOptim (Mac) reduzieren die Dateigröße maßgeblich, meist ohne sichtbaren Qualitätsverlust
• Richtige Dimensionen verwenden
  Ein Bild, das 800 px breit angezeigt wird, muss nicht 3.000 px breit hochgeladen werden. Schneide die Bilder auf das Format zu, dass du tatsächlich brauchst und spare somit unnützen Datenballast.
• Lazy Loading nutzen
  Bilder werden erst geladen, wenn sie im sichtbaren Bereich erscheinen; in WordPress ist das seit Version 5.5 standardmäßig aktiv

4. Bildformat: WebP ist das neue JPEG

Lange war JPEG der Standard für Fotos im Web. Inzwischen gibt es aber bessere Alternativen.

Die gängigen Web-Bildformate im Überblick:

• WebP
  Geeignet für: Fotos, komplexe Grafiken
  Vorteil: Bis zu 30 % kleiner als JPEG bei gleicher Qualität
• AVIF
  Geeignet für: Fotos (moderne Browser)
  Vorteil: Noch bessere Kompression als WebP
• SVG
  Geeignet für: Logos, Icons, Illustrationen
  Vorteil: Vektorbasiert, skaliert ohne Qualitätsverlust
• PNG
  Geeignet für: Grafiken mit Transparenz
  Vorteil: Verlustfrei, aber größer als WebP
• JPEG
  Geeignet für: Fotos (Legacy)
  Vorteil: Weit verbreitet, aber nicht mehr optimal

Mein Tipp:

WebP ist im Moment noch der beste Kompromiss aus Qualität, Dateigröße und Browser-Unterstützung. Gegenüber JPEG spart WebP bis zu 30 % Dateigröße – bei gleichbleibender Qualität. Das Format wird von allen gängigen Browsern unterstützt, du musst dir also keine Sorgen um die Kompatibilität machen.
Viele moderne Website-Themes und Page-Builder konvertieren Bilder automatisch ins WebP-Format. Alternativ kannst du auf ein geeignetes Plugin zurückgreifen – bewährte Optionen sind zum Beispiel Imagify oder ShortPixel. Beide sind einfach einzurichten und arbeiten im Hintergrund, ohne dass du jedes Bild manuell anfassen musst.

5. Bildbeschriftung (Caption): Unterschätzt, aber wirksam

Die Bildunterschrift – also der sichtbare Text direkt unter einem Bild – wird von Suchmaschinen besonders beachtet. Google wertet sie als stark kontextrelevant, weil Nutzer:innen Captions erfahrungsgemäß häufig lesen.

Wann macht eine Caption Sinn?

• Bei redaktionellen Inhalten und Blogartikeln: immer
• Bei Produktbildern: optional, aber sinnvoll für Kontext und Keywords
• Bei rein dekorativen Elementen: weglassen

Was eine gute Caption enthält:

• Eine kurze, informative Beschreibung des Bildinhalts
• Gegebenenfalls: relevante Keywords, Ortsangaben, Namen
• Keine wiederholte Kopie des Alt-Textes: Caption und Alt-Text haben unterschiedliche Funktionen und sollen sich daher auch unterscheiden

Deine Checklist: Bilder SEO-tauglich hochladen

Vor dem Upload:

• Korrekter Zuschnitt auf das benötigte Format
• Passender Dateiname
• Komprimierung des Bildes

Auf der Website:

• Hinterlegen des Alt-Textes
• Hinzufügen der passenden Caption (Bildbeschriftung)
• ggf. Umwandlung des Formats auf WebP

Deine Bilder erzählen Geschichten – aber nur, wenn sie auch ankommen. Du musst kein SEO-Profi sein: Mit ein bisschen Vorbereitung kannst auch du sicherstellen, dass Google deine Bilder findet, die Seite schnell lädt und deine Inhalte auf allen Ebenen die Aufmerksamkeit bekommen, die sie verdienen.