Im Online-Shop kann niemand ein Produkt anfassen, drehen oder anprobieren. Was bleibt, ist das Bild. Wer WooCommerce Produktbilder optimieren will, arbeitet deshalb an zwei Dingen gleichzeitig: daran, dass ein Besucher das Produkt schnell und richtig erkennt, und daran, dass Bild und Seite schnell laden und von Google verstanden werden. Dieser Artikel zeigt beides, mit dem, was WooCommerce und Google selbst dazu dokumentieren.
Warum deine Produktbilder über Kauf oder Absprung entscheiden
Ein Bild wird erfasst, bevor der erste Satz der Produktbeschreibung gelesen ist. Wie schnell das geht, hat eine Forschungsgruppe um Potter gemessen: Versuchspersonen sahen Folgen von sechs oder zwölf Bildern, jedes nur zwischen 13 und 80 Millisekunden lang, und sollten ein vorher oder nachher genanntes Motiv erkennen, etwa ein lächelndes Paar. Selbst bei 13 Millisekunden je Bild trafen sie statistisch signifikant häufiger als per Zufall (Potter und Kollegen 2014). Die Studie misst Erkennen, nicht Kaufen. Sie zeigt aber, dass der erste Eindruck eines Produktbildes entsteht, lange bevor jemand bewusst darüber nachdenkt.
Für den Shop heißt das: Ein kleines, unscharfes oder dunkles Bild beantwortet die erste Frage des Besuchers nicht, nämlich was das eigentlich ist. Vertrauen entsteht im ersten Blick, und ein schwaches Bild verspielt es, bevor der Preis gelesen wird.
Bildqualität und Conversion Rate
Die Conversion Rate sagt, wie viele Besucher tatsächlich kaufen. Produktbilder wirken darauf über einen einfachen Weg: Wer das Produkt klar erkennt, hat weniger offene Fragen. Wie groß der Effekt in deinem Shop ist, zeigt allerdings nur deine eigene Messung. Ein sauberer Weg ist, die Bilder einer einzelnen Produktgruppe zu erneuern und die Conversion Rate dieser Gruppe vorher und nachher über denselben Zeitraum zu vergleichen.
Dazu kommt die Retourenquote. Ein Bild, das Farbe, Größe oder Material anders zeigt, als das Produkt ist, verkauft einmal und kommt als Rücksendung zurück. Realistische, detailreiche Bilder sparen dir diesen Umweg.
Die technischen Grundlagen für optimale WooCommerce Produktbilder
Bevor es um Licht und Hintergrund geht, müssen die technischen Rahmenbedingungen stimmen. WooCommerce verarbeitet Bilder auf eine bestimmte Art, und wer die kennt, lädt von Anfang an die richtigen Dateien hoch.
Welche Bildgrößen WooCommerce selbst verwendet
WooCommerce legt beim Upload eigene Bildgrößen an, zusätzlich zu denen von WordPress. Laut der Entwicklerdokumentation von WooCommerce sind es drei:
| Bildgröße | Wo sie erscheint | Standard |
|---|---|---|
| woocommerce_single | Hauptbild auf der Produktseite | 600 Pixel breit, ungeschnitten im Seitenverhältnis des Originals |
| woocommerce_thumbnail | Produktraster, etwa auf der Shopseite | 300 Pixel breit, quadratisch zugeschnitten |
| woocommerce_gallery_thumbnail | kleine Vorschaubilder unter dem Hauptbild | 100 x 100 Pixel, immer quadratisch |
Den quadratischen Zuschnitt im Raster begründet WooCommerce damit, dass die Produktraster so ordentlich aussehen. Dein Theme kann diese Werte überschreiben. Einstellen lassen sie sich im Customizer unter Design > Customizer > WooCommerce > Produktbilder, nicht unter Einstellungen > Medien, dort stehen nur die Größen von WordPress selbst. Setzt dein Theme eigene Breiten, blendet WooCommerce die entsprechenden Regler im Customizer aus.
Warum das Original größer sein sollte als die Anzeige
Viele Galerien zeigen beim Darüberfahren mit der Maus einen Zoom. WooCommerce beschreibt ihn so: das Bild wird an der Stelle des Mauszeigers vergrößert, damit feine Details sichtbar werden. Beim Produktgalerie-Block ist diese Einstellung in WooCommerce 11.1 standardmäßig eingeschaltet, bei der klassischen Galerie hängt sie vom Theme ab. Der Zoom braucht dafür ein Original, das deutlich größer ist als die 600 Pixel der Anzeige. Ein guter Richtwert sind 1200 Pixel an der langen Seite. Was Marktplätze wie Amazon zusätzlich verlangen, steht im Beitrag zur Multi-Channel-Synchronisierung.
Das richtige Dateiformat
JPEG eignet sich für Fotos mit vielen Farben und Details, PNG für Grafiken und Freisteller mit transparentem Hintergrund. WebP kann beides. Google nennt dazu konkrete Zahlen: verlustbehaftete WebP-Bilder sind bei gleichem SSIM-Qualitätsindex 25 bis 34 Prozent kleiner als vergleichbare JPEG-Bilder, verlustfreie WebP-Bilder 26 Prozent kleiner als PNG-Bilder (Google, WebP-Dokumentation). Weniger Daten heißt kürzere Ladezeit, und warum gerade das Bildgewicht dort so stark zählt, steht im Beitrag zur WooCommerce-Ladezeit.
Dateigröße im Griff behalten
Ein häufiger Fehler ist das Hochladen von Fotos direkt aus der Kamera oder dem Smartphone. Solche Dateien haben schnell mehrere Megabyte, gebraucht werden für die Anzeige im Shop nur ein Bruchteil davon. Ein brauchbarer Richtwert für ein Produktbild in 1200 Pixeln sind rund 200 Kilobyte, ohne sichtbaren Qualitätsverlust ist das bei den meisten Fotos erreichbar.
Dafür gibt es zwei Wege. Du komprimierst vor dem Hochladen mit Werkzeugen wie Squoosh oder TinyPNG. Oder ein WordPress-Plugin wie Imagify, ShortPixel oder Smush erledigt das beim Upload automatisch, wandelt auf Wunsch in WebP um und liefert jedem Browser das passende Format.
Ein einheitliches Seitenverhältnis
Weil WooCommerce die Bilder im Produktraster standardmäßig quadratisch zuschneidet, wird von einem Foto im Querformat links und rechts etwas abgeschnitten. Steht das Produkt nicht mittig oder füllt es das Bild aus, fehlt im Shop dann ein Teil davon. Das Seitenverhältnis des Zuschnitts kannst du im Customizer ändern. Am einfachsten ist es trotzdem, alle Produktfotos gleich aufzunehmen, am besten quadratisch im Verhältnis 1:1 und mit etwas Rand um das Produkt. Dann zeigt der Shop jedes Bild vollständig, und alle Produktkarten sind gleich hoch.
Gute Produktfotos ohne eigenes Fotostudio
Viele kleine Shops scheuen den Aufwand für Produktfotografie. Das Smartphone ist zur Hand, die Kamera hat genug Megapixel, und ein Fotoshooting wirkt im Alltag nach viel Zeit. Der Unterschied zwischen einem guten und einem schlechten Produktfoto liegt aber selten an der Kamera.
Smartphone ja, aber richtig
Ein modernes Smartphone liefert sehr brauchbare Produktfotos, wenn drei Dinge stimmen: Licht, Hintergrund und Stabilität. Wer bei schwachem Licht auf dem Schreibtisch fotografiert, bekommt trotz vieler Megapixel ein schlechtes Bild. Ein weißer Karton als Hintergrund, Fensterlicht von der Seite und ein Stativ oder ein fester Aufbau bringen dagegen oft erstaunlich saubere Ergebnisse.
Natürliches Seitenlicht ist dabei das günstigste Licht. Es zeichnet Strukturen und erzeugt Tiefe. Direktes Blitzlicht dagegen macht Produkte optisch flach und erzeugt harte Spiegelungen auf glatten Oberflächen.
Mehrere Perspektiven zeigen
Ein einzelnes Foto reicht fast nie. Im Laden dreht man ein Produkt in der Hand, schaut auf die Rückseite, öffnet die Verpackung. Die Galerie im Shop übernimmt diese Aufgabe. Eine bewährte Zusammenstellung sind drei bis fünf Bilder:
- Frontansicht auf neutralem Hintergrund
- Seitenansicht oder Rückansicht
- Detailaufnahme eines besonderen Merkmals
- Produkt im Einsatz, also ein sogenanntes Lifestyle-Foto
- Größenvergleich oder Maßangabe als Bild
Lifestyle-Fotos zeigen das Produkt in einem Zusammenhang, den der Käufer aus seinem Alltag kennt. Ein Kaffeehändler, der nicht nur die Packung zeigt, sondern auch eine Tasse auf dem Frühstückstisch, beantwortet damit die Frage, wie das Produkt im eigenen Leben aussieht.
Warum Konsistenz zählt
Alle Produktbilder in einem Shop sollten einem erkennbaren Stil folgen: gleicher Hintergrund, gleiche Lichtstimmung, gleiche Perspektive für das Hauptbild. Das wirkt wie ein Detail, ist aber der Unterschied zwischen einem Shop, der aufgeräumt wirkt, und einem, der zusammengewürfelt aussieht. Konsistenz signalisiert Verlässlichkeit, und Verlässlichkeit ist die Grundlage für Vertrauen.
SEO für Produktbilder: Sichtbarkeit in der Bildersuche
Wer WooCommerce Produktbilder optimieren will, denkt oft nur an die Optik. Google erkennt Bildinhalte zwar inzwischen auch selbst, stützt sich aber weiter auf Text rund um das Bild. Wer diese Angaben leer lässt, überlässt Google das Raten.
Alt-Text, Dateiname und Umgebung
Google sagt in seinen Richtlinien für die Bildersuche deutlich, welches Feld zählt: „Das wichtigste Attribut bei der Bereitstellung weiterer Metadaten für ein Bild ist der Alt-Text“ (Google Search Central). Google verwendet ihn zusammen mit Bilderkennung und dem Inhalt der Seite, um das Thema des Bildes zu verstehen. Gleichzeitig ist er das, was ein Screenreader vorliest.
Ein guter Alt-Text klingt wie eine normale Beschreibung, nicht wie eine Keyword-Liste: „Massiver Schreibtisch aus Eiche, 120 cm breit, in Naturholz-Optik“ sagt mehr als „Schreibtisch kaufen billig Schreibtisch Holz“.
Der Dateiname spielt eine kleinere Rolle. Google formuliert vorsichtig: „Auch der Dateiname kann Google gewisse Hinweise auf das Thema des Bildes geben.“ Empfohlen werden kurze, aber aussagekräftige Namen. Statt IMG_4891.jpg also lieber schreibtisch-eiche-massiv-120cm.jpg. Benenne die Datei vor dem Upload, denn WordPress übernimmt den Namen in die Bildadresse.
Dazu kommt die Umgebung. Google zieht Informationen über ein Bild auch aus Bildunterschriften, Überschriften und dem Text daneben und rät, Bilder in der Nähe von passendem Text zu platzieren. Auf einer Produktseite ist das meist gegeben, in Kategorie- und Blogseiten lohnt der Blick darauf.
Strukturierte Daten und die Bildersuche
Google kann Produktbilder in der Bildersuche mit einer Kennzeichnung anzeigen, wenn die Seite strukturierte Daten liefert. Bei diesen Datentypen ist das Bildattribut laut Google ein Pflichtfeld. Ob deine Produktseiten solche Daten mit Bild ausliefern, prüfst du mit dem Test für Rich-Suchergebnisse von Google, einmal für eine typische Produktseite reicht.
Die Bildersuche ist damit kein eigener Kanal, der eigene Arbeit braucht. Sie ist die Folge derselben Sorgfalt: ein schnelles Bild, ein beschreibender Alt-Text, ein sprechender Dateiname und eine Seite, auf der das Bild zum Text passt.
Praktische Tools und Plugins für die Bildoptimierung in WooCommerce
Vieles lässt sich automatisieren oder zumindest deutlich vereinfachen. Du musst kein Bildbearbeitungsprofi sein, um saubere Ergebnisse zu erzielen.
Plugins, die dir die Arbeit abnehmen
Für die technische Optimierung direkt in WordPress sind ShortPixel und Imagify verbreitete Lösungen. Beide arbeiten ähnlich: Nach der Installation komprimieren sie neue Uploads automatisch und können den vorhandenen Medienbestand nachträglich optimieren. Die Umwandlung in WebP ist bei beiden dabei.
Wer ein großes Sortiment hat und Kunden aus vielen Regionen, kann zusätzlich ein CDN (Content Delivery Network) einsetzen. Dabei kommen die Bilder von einem Server, der geografisch nah beim Besucher steht. Dienste wie Cloudflare oder BunnyCDN lassen sich mit WooCommerce kombinieren. Für einen Shop, dessen Kunden fast alle aus einem Land kommen, ist das selten der erste Hebel.
Vor dem Upload: Bilder richtig vorbereiten
Auch das beste Plugin ersetzt keine saubere Vorbereitung. Ein einfaches Bildprogramm wie GIMP (kostenlos), Canva oder Adobe Lightroom reicht, um Bilder zuzuschneiden, das Seitenverhältnis anzupassen, Helligkeit und Kontrast zu korrigieren und auf eine sinnvolle Größe zu bringen.
Ein Ablauf, der sich wiederholen lässt
Am meisten Zeit spart ein fester Ablauf, der für jedes neue Produkt gleich ist:
- Fotografieren, quadratisch und mit etwas Rand, bei Seitenlicht
- Zuschneiden und auf 1200 Pixel an der langen Seite bringen
- Datei sprechend benennen
- Komprimieren oder vom Plugin komprimieren lassen
- Hochladen und den Alt-Text direkt in der Mediathek eintragen
Nach der Einrichtung dauert das nur wenige Minuten pro Produkt und sorgt dafür, dass der Shop dauerhaft einheitlich aussieht.
Worauf sich das stützt
- Google: Best Practices für Bilder in der Google Suche und WebP-Dokumentation für Entwickler
- WooCommerce: Image sizes und Adding product images and galleries
- Potter, Wyble, Hagmann und McCourt (2014): Detecting meaning in RSVP at 13 ms per picture, Attention, Perception, & Psychophysics
Was du noch wissen solltest
Laut der Entwicklerdokumentation von WooCommerce ist das Bild auf der Produktseite standardmäßig 600 Pixel breit und ungeschnitten, im Produktraster 300 Pixel breit und quadratisch zugeschnitten, die Galerie-Vorschaubilder 100 x 100 Pixel. Das Theme kann diese Werte ändern. Damit ein Zoom scharf bleibt, sollte das Original deutlich größer sein als die Anzeige, etwa 1200 Pixel an der langen Seite.
Eine feste Zahl gibt WooCommerce nicht vor. Sinnvoll ist, jede Frage zu beantworten, die ein Kunde im Laden durch Anfassen klären würde: Vorderseite, Rückseite, Detail, Größe und das Produkt im Einsatz. Das ergibt meist drei bis fünf Bilder.
Der Alt-Text beschreibt das Bild in Worten, für Suchmaschinen und für Screenreader. Google Search Central nennt ihn das wichtigste Attribut, um einem Bild weitere Informationen mitzugeben, und nutzt ihn zusammen mit Bilderkennung und dem Seiteninhalt, um das Thema des Bildes zu verstehen. Er sollte das Bild normal beschreiben, nicht als Liste von Suchbegriffen.
Ja, wenn die Rahmenbedingungen stimmen. Entscheidend sind Seitenlicht, etwa von einem Fenster, ein neutraler Hintergrund und ein stabiler Aufbau. Direktes Blitzlicht macht Produkte flach und erzeugt Spiegelungen, deshalb besser darauf verzichten.
