Bilder-SEO: Alt-Texte, Dateigroesse und Formate richtig einsetzen

Lazy Loading richtig einsetzen

Lazy Loading verzögert das Laden von Bildern, bis sie tatsächlich in den sichtbaren Bereich scrollen. Richtig eingesetzt, spart das beim ersten Seitenaufbau spürbar Zeit, weil der Browser nicht Dutzende Bilder gleichzeitig laden muss, die der Besucher vielleicht nie zu sehen bekommt.

Der Haken liegt im Detail: Wird Lazy Loading auch auf Bilder oberhalb der Sichtgrenze angewendet, also auf das, was beim Öffnen der Seite sofort sichtbar ist, verzögert sich genau das Element, das für den LCP-Wert zählt - und die Seite wirkt langsamer statt schneller. Das erste sichtbare Bild, oft ein Hero-Bild oder das Hauptproduktfoto, sollte deshalb bewusst von der Verzögerung ausgenommen und mit hoher Priorität geladen werden.

Moderne Browser bringen Lazy Loading über ein einfaches Attribut am Bild-Tag bereits mit, ohne dass dafür ein zusätzliches Skript nötig wäre. Trotzdem lohnt sich ein Test nach der Umstellung: Öffne die Seite mit simulierter langsamer Verbindung und prüfe, ob wirklich nur die Bilder unterhalb der Sichtgrenze verzögert werden und die Reihenfolge beim Scrollen ruckelfrei bleibt.

Ein häufiger Fehler ist außerdem, Lazy Loading auch bei Bildern in Karussells oder Slidern einzusetzen, die direkt beim Laden sichtbar sein sollen. Prüfe bei jedem Bildbereich einzeln, ob er beim ersten Blick auf die Seite zu sehen ist - dann gehört er nicht in die verzögerte Ladung.

Bilder in der Google-Bildersuche sichtbar machen

Ein eigener Traffic-Kanal, der bei Bildoptimierung oft übersehen wird, ist die Google-Bildersuche selbst. Produktfotos, Referenzbilder oder Illustrationen können dort gefunden werden, unabhängig vom Ranking der eigentlichen Textseite - vorausgesetzt, Google kann die Bilder überhaupt zuverlässig auffinden und einordnen.

Eine Bilder-Sitemap listet der Suchmaschine alle relevanten Bildadressen einer Seite auf und hilft besonders dann, wenn Bilder per JavaScript nachgeladen werden und beim ersten Seitenaufruf nicht direkt im Quellcode stehen. Für viele CMS-Systeme wird eine solche Sitemap automatisch mitgepflegt, sobald neue Bilder hochgeladen werden.

Wichtig ist außerdem der Kontext rund um ein Bild: Überschrift, umliegender Text und Bildunterschrift geben Google zusätzliche Hinweise darauf, worum es auf dem Bild geht. Ein Produktfoto, das direkt neben der passenden Produktbeschreibung steht, wird zuverlässiger eingeordnet als dasselbe Bild ohne jeden Textzusammenhang.

Strukturierte Daten, etwa Markup für Produkte, können zusätzlich festlegen, welches Bild als Hauptbild eines Produkts gilt. Das ist besonders bei mehreren Ansichten desselben Artikels hilfreich, damit die Bildersuche das richtige Hauptmotiv zeigt statt eines Detailfotos.

Typische Fehler bei responsiven Bildern

Auf dem Desktop wirkt ein Bild oft breiter, als es auf dem Smartphone tatsächlich gebraucht wird - trotzdem wird vielen mobilen Besuchern dieselbe, große Datei ausgeliefert. Responsive Bilder lösen das, indem sie dem Browser mehrere Varianten in unterschiedlichen Größen anbieten, aus denen automatisch die passende für das jeweilige Gerät gewählt wird.

Ein verbreiteter Fehler ist, zwar mehrere Bildgrößen bereitzustellen, die Abstände zwischen den Größenstufen aber zu groß zu wählen. Dann bekommt etwa ein Tablet entweder die kleine, unscharfe Version oder die große Desktop-Version - beides ist nicht ideal. Sinnvoller sind mehrere abgestufte Größen, die den gängigen Bildschirmbreiten wirklich entsprechen.

Ein zweiter Fehler betrifft Bilder in unterschiedlichen Seitenverhältnissen: Wird auf dem Smartphone ein anderer Bildausschnitt gebraucht als auf dem Desktop, reicht reines Skalieren nicht - hier braucht es tatsächlich unterschiedliche Zuschnitte, sonst wirkt das mobile Bild gequetscht oder das Motiv fehlt komplett.

Ein Blick auf hochauflösende Displays lohnt sich ebenfalls. Ein Bild, das auf einem normalen Bildschirm scharf wirkt, kann auf einem hochauflösenden Display unscharf erscheinen. Dafür braucht es eine zusätzliche, höher aufgelöste Variante - die aber wiederum nur an Geräte ausgeliefert werden sollte, die sie auch tatsächlich brauchen, damit die Dateigröße nicht unnötig steigt.

Häufig gestellte Fragen

Haeufige Fehler bei Alt-Texten, die du vermeiden solltest

Ein haeufiger Fehler ist der leere oder unpassende Alt-Text: entweder gar nicht ausgefuellt, oder mit Schlagworten vollgestopft, die das Bild gar nicht zeigen. Ein Alt-Text wie Solaranlage Solar Photovoltaik Installation Angebot guenstig hilft niemandem - er wird weder von Screenreadern sinnvoll vorgelesen noch von Google positiv bewertet. Beschreibe stattdessen genau das, was zu sehen ist, in normaler Sprache.

Ein zweiter verbreiteter Fehler betrifft rein dekorative Bilder, etwa Trennlinien oder Hintergrundmuster ohne inhaltliche Bedeutung. Diese Bilder brauchen keinen beschreibenden Alt-Text - ein leerer Alt-Text ist hier korrekt, weil er Screenreadern signalisiert, das Element zu ueberspringen. Wer stattdessen jedes Bild krampfhaft mit einer Beschreibung fuellt, erzeugt unnoetigen Ballast fuer Nutzer, die auf Screenreader angewiesen sind.

Ebenfalls beliebt, aber wenig hilfreich: Alt-Texte, die einfach den Dateinamen wiederholen, oder die auf jeder Produktseite identisch sind. Wenn zehn Produktbilder alle denselben Alt-Text tragen, verschenkst du die Chance, dass Google einzelne Produkte ueber die Bildersuche findet - und Nutzer mit Screenreader koennen die Bilder nicht mehr voneinander unterscheiden.

Produktbilder im Online-Shop: worauf zusaetzlich zu achten ist

Im Online-Shop kommen zu den allgemeinen Regeln noch ein paar Besonderheiten dazu. Produktbilder sollten in den Alt-Texten Merkmale nennen, die fuer die Kaufentscheidung relevant sind - Farbe, Material oder Ausfuehrung -, statt nur den Produktnamen zu wiederholen, der ohnehin schon in der Ueberschrift steht. Bei mehreren Ansichten desselben Produkts hilft es, die Perspektive im Alt-Text zu erwaehnen, etwa Vorderansicht oder Detailaufnahme, damit jedes Bild einen eigenen, sinnvollen Text erhaelt.

Gerade Shops mit grossen Katalogen stehen vor der Frage, wie sich das ueberhaupt pflegen laesst, ohne jedes Bild einzeln zu bearbeiten. In der Praxis hilft ein Muster, das sich aus den vorhandenen Produktdaten automatisch zusammensetzt - etwa aus Produktname, Farbe und Kategorie -, erganzt um manuelle Nacharbeit bei den wichtigsten Bestsellern. So bleibt der Aufwand ueberschaubar, ohne dass die Alt-Texte komplett generisch werden.

Auch die Reihenfolge der Bilder auf einer Produktseite wirkt sich aus: Das erste, groesste Bild wird meist am staerksten fuer den LCP-Wert gewertet, sollte also besonders schlank eingebunden sein, waehrend nachfolgende Galeriebilder ruhig etwas spaeter nachladen duerfen.

Wie du pruefst, ob deine Bilder-SEO wirklich funktioniert

Ob deine Bilder-SEO wirklich funktioniert, laesst sich mit ein paar einfachen Pruefschritten abschaetzen. Ruf zentrale Seiten deiner Webseite auf und schau dir mit den Bordmitteln des Browsers an, wie gross die geladenen Bilddateien tatsaechlich sind - oft findet sich hier schnell ein einzelnes ueberdimensioniertes Bild, das eine ganze Seite ausbremst. Pruefe zusaetzlich stichprobenartig, ob die Alt-Texte auf wichtigen Seiten ueberhaupt vorhanden und sinnvoll sind, statt dich auf eine einmalige Kontrolle beim Launch zu verlassen.

Sinnvoll ist auch ein Blick in die Google-Bildersuche fuer die eigenen wichtigsten Produkte oder Themen: Taucht die eigene Seite dort ueberhaupt auf, und wird das richtige Bild angezeigt? Bilder-SEO ist kein einmaliges Projekt, sondern etwas, das bei jedem neuen Produkt oder Artikel mitgedacht werden sollte - am einfachsten, indem Groesse, Format und Alt-Text fester Bestandteil des Ablaufs beim Hochladen werden, statt eine nachtraegliche Aufraeumaktion zu bleiben.

Notiere dir bei einer solchen Pruefung ruhig auch, welche Seiten am schlechtesten abschneiden, und beginn dort mit den Verbesserungen - meist sind es wenige Seiten mit besonders grossen Bildern, die den groessten Unterschied fuer die gesamte Webseite ausmachen.