Bild-SEO: Alt-Text, WebP/AVIF und Lazy Loading

Bild-SEO umfasst alle Optimierungen, damit Bilder auf Ihren Seiten sowohl von Suchmaschinen richtig verstanden als auch schnell geladen werden. Vom Dateinamen über den Alt-Text bis zu modernen Formaten wie WebP und AVIF und dem Lazy Loading beeinflusst jedes Detail den Traffic aus der Google-Bildersuche und die allgemeine Geschwindigkeit der Seite. In diesem Leitfaden erklären wir Bild-SEO Schritt für Schritt mit Beispielen, was Sie bei jedem Schritt tun sollten.

Warum ist Bild-SEO wichtig?

Bilder haben zwei unterschiedliche Auswirkungen. Erstens die Sichtbarkeit: Die Google-Bildersuche und die Bildbereiche in normalen Suchergebnissen sind ein eigener Kanal, der Besucher bringen kann; besonders bei Produkten, Rezepten, Orten und Einrichtung schauen Nutzer zuerst auf das Bild. Zweitens die Geschwindigkeit: Auf den meisten Seiten machen Bilder den größten Teil der Datenmenge aus, und das größte Element der Seite ist häufig ein Bild. Ein nicht optimiertes Hauptbild kann also den LCP-Wert der Core Web Vitals verschlechtern und die Leistung der ganzen Seite senken.

Ein dritter Effekt ist die Barrierefreiheit: Der Alt-Text beschreibt Bilder für Nutzer mit Screenreader. Guter Alt-Text dient sowohl dem Nutzer als auch der Suchmaschine.

Dateiname

Google verwendet auch den Dateinamen, um zu verstehen, worum es bei einem Bild geht. Namen wie IMG_20260412_0043.jpg, die eine Kamera vergibt, enthalten keine Information. Die Regeln sind einfach:

• Verwenden Sie kurze, aussagekräftige Wörter, die das Bild beschreiben: graues-ledersofa-dreisitzer.webp.
• Trennen Sie Wörter mit Bindestrichen (-); ein Unterstrich (_) kann dazu führen, dass Wörter als ein Wort gelten.
• Bevorzugen Sie Kleinbuchstaben und ASCII-Zeichen; verwenden Sie keine Umlaute und Leerzeichen im Dateinamen.
• Keine Keyword-Häufung: sofa-sofa-guenstiges-sofa.webp hilft nicht.

Wie schreiben Sie einen Alt-Text?

Der Alt-Text (das alt-Attribut) beschreibt den Inhalt eines Bildes mit Worten. Ist das Bild nicht ladbar, wird er stattdessen angezeigt; Screenreader lesen ihn vor, und Google nutzt ihn, um den Zusammenhang des Bildes zu verstehen.

1. Beschreiben Sie das Bild, wie es ist. "Barista bereitet Kaffee auf der Küchentheke vor" ist ein guter Alt-Text; Wörter wie "Bild" oder "Foto" am Anfang sind nicht nötig.
2. Halten Sie ihn kurz. Meist genügen weniger als 125 Zeichen.
3. Setzen Sie das Keyword natürlich ein. Wenn das Bild wirklich zum Thema passt, ergibt sich das Keyword von selbst; aufgezählte Keyword-Listen können als Spam gelten.
4. Bei dekorativen Bildern das Alt-Attribut leer lassen (alt=""), damit Screenreader nicht unnötig vorlesen. Das Attribut selbst nicht vollständig entfernen.
5. Text in Bildern in Worte fassen. Steht im Bild ein Slogan oder ein Preis, schreiben Sie ihn in den Alt-Text oder in den Seitentext.

Neben dem Alt-Text helfen auch der umgebende Text, die Überschrift und die Bildunterschrift (caption) Google, den Zusammenhang zu verstehen. Ein Bild direkt neben dem passenden Absatz zu platzieren, ist deutlich besser, als es unten auf der Seite an einer beliebigen Stelle zu zeigen.

Formatwahl: JPEG, PNG, WebP, AVIF

Um mehrere Formate anzubieten, verwenden Sie das Element <picture>: Der Browser wählt das erste unterstützte Format, und wird keines unterstützt, greift das innere <img>-Element. So erhält ein Browser mit AVIF-Unterstützung AVIF, andere erhalten WebP oder JPEG.

Größe und Komprimierung

Der häufigste Fehler ist, ein 4000 Pixel breites Foto in einer 400-Pixel-Box anzuzeigen. Der Browser lädt trotzdem die ganze Datei herunter. Setzen Sie Folgendes um:

• Auf die tatsächliche Anzeigegröße skalieren. Für Blog-Inhalte reichen meist 800 bis 1200 Pixel Breite; für hochauflösende Bildschirme stellen Sie die doppelte Größe über srcset bereit.
• Komprimieren. Bei Fotos verringert eine Qualität von 75 bis 85 die Dateigröße oft deutlich, ohne dass es mit bloßem Auge auffällt.
• Metadaten entfernen. EXIF-Daten (Standort, Gerät) sind unnötige Last und ein Datenschutzrisiko.
• Ziel festlegen. Halten Sie Inhaltsbilder allgemein unter einigen hundert KB; setzen Sie auch für große Titelbilder eine Obergrenze.

Geben Sie die Werte width und height im HTML unbedingt an. Der Browser weiß dann, wie viel Platz er für das Bild reservieren muss, bevor es geladen ist; der Inhalt rutscht beim Laden nicht nach unten.

Responsive Bilder: srcset und sizes

Dasselbe Bild an ein 360-Pixel-Smartphone und an einen 1920-Pixel-Monitor zu senden, ist Verschwendung. Mit srcset definieren Sie mehrere Versionen in unterschiedlichen Breiten, mit sizes teilen Sie mit, wie viel des Bildschirms das Bild einnimmt; der Browser wählt die passendste Datei. Für die meisten Blog- und Produktseiten genügen beispielsweise drei Versionen mit 480, 800 und 1200 Pixel Breite. Auf Mobilgeräten ist die Datenersparnis deutlich, und das wirkt sich direkt auf die LCP-Zeit aus.

Wo sollte das Bild stehen?

Google leitet das Thema eines Bildes auch aus dem umgebenden Text ab. Platzieren Sie das Bild daher neben dem Absatz, der das Thema behandelt, und fügen Sie darunter eine kurze Bildunterschrift hinzu, die den Inhalt zusammenfasst. Die Überschrift des Abschnitts, in dem das Bild steht, verstärkt, worum es bei dem Bild geht. Statt lizenzpflichtige Stockfotos direkt zu verwenden, nutzen Sie möglichst eigene Originalfotos; sie schaffen Vertrauen bei Nutzern und heben Sie von der Masse wiederholter Stockbilder ab.

Lazy Loading und CLS

Lazy Loading bedeutet, dass Bilder unterhalb des sichtbaren Bereichs erst geladen werden, wenn der Nutzer dorthin scrollt. Moderne Browser setzen dies mit einem einzigen Attribut um:

<img src="kanepe.webp" alt="Graues dreisitziges Sofa mit Stoffbezug" width="800" height="600" loading="lazy">

• Setzen Sie Lazy Loading nicht beim Bild im ersten sichtbaren Bereich (above the fold) ein. Wird das größte Bild der Seite verzögert geladen, verschlechtert sich der LCP-Wert. Für dieses Bild können Sie fetchpriority="high" verwenden.
• Galerien, Produktlisten und Bilder im unteren Teil langer Artikel eignen sich ideal für Lazy Loading.
• Verwenden Sie es immer zusammen mit width/height; sonst verschiebt das nachladende Bild das Layout.
• Verwenden Sie ein echtes <img src>, damit Google das Bild finden kann; Bilder, die nur als CSS-Hintergrund eingebunden sind, werden in der Bildersuche möglicherweise nicht indexiert.

Mehr zu den Geschwindigkeitsmetriken finden Sie in unserem Core-Web-Vitals-Leitfaden.

Bild-Sitemap und strukturierte Daten

Google findet die meisten Bilder beim normalen Crawling. Bei Galerien, die mit JavaScript geladen werden, oder bei komplexen Strukturen kann es dennoch hilfreich sein, Bilder in Ihre Sitemap aufzunehmen. In der Standard-Sitemap werden die Elemente <image:image> und <image:loc> innerhalb jedes <url> verwendet:

1. Fügen Sie den Bild-Namensraum am Anfang der Sitemap hinzu.
2. Listen Sie für jede Seite die Adressen der Bilder auf, die auf dieser Seite vorkommen.
3. Reichen Sie die Sitemap in der Search Console ein und prüfen Sie auf Fehler.
4. Stellen Sie sicher, dass Ihre robots.txt die Bilder nicht blockiert.

Bei Produkten, Rezepten oder Artikeln hilft es, die Bildadresse in die strukturierten Daten (Schema) aufzunehmen; so kann Google das Bild leichter in Rich Results verwenden. Zur Nutzung der Search Console lesen Sie unseren Einstiegsleitfaden.

Häufige Fehler bei Bildern

• Text in ein Bild einbetten: Wichtige Informationen (Preis, Adresse, Aktion) nur im Bild zu schreiben, bedeutet, dass Suchmaschine und Screenreader sie nicht erkennen können.
• Denselben Alt-Text überall kopieren: Statt für fünf Galeriebilder denselben Alt-Text zu verwenden, beschreiben Sie jedes einzeln (Vorderseite, Seite, Detail).
• Übergroße Titelbilder: Ein Vollbild-Slider kann manchmal Megabyte statt Hunderten KB wiegen; verkleinern Sie es zuerst und überdenken Sie dann das Design.
• Bilder über robots.txt blockieren: Eine Regel, die den Bildordner sperrt, sorgt dafür, dass Ihre Bilder in der Google-Bildersuche nie erscheinen.
• Defekte Bildlinks: Verschobene oder gelöschte Bilder liefern 404; reparieren Sie sie durch regelmäßiges Crawling.

Checkliste und Messung

1. Ist der Dateiname aussagekräftig, ASCII und mit Bindestrichen getrennt?
2. Beschreibt der Alt-Text das Bild kurz und natürlich?
3. Sind die Bilder im Format WebP/AVIF oder einem geeigneten Format?
4. Wird keine Datei geladen, die größer ist als die Anzeigegröße?
5. Haben alle Bilder außerhalb des ersten sichtbaren Bereichs loading="lazy"?
6. Sind width und height definiert?
7. Sind Bild-Sitemap und robots.txt korrekt?

Zur Messung zeigt PageSpeed Insights die Empfehlungen "Bilder effizient kodieren" und "Bilder in passender Größe bereitstellen" direkt an. Im Leistungsbericht der Search Console können Sie den Suchtyp auf "Bild" stellen und Impressionen und Klicks aus der Bildersuche getrennt beobachten. Die Bildoptimierung verbessert zudem die Geschwindigkeit, was dabei hilft, die Absprungrate zu senken.

Fazit

Bild-SEO ist keine einmalige Maßnahme, sondern eine kleine Gewohnheit bei jedem Bild: ein aussagekräftiger Dateiname, ein ehrlicher Alt-Text, das richtige Format und die richtige Größe, Lazy Loading unterhalb des ersten Bildschirms und bei Bedarf eine Bild-Sitemap. Der größte Gewinn kommt meist von den größten Bildern; suchen Sie zuerst mit PageSpeed Insights die schwersten Bilder heraus und beginnen Sie dort. Das Ergebnis sind zusätzlicher Traffic aus der Google-Bildersuche und eine schnellere Website. Das Ranking bestimmen weiterhin die Algorithmen von Google; Ihre Aufgabe ist es, Ihre Bilder verständlich und leicht zu halten.