Image SEO: Der komplette Leitfaden zur Bildoptimierung für Suchmaschinen

Eine Website, auf der Bilder das gesamte Problem waren

Letztes Jahr habe ich eine E-Commerce-Website geprüft, die technisch alles richtig machte — schnelles Hosting, sauberer Code, guter Content. Aber ihre mobile Seitengeschwindigkeit lag bei 34 von 100. Ich konnte nicht herausfinden, warum, bis ich mir das Seitengewicht ansah. Ihre Homepage lud 14 MB Bilder beim ersten Paint. Vierzehn Megabyte. Für eine Homepage.

Der Übeltäter? Jedes Produktfoto wurde als 3000 px breites PNG direkt von der Kamera des Fotografen hochgeladen. Keine Komprimierung, keine Größenanpassung, keine modernen Formate. Auf Mobilgeräten luden Nutzer Desktop-große Bilder über 4G-Verbindungen. Wir konvertierten alles zu WebP, fügten responsives Sizing hinzu und brachten das gesamte Bild-Volumen auf 800 KB herunter. Die Seitengeschwindigkeit sprang auf 87. Diese eine Korrektur — nur Bilder — verbesserte die Core Web Vitals von „schlecht" auf „gut" auf der gesamten Website.

Diese Erfahrung hat mein Denken über Image SEO verändert. Es ist kein nettes Extra. Es ist oft der größte einzelne Performance-Engpass auf einer Seite.

Alt-Text: Das, was du wahrscheinlich falsch machst

Alt-Text erfüllt zwei Zwecke, die die Leute vermischen: Barrierefreiheit für Screenreader und Kontext für Suchmaschinen. Beides zählt, aber sie bedienen unterschiedliche Zielgruppen.

Für die Barrierefreiheit beschreibt Alt-Text, was das Bild zeigt, damit jemand, der es nicht sehen kann, dieselben Informationen erhält. Für SEO sagt Alt-Text den Suchmaschinen, was das Bild darstellt, damit es in den Bildsuchergebnissen erscheinen kann. Guter Alt-Text erfüllt beide Zwecke gleichzeitig.

Was ich ständig falsch laufen sehe. Leute schreiben Alt-Text wie „Bild von Produkt" oder stopfen einfach Keywords hinein: „kaufen blauer Widget online bester Preis." Beides hilft niemandem. Der beste Alt-Text ist spezifisch und beschreibend: „Frau wandert bei Sonnenuntergang mit rotem Rucksack auf einem Bergpfad" — das ist für einen Screenreader-Nutzer nützlich UND gibt Google klaren Kontext.

Halte ihn unter 125 Zeichen. Screenreader schneiden längere Texte ab, also verschwendest du selbst dann deine Zeit, wenn du gründlich sein willst. Dekorative Bilder (Hintergrundmuster, Platzhalterbilder) sollten leere Alt-Attribute haben — alt="" — damit Screenreader sie komplett überspringen.

Ein Fehler, den ich früh gemacht habe: Ich habe für jede Produktvariante denselben Alt-Text geschrieben. „Blauer Laufschuh" war der Alt-Text für die blauen, roten und grünen Versionen. Google konnte sie in der Bildersuche nicht unterscheiden. Jede Variante braucht einen eigenen Alt-Text, der sie von den anderen abhebt.

Dateinamen: Der Fünf-Minuten-Fix, der zählt

Ich weiß, das klingt simpel, aber ich sehe immer noch Websites mit Bildern namens „IMG_4729.JPG" und „photo-1.png". Suchmaschinen nutzen Dateinamen als Signal für den Bildinhalt. Dateien umzubenennen dauert fünf Minuten und kostet nichts.

Die Konvention, der ich folge: Bindestriche zwischen Wörtern, das primäre Keyword einbeziehen und beschreibend sein. red-leather-wallet.jpg schlägt IMG_4729.JPG jedes Mal. seo-audit-checklist-2026.png sagt Google genau, worum es in diesem Bild geht.

Bildformate: Meine ehrliche Einschätzung

Alle drängen jetzt auf WebP als Standardformat, und in den meisten Fällen haben sie recht. WebP liefert 25-35% kleinere Dateien als JPEG bei vergleichbarer Qualität. Die Browserunterstützung liegt bei über 96%. Für Fotos und komplexe Bilder ist es der Standard.

Aber ich werde dem „WebP für alles"-Haufen widersprechen. Bei Screenshots und Bildern mit Text kann WebP Kompressions-Artefakte an scharfen Kanten erzeugen. Nach Tests auf einer Screenshot-lastigen Tutorial-Seite — WebP-Artefakte machten den Text schwerer lesbar. PNG war für diese speziellen Bilder tatsächlich besser, obwohl die Datei größer ist. Manchmal ist das „beste" Format nicht das beste für deinen spezifischen Anwendungsfall.

AVIF ist technisch überlegen gegenüber WebP — bis zu 50% kleinere Dateien — aber die Browserunterstützung liegt immer noch bei etwa 80%. Ich nutze es als Verbesserung mit WebP-Fallback. Die meisten Nutzer werden den Unterschied nicht bemerken, aber die mit unterstützten Browsern bekommen einen schnelleren Ladevorgang.

SVG für Logos und Icons ist ein Muss. Vektorformate skalieren perfekt und sind typischerweise winzige Dateien. Wenn dein Logo immer noch ein PNG ist, behebe das noch heute.

Hier ist die Formate-Entscheidung, die ich verwende: Fotos zu WebP, Screenshots bleiben PNG, Logos und Icons zu SVG, und AVIF mit WebP-Fallback für Websites, bei denen jede Millisekunde Performance zählt.

Responsive Bilder: Hör auf, Desktop-Bilder auf Mobilgeräten auszuliefern

Das ist der zweitgrößte Performance-Killer nach der Komprimierung. Wenn du kein srcset verwendest, lädt jeder mobile Besucher dein Desktop-Bild in voller Größe herunter.

Das HTML ist unkompliziert:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description">

Der Browser wählt die richtige Größe basierend auf dem Viewport des Nutzers. Ein Handy bekommt die 400px-Version, ein Tablet 800px, ein Desktop 1200px. Einfaches Konzept, enorme Wirkung.

Auf der erwähnten E-Commerce-Website reduzierten allein responsive Bilder das durchschnittliche Bild-Volumen für mobile Nutzer um 60%. Das ist der Unterschied zwischen einer 3-Sekunden-Ladezeit und einer 1-Sekunden-Ladezeit auf einer typischen 4G-Verbindung.

Lazy Loading: Der richtige und der falsche Weg

Lazy Loading verzögert Below-the-Fold-Bilder, damit sie das anfängliche Rendering der Seite nicht blockieren. Native Browserunterstützung gibt es seit 2020, du kannst also einfach loading="lazy" hinzufügen:

<img src="photo.jpg" loading="lazy" alt="Description">

Aber hier ist der Fehler, den die Leute machen: Hero-Bilder lazy zu laden. Dein Above-the-Fold-Content sollte sofort laden. Lade nur Bilder lazy, die nach dem Scrollen erscheinen. Aus meiner Erfahrung laden Websites ihr Hero-Banner lazy, was den LCP zerstört, weil der Browser darauf wartet, das wichtigste visuelle Element zu laden.

Ein Hinweis: Wenn du ein CDN oder einen Bildoptimierungsdienst nutzt, prüfe, wie diese mit Lazy Loading umgehen. Einige Dienste fügen ihr eigenes Lazy-Loading-JavaScript hinzu, das mit dem nativen Lazy Loading kollidiert. Teste in den Chrome DevTools, um sicherzustellen, dass Bilder in der erwarteten Reihenfolge geladen werden.

Bild-Sitemaps: Google kann nicht indexieren, was es nicht finden kann

Wenn deine Bilder nicht in deiner Sitemap sind, ist Google darauf angewiesen, dein HTML zu crawlen, um sie zu entdecken. Das funktioniert für die meisten Bilder, aber nicht für Bilder, die per JavaScript geladen werden, Hintergrundbilder oder Bilder in Galerien und Karussells.

Bilder in deine XML-Sitemap aufzunehmen, gibt Google direkte Entdeckungswege:

<url>
  <loc>https://example.com/page</loc>
  <image:image>
    <image:loc>https://example.com/image.jpg</image:loc>
    <image:caption>Description of the image</image:caption>
  </image:image>
</url>

Ich hatte Websites, bei denen sich der Traffic aus der Bildersuche verdoppelte, nachdem Bilder zur Sitemap hinzugefügt wurden. Nicht weil die Bilder neu waren — Google konnte sie vorher einfach nicht finden.

Häufige Fehler, die ich in jedem Audit sehe

- Übergroße Bilder: 3000 px breit, obwohl 800 px für den Anzeigekontext reichen. Größe vor dem Upload anpassen.

- Falsches Format: PNG für Produktfotos, die WebP sein sollten. Der Dateigrößenunterschied ist schmerzhaft.

- Fehlender Alt-Text: Immer noch das häufigste Problem. In meinen letzten 20 Audits hatten 14 erhebliche Alt-Text-Lücken.

- Generische Dateinamen: „banner-final-v3.jpg" sagt Google nichts.

- Kein Lazy Loading: Jedes Bild, das beim Laden der Seite geladen wird, erzeugt einen Wasserfall aus Requests, der die Performance tötet.

- EXIF-Daten ignorieren: Das ist Nischen-Wissen, aber wenn deine Bilder Standort- oder Kamera-Daten enthalten, argumentieren manche SEOs, dass du sie aus Datenschutzgründen entfernen solltest. Andere sagen, die Metadaten helfen beim Kontext in der Bildersuche. Ich entferne sie bei Kundenwebsites vorsorglich.

Tools, die ich tatsächlich nutze

- Squoosh — mein Favorit für schnelle manuelle Komprimierung. Kostenlos, schnell, und der Qualitätsvergleichs-Slider ist exzellent.

- TinyPNG — Batch-Komprimierung, die gut für PNGs und WebPs funktioniert.

- Lighthouse — eingebaut in die Chrome DevTools. Führe es nach jeder Bildoptimierung aus, um die Wirkung zu überprüfen.

- AuditMe — prüft die Alt-Text-Abdeckung, Format-Optimierung und identifiziert Bilder, denen responsives Sizing fehlt, auf deiner gesamten Website.

Prüfe dein Image SEO

Führe eine kostenlose Bild-SEO-Analyse durch — prüfe Alt-Text-Abdeckung, Format-Optimierung und Lazy-Loading-Umsetzung.