Bilder-SEO: ALT-Text, Formate & Optimierung
Bilder machen deinen Content ansprechend, aber für Suchmaschinen sind sie im Grunde unsichtbare Kästen aus Pixeln, solange du ihnen nicht auf die Sprünge hilfst. Bilder-SEO ist die Praxis, deine Bilder so zu optimieren, dass sie schnell laden, in der Google-Bildersuche ranken, für jeden Besucher zugänglich bleiben und Crawlern den nötigen Kontext liefern. Dieser Leitfaden behandelt alles — vom Alt-Text über moderne Formate bis hin zu den Core Web Vitals.
1. Warum Bilder-SEO wichtig ist
Bilder sind nicht nur Dekoration. Richtig optimiert werden sie zu einem mächtigen, oft ungenutzten Traffic-Kanal und zu einem wichtigen Beitrag zur Nutzererfahrung. Deshalb verdienen sie deine Aufmerksamkeit:
- Traffic aus der Google-Bildersuche: Die Google-Bildersuche ist eine der größten Suchmaschinen der Welt. Richtig optimierte Bilder können in der Bildersuche und in den normalen SERPs ranken und qualifizierte Besucher auf deine Seite bringen, die du sonst nie erreichen würdest.
- Barrierefreiheit: Sehbehinderte Nutzer sind auf Screenreader angewiesen, die deinen Alt-Text vorlesen. Barrierefreie Bilder sind sowohl eine ethische Verpflichtung als auch ein Signal für hochwertigen Content.
- Seitengeschwindigkeit & Core Web Vitals: Bilder sind in der Regel die schwersten Assets einer Seite. Nicht optimierte Bilder verlangsamen das Laden und schaden deinen Werten für Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) — beides Rankingfaktoren.
- Kontext für Crawler: Suchmaschinen können ein Bild nicht "sehen". Alt-Text, Dateinamen, Bildunterschriften und umgebender Text sind die Art und Weise, wie Google versteht, was das Bild zeigt und wie es zu deinem Thema passt.
Das Fazit: Fehlender Alt-Text und überdimensionierte Bilder schaden deinem SEO direkt, sowohl durch verlorene Relevanzsignale als auch durch verschlechterte Performance-Kennzahlen.
2. Alt-Text: Das wichtigste Bildattribut
Das alt-Attribut (Alternativtext) ist eine kurze schriftliche Beschreibung eines Bildes, die im
HTML eingebettet ist. Es ist das mit Abstand wichtigste Bilder-SEO-Element und erfüllt zwei entscheidende Zwecke:
- Barrierefreiheit: Screenreader sagen sehbehinderten Nutzern den Alt-Text an, damit sie verstehen, was das Bild zeigt.
- Kontext für Suchmaschinen: Google liest den Alt-Text, um das Bild zu verstehen, was ihm hilft, in der Google-Bildersuche zu ranken, und die thematische Relevanz der Seite stärkt.
Der Alt-Text wird außerdem im Browser angezeigt, wenn das Bild nicht geladen werden kann, und bietet so einen Fallback für Nutzer mit langsamen Verbindungen.
Wie du großartigen Alt-Text schreibst
Beschreibe das Bild klar und prägnant, so als würdest du es jemandem erklären, der es nicht sehen kann. Sei konkret, halte ihn unter etwa 125 Zeichen und baue ein relevantes Keyword nur dann ein, wenn es natürlich passt — erzwinge es niemals.
<!-- Schlecht: vage und nutzlos -->
<img src="hund.jpg" alt="Hund">
<!-- Schlecht: Keyword-Stuffing -->
<img src="hund.jpg" alt="Hund Welpe süß Hund beste Hunde Hund kaufen Welpe günstiger Hund">
<!-- Gut: beschreibend und natürlich -->
<img src="golden-retriever-welpe.jpg"
alt="Golden-Retriever-Welpe spielt mit einem Tennisball im Garten">Dekorative Bilder: Verwende ein leeres alt
Nicht jedes Bild braucht beschreibenden Alt-Text. Rein dekorative Bilder — Hintergrund-Verzierungen, Trennlinien, Abstandsgrafiken — sollten ein leeres alt-Attribut verwenden. Das weist Screenreader an, das Bild komplett zu überspringen, statt einen bedeutungslosen Dateinamen vorzulesen.
<!-- Dekoratives Bild: absichtlich leeres alt -->
<img src="trenner-schnoerkel.svg" alt="">Achtung: Lass das alt-Attribut bei aussagekräftigen Bildern niemals komplett
weg und überfrachte es niemals mit Keywords. Fehlender Alt-Text ist ein Versagen in puncto Barrierefreiheit
und eine vertane SEO-Chance, während mit Keywords vollgestopfter Alt-Text als manipulativ gelesen werden kann
und sowohl für Nutzer als auch für Crawler nach Spam aussieht.
3. Das Title-Attribut von Bildern
Das title-Attribut wird oft mit alt verwechselt, aber sie sind sehr unterschiedlich. Das
title-Attribut liefert ergänzende Informationen, die typischerweise als kleiner Tooltip
erscheinen, wenn ein Nutzer mit der Maus über das Bild fährt.
<img src="golden-retriever-welpe.jpg"
alt="Golden-Retriever-Welpe spielt mit einem Tennisball"
title="Unser 10 Wochen alter Welpe, Biscuit">Anders als der Alt-Text hat das title-Attribut sehr wenig SEO-Gewicht und wird von Screenreadern weitgehend ignoriert (es ist also kein Ersatz für den Alt-Text). Es ist außerdem auf Touch-Geräten unsichtbar, wo es keinen Hover-Zustand gibt. Verwende es nur, wenn ein Hover-Tooltip die Nutzererfahrung wirklich verbessert — ansonsten ist es optional und kann bedenkenlos weggelassen werden.
4. Beschreibende Dateinamen
Bevor du ein Bild überhaupt hochlädst, gib ihm einen aussagekräftigen Namen. Suchmaschinen lesen Dateinamen als
weiteren Hinweis auf den Inhalt des Bildes. Ein kamera-typischer Standardname wie IMG_0042.jpg sagt
Google nichts, während ein beschreibender Name dein Thema stärkt.
- Sei beschreibend: Verwende Wörter, die beschreiben, was das Bild tatsächlich zeigt.
- Verwende Bindestriche, keine Unterstriche: Google behandelt Bindestriche als Worttrenner,
liest Unterstriche aber als Verbinder, sodass
golden_retrieverals ein Wort gelesen wird. - Verwende Kleinbuchstaben: Vermeide Leerzeichen und Sonderzeichen, die in hässliche URLs kodiert werden.
IMG_0042.jpg
Screenshot 2026-06-11 um 14.32.png
golden-retriever-welpe.jpg
blaue-laufschuhe-seitenansicht.webp5. Dateigröße & Komprimierung
Große Bilddateien sind die Hauptursache für langsame Seiten. Da Bilder häufig das Largest-Contentful-Paint-Element sind, kann ein überdimensioniertes Hero-Bild im Alleingang deinen LCP-Wert ruinieren und Nutzer frustrieren, bevor sie deinen Content überhaupt sehen.
- Die Faustregel: Versuche, die meisten Webbilder unter 300 KB zu halten. Hero-Bilder dürfen etwas größer sein, aber Thumbnails und Inline-Bilder sollten deutlich kleiner sein.
- Vor dem Hochladen verkleinern: Liefere niemals ein 4000 px breites Foto in einem 600 px breiten Slot aus. Skaliere das Bild auf die maximale Größe, in der es tatsächlich angezeigt wird.
- Verlustbehaftet vs. verlustfrei: Verlustbehaftete Komprimierung (JPEG, WebP) verwirft einige Daten für viel kleinere Dateien — ideal für Fotos. Verlustfreie Komprimierung (PNG, verlustfreies WebP) bewahrt jeden Pixel — am besten für Logos, Screenshots und Grafiken mit scharfen Kanten oder Text.
Nützliche Tools sind unter anderem Squoosh, TinyPNG, ImageOptim und ShortPixel sowie Build-Time-Pipelines, die automatisch optimierte Varianten erzeugen.
Achtung: Überdimensionierte Bilder verlangsamen nicht nur deine Seite — sie schaden deinem SEO direkt, indem sie die Core Web Vitals (LCP) beeinträchtigen und die Absprungrate erhöhen. Ein einziges unkomprimiertes 5-MB-Foto kann die Ladezeit auf mobilen Verbindungen um mehrere Sekunden verlängern.
6. Moderne Bildformate
Die Wahl des richtigen Formats kann die Dateigröße drastisch reduzieren, ohne sichtbaren Qualitätsverlust. Die modernen Formate sind deutlich effizienter als die älteren JPEG- und PNG-Standards.
- WebP: Mittlerweile von allen großen Browsern unterstützt, ist WebP bei gleichwertiger Qualität typischerweise 25–35 % kleiner als JPEG und unterstützt sowohl Transparenz als auch Animation. Es ist heute der sichere Standard für die meisten Fotos und Grafiken.
- AVIF: Das neueste Format, das eine noch bessere Komprimierung als WebP bietet (oft 50 % kleiner als JPEG). Die Browser-Unterstützung ist stark, aber etwas hinter WebP zurück, weshalb es am besten mit einem Fallback ausgeliefert wird.
- JPEG: Nach wie vor eine zuverlässige, universell unterstützte Wahl für Fotos, wenn du maximale Kompatibilität brauchst.
- PNG: Nur verwenden, wenn du verlustfreie Qualität oder Transparenz bei Grafiken benötigst — bei Fotos erzeugt es große Dateien.
- SVG: Die ideale Wahl für Logos, Icons und einfache Illustrationen. Als Vektorformat bleibt es bei jeder Größe gestochen scharf, und die Dateien sind winzig.
Du kannst ein modernes Format mit einem eleganten Fallback über das <picture>-Element ausliefern:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Team feiert einen Produktlaunch" width="1200" height="630">
</picture>7. Responsive Bilder & Lazy Loading
Dasselbe große Bild an jedes Gerät auszuliefern verschwendet Bandbreite. Responsive Bilder lassen den Browser mit
srcset und sizes die passendste Version für jede Bildschirmgröße auswählen.
<img src="schuh-800.jpg"
srcset="schuh-400.jpg 400w,
schuh-800.jpg 800w,
schuh-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Blauer Laufschuh, Seitenansicht"
width="800" height="600"
loading="lazy">Zwei Attribute in diesem Beispiel sind für Performance und Core Web Vitals entscheidend:
loading="lazy": Verschiebt das Laden von Bildern außerhalb des Sichtbereichs, bis der Nutzer in ihre Nähe scrollt, und beschleunigt so den initialen Seitenaufbau. Lade dein Above-the-fold-Hero-Bild nicht per Lazy Loading — es sollte sofort laden, um den LCP schnell zu halten.- Explizite
widthundheight: Setze diese immer. Sie lassen den Browser den korrekten Platz reservieren, bevor das Bild lädt, und verhindern so, dass die Seite herumspringt. Das eliminiert Layout-Verschiebungen und schützt deinen Wert für Cumulative Layout Shift (CLS).
Profi-Tipp: Rank-O-Saur scannt automatisch jede Seite, die du besuchst, und kennzeichnet Bilder, denen ALT-Tags fehlen, denen title-Attribute fehlen, sowie jedes Bild, das größer als 300 KB ist — so erkennst du Probleme bei Barrierefreiheit und Performance, bevor sie dich Rankings kosten.
8. Best-Practices-Checkliste
- Schreibe beschreibenden Alt-Text für jedes aussagekräftige Bild; verwende ein leeres
alt=""für rein dekorative. - Betreibe niemals Keyword-Stuffing beim Alt-Text — beschreibe das Bild natürlich und baue ein Keyword nur dann ein, wenn es passt.
- Verwende beschreibende, mit Bindestrichen getrennte Dateinamen (z. B.
golden-retriever-welpe.jpg, nichtIMG_0042.jpg). - Komprimiere und verkleinere jedes Bild; halte die meisten Dateien unter 300 KB.
- Liefere moderne Formate aus wie WebP oder AVIF, mit SVG für Icons und Logos.
- Setze responsive Bilder um mit
srcsetundsizes. - Füge
loading="lazy"hinzu bei Bildern außerhalb des Sichtbereichs (aber nicht beim Hero-Bild). - Setze immer explizite
widthundheight, um Layout-Verschiebungen (CLS) zu verhindern. - Füge Kontext hinzu mit relevanten Bildunterschriften und umgebendem Text.
- Nimm wichtige Bilder in deine XML Sitemap auf, um Google bei ihrer Entdeckung zu helfen.
Beherrsche diese Grundlagen, und deine Bilder werden schneller laden, in der Google-Bildersuche ranken und für jeden Besucher zugänglich bleiben — und verwandeln so ein häufig vernachlässigtes Asset in einen echten SEO-Vorteil.
