Produktbilder im Onlineshop optimieren: Bild-SEO, Ladezeit und mehr Verkäufe

Ein Kunde sucht bei Google nach einem Produkt. Er sieht zuerst kein Wort, sondern ein Bild. Erst wenn das Bild ihn überzeugt, klickt er sich zu Ihrem Shop durch. Produktbilder sind deshalb viel mehr als Dekoration. Sie sind der erste Kontakt zwischen Ihrem Shop und einer möglichen Kundin oder einem möglichen Kunden, oft noch bevor jemand Ihre Produktseite überhaupt geöffnet hat.

Gleichzeitig sind Produktbilder in vielen Onlineshops der größte Bremsklotz für die Ladezeit. Eine einzige Produktseite kann zehn, zwanzig oder mehr Bilder laden: Hauptbild, verschiedene Perspektiven, Zoom-Ansicht, dazu Empfehlungen ähnlicher Produkte. Wenn diese Bilder zu groß, im falschen Format oder ohne Plan eingebunden sind, wird die Seite langsam. Und eine langsame Seite kostet Sie Kundschaft, noch bevor die Kaufentscheidung überhaupt fällt.

In diesem Artikel zeigen wir Ihnen, wie Sie Produktbilder in Ihrem Onlineshop optimieren, und zwar auf drei Ebenen gleichzeitig: für Google (Bild-SEO), für die Ladezeit (Performance) und für die Kaufentscheidung (Conversion). Alle drei Ebenen hängen zusammen. Wer nur an eine denkt, verschenkt Potenzial bei den anderen beiden.

Warum Produktbilder über Erfolg oder Misserfolg entscheiden

Produktbilder haben im Onlineshop drei Jobs gleichzeitig, und die meisten Shopbetreiber:innen kennen nur einen davon.

Job Nummer eins ist Auffindbarkeit. Die Google-Bildersuche ist ein eigener, oft unterschätzter Traffic-Kanal. Menschen suchen nach "roter Wollpullover Damen" und bekommen zuerst Bilder angezeigt, nicht Text. Wenn Ihr Bild dort nicht auftaucht, weil Google es nicht richtig einordnen kann, verlieren Sie Sichtbarkeit, die Ihre Konkurrenz kostenlos mitnimmt. Das ist der Kern von dem, was man Bild-SEO nennt: Bilder so beschriften und einbinden, dass Suchmaschinen verstehen, was darauf zu sehen ist.

Job Nummer zwei ist Geschwindigkeit. Bilder sind auf den meisten Produktseiten für den größten Teil der Datenmenge verantwortlich, oft über 70 Prozent. Eine Sekunde mehr Ladezeit bedeutet messbar weniger Verkäufe, das ist in unzähligen Performance-Analysen bestätigt. Google bewertet Ladezeit außerdem direkt im Ranking (über die sogenannten Core Web Vitals, das sind Messwerte für Ladeverhalten und Nutzererlebnis). Langsame Bilder schaden Ihnen also doppelt: bei Google und bei echten Menschen.

Job Nummer drei ist Vertrauen und Kaufentscheidung. Online kann niemand ein Produkt anfassen, drehen oder aus der Nähe betrachten, außer über Bilder. Ein Produkt mit nur einem verwaschenen Foto wirkt unfertig oder unseriös. Ein Produkt mit mehreren scharfen Perspektiven, einer Zoom-Funktion und vielleicht einem Bild im Kontext der Nutzung wirkt vertrauenswürdig. Das entscheidet direkt darüber, ob jemand in den Warenkorb klickt oder den Tab schließt.

Das Tückische: Diese drei Ziele stehen scheinbar im Widerspruch. Große, hochauflösende Bilder wirken hochwertiger, sind aber langsam. Kleine, komprimierte Bilder laden schnell, wirken aber oft minderwertig. Die gute Nachricht ist: Mit der richtigen Technik müssen Sie sich nicht entscheiden. Sie können scharfe, überzeugende Bilder ausliefern, die trotzdem in Sekundenbruchteilen laden. Wie das geht, zeigen wir in den folgenden Abschnitten Schritt für Schritt, von der Benennung der Datei bis zur technischen Einbindung im Shop. Wer dabei auch die Textebene der Produktseite mitdenkt, findet ergänzend in unserem Beitrag zu Produktseiten optimieren weiterführende Tipps, denn Bild und Text arbeiten auf einer guten Produktseite immer zusammen.

Bild-SEO für Onlineshops: Dateinamen, Alt-Texte und die Google-Bildersuche

Google kann ein Foto nicht "ansehen" wie ein Mensch. Die Suchmaschine liest stattdessen Textinformationen rund um das Bild und leitet daraus ab, was zu sehen ist. Genau hier setzt Bild-SEO an, und genau hier machen die meisten Onlineshops die ersten, leicht vermeidbaren Fehler.

Der erste Ansatzpunkt ist der Dateiname. Ein Foto, das direkt von der Kamera oder aus einem Produktkatalog kommt, heißt oft "IMG_4821.jpg" oder "DSC00234.jpg". Das sagt Google gar nichts. Besser ist ein sprechender, beschreibender Dateiname mit Bindestrichen statt Leerzeichen, zum Beispiel "wollpullover-rot-damen-rundhals.jpg". Das kostet Sie eine Minute pro Bild beim Hochladen, hilft aber messbar bei der Auffindbarkeit in der Bildersuche.

Der zweite und wichtigste Ansatzpunkt ist der Alt-Text (der alternative Text eines Bildes, ursprünglich gedacht für Menschen, die Bilder nicht sehen können, zum Beispiel bei Sehbehinderung oder wenn ein Bild aus technischen Gründen nicht lädt). Jeder Alt-Text-Onlineshop-Betreiber sollte wissen: Dieses kleine Textfeld ist gleichzeitig eine der wichtigsten Informationsquellen für Google. Ein guter Alt-Text beschreibt präzise, was auf dem Bild zu sehen ist, so wie Sie es einer Person am Telefon erklären würden: "Roter Wollpullover mit Rundhalsausschnitt, Damenmodell von vorne". Ein schlechter Alt-Text ist entweder leer, ein reines Keyword-Stopfen ("pullover pullover rot günstig kaufen") oder einfach der Produktname ohne jede Beschreibung. Beides bringt weder Google noch echten Nutzer:innen etwas.

Ein dritter, oft übersehener Hebel ist strukturierte Auszeichnung rund um Produktbilder (technisch als Schema.org-Markup bekannt). Damit teilen Sie Google zusätzlich mit, dass ein Bild zu einem bestimmten Produkt mit Preis, Verfügbarkeit und Bewertung gehört. Das kann dazu führen, dass Ihr Produkt mit Sternebewertung, Preis und Bild direkt in den Suchergebnissen auftaucht, nicht nur als einfacher blauer Link. Wie Sie diese strukturierten Daten für Ihren Shop einrichten, erklären wir ausführlich im Beitrag zu strukturierte Daten und Rich Snippets.

Wichtig ist außerdem: Jedes Bild sollte nur auf einer Seite als Hauptbild dienen, nicht auf zehn verschiedenen Produktseiten identisch wiederverwendet werden. Google erkennt doppelte Bilder und wertet die Relevanz für einzelne Seiten dann ab. Nutzen Sie also, wo immer möglich, wirklich eigene Fotos statt Herstellerbilder, die auch alle Wettbewerber verwenden.

Bilder Ladezeit Shop: Dateigröße, Format und die richtige Größe pro Slot

Der zweite große Hebel ist die Ladezeit. Hier passiert der größte Fehler still im Hintergrund: Shops liefern viel zu große Bilddateien an Geräte aus, die sie gar nicht brauchen.

Stellen Sie sich vor, jemand betrachtet auf dem Handy eine kleine Produktvorschau, die auf dem Bildschirm nur 150 mal 150 Pixel groß dargestellt wird. Läuft im Hintergrund aber eine Bilddatei mit 2000 mal 2000 Pixeln und mehreren Megabyte Größe, lädt das Handy unnötig viele Daten, nur um das Bild dann winzig klein darzustellen. Das ist, als würden Sie ein Plakat drucken, um es dann als Briefmarke zu verschicken. Die Regel lautet deshalb: Für jeden Anzeigeplatz (im Fachjargon "Slot" genannt, also die Stelle im Layout, wo ein Bild erscheint) sollte eine passend große Bildvariante ausgeliefert werden, keine pauschale Maximalgröße für alles.

Der zweite Hebel ist das Bildformat. Viele Shops arbeiten noch mit JPG oder PNG, weil das die bekannten Formate sind. Das modernere Format WebP komprimiert Bilder deutlich stärker bei gleicher sichtbarer Qualität, oft 25 bis 35 Prozent kleinere Dateien im Vergleich zu klassischem JPG. Bei zwanzig Bildern auf einer Produktseite macht das einen spürbaren Unterschied für die Ladezeit. WebP wird heute von praktisch allen aktuellen Browsern unterstützt, ein Umstieg lohnt sich fast immer.

Der dritte Hebel ist Lazy Loading (verzögertes Laden): Bilder, die beim Seitenaufruf noch gar nicht sichtbar sind, etwa weiter unten auf der Seite, müssen nicht sofort geladen werden. Sie laden erst nach, wenn Nutzer:innen tatsächlich dorthin scrollen. Das entlastet die erste, entscheidende Ladephase enorm. Wichtig ist dabei eine Ausnahme: Das allerwichtigste Bild einer Seite, meist das große Hauptproduktbild ganz oben, sollte gerade nicht verzögert, sondern sofort und mit Priorität geladen werden, dazu gleich mehr im nächsten Abschnitt.

Wie schnell Ihr Shop aktuell tatsächlich ist, lässt sich nicht raten, sondern nur messen. Nutzen Sie dafür ein echtes Messwerkzeug und schauen Sie sich konkret an, welche Bilder die Ladezeit ausbremsen. Eine Anleitung dazu, wie Sie die Ladezeit Ihres Shops testen, haben wir in einem eigenen Beitrag zusammengefasst. Ohne Messung optimieren Sie im Blindflug, und genau das führt oft dazu, dass an der falschen Stelle Zeit investiert wird.

Technisch korrekt eingebunden: width, height, fetchpriority und srcset

Die richtigen Bilder zu haben, ist die halbe Miete. Die andere Hälfte ist, sie technisch sauber in die Seite einzubinden. Genau hier trennt sich professionelle Umsetzung von Bastellösungen, und genau hier liegt oft ungenutztes Potenzial, selbst bei Shops, die schon auf WebP und Komprimierung geachtet haben.

Der erste technische Baustein sind die Angaben Breite und Höhe (im Code als `width` und `height` bekannt) direkt am Bild. Ohne diese Angaben weiß der Browser erst, wie groß ein Bild wird, wenn es fertig geladen ist. Bis dahin springt der Text darum herum, weil der Platz für das Bild noch nicht reserviert ist. Dieses Springen (Fachbegriff: Layout-Verschiebung oder "Cumulative Layout Shift") ist nicht nur nervig für Nutzer:innen, es ist auch ein offizieller Rankingfaktor bei Google. Mit korrekt gesetzten `width`- und `height`-Werten reserviert der Browser den Platz sofort, die Seite steht ruhig, nichts springt.

Der zweite Baustein ist `fetchpriority` (eine Anweisung an den Browser, welches Bild besonders wichtig ist). Auf jeder Seite gibt es ein Bild, das zuerst und am schnellsten sichtbar sein sollte, meist das große Hauptbild ganz oben. Dieses eine Bild bekommt die Anweisung "hohe Priorität", damit der Browser es bevorzugt vor allen anderen Anfragen lädt. Alle anderen Bilder, die später im Sichtbereich folgen, werden bewusst normal oder sogar verzögert geladen. Wer stattdessen allen Bildern pauschal hohe Priorität gibt, hat am Ende gar keine Priorität gesetzt, das Konzept funktioniert nur, wenn es gezielt für genau ein Bild pro Seite eingesetzt wird.

Der dritte Baustein ist `srcset` (eine Liste mehrerer Bildgrößen, aus der sich der Browser automatisch die passende aussucht), kombiniert mit einer `sizes`-Angabe, die beschreibt, wie breit der Bildbereich im jeweiligen Layout tatsächlich ist. Damit lädt ein Smartphone automatisch eine kleinere Bildvariante als ein großer Desktop-Monitor, ganz ohne dass jemand manuell eingreifen muss. Das Ergebnis: Jedes Gerät bekommt genau die Bildgröße, die es wirklich braucht, nicht mehr und nicht weniger.

In der Praxis heißt das für Ihren Shop: Bilder sollten in mehreren Varianten vorliegen (zum Beispiel klein für Vorschauen, mittel für normale Produktansichten, groß für Zoom), nicht als eine einzige Riesendatei, die überall pauschal eingebunden wird. Genau das ist der Unterschied zwischen einem Shop, der "irgendwie Bilder anzeigt", und einem Shop, der Bilder gezielt für jeden Anzeigeplatz ausliefert.

Checkliste: Produktbilder Onlineshop optimieren in der Praxis

Bild-SEO, Ladezeit und Conversion lassen sich nicht an einem Nachmittag perfekt umsetzen, aber Sie können systematisch vorgehen. Diese Checkliste fasst die wichtigsten Punkte zusammen, mit denen Sie sofort starten können:

• Dateinamen vor dem Upload umbenennen: beschreibend, mit Bindestrichen, ohne Kamera-Kürzel wie "IMG_1234"

• Jedem Produktbild einen individuellen, beschreibenden Alt-Text geben, kein Copy-Paste des Produktnamens

• Bilder im WebP-Format ausliefern, mit einem klassischen Format als Rückfalllösung für sehr alte Browser

• Für jeden Anzeigeplatz die passende Bildvariante nutzen: klein für Vorschaubilder, mittel für Standardansichten, groß nur für Zoom

• `width` und `height` bei jedem Bild im Code setzen, um Layout-Verschiebungen zu vermeiden

• Genau ein Hauptbild pro Seite mit `fetchpriority="high"` versehen, nicht mehrere gleichzeitig

• Bilder unterhalb der ersten Bildschirmansicht per Lazy Loading verzögert laden

• `srcset` und `sizes` einsetzen, damit Smartphones automatisch kleinere Varianten laden als Desktop-Monitore

• Mindestens drei bis vier Perspektiven pro Produkt anbieten: Vorderansicht, Rückansicht, Detailaufnahme, Größenvergleich oder Nutzungskontext

• Eine Zoom-Funktion für Detailaufnahmen bereitstellen, besonders bei Produkten mit Material, Struktur oder feinen Details

• Regelmäßig die Ladezeit der Produktseiten messen, nicht nur einmal beim Launch

• Bilder nicht doppelt auf mehreren Produktseiten identisch wiederverwenden, wenn eigene Fotos möglich sind

Diese Liste eignet sich auch gut als Grundlage für ein internes Briefing an Fotograf:innen oder Agenturen, damit von Anfang an in den richtigen Formaten und Auflösungen geliefert wird. Nachträgliches Optimieren kostet immer mehr Zeit als von Beginn an sauber zu arbeiten.

Fazit

Produktbilder sind kein Nebenschauplatz, sondern einer der Hebel mit dem größten Effekt auf Sichtbarkeit, Ladezeit und Umsatz gleichzeitig. Die gute Nachricht: Die wichtigsten Maßnahmen sind keine Raketenwissenschaft. Sprechende Dateinamen, ehrliche Alt-Texte, das WebP-Format, die passende Bildgröße pro Anzeigeplatz sowie korrekt gesetzte `width`-, `height`- und `fetchpriority`-Angaben lassen sich Schritt für Schritt umsetzen, auch ohne eigenes Entwicklerteam.

Fangen Sie mit Ihren meistverkauften Produkten an, dort wirkt sich jede Verbesserung am direktesten aus. Prüfen Sie danach systematisch den Rest des Sortiments. Wenn Sie unsicher sind, wo Ihr Shop technisch aktuell steht, lohnt sich eine einmalige, gründliche Bestandsaufnahme, bevor Sie in neue Fotos oder Werbebudget investieren.