Produktbilder gehören zu den wichtigsten Informationen eines Online-Shops. Kunden können ein Produkt nicht in die Hand nehmen und von allen Seiten betrachten. Gute Bilder helfen deshalb dabei, das Produkt möglichst realistisch und verständlich zu präsentieren.
WooCommerce unterscheidet dabei zwischen dem Produktbild und der Produktgalerie. Das Produktbild ist das Hauptbild eines Produkts. Über die Galerie kannst du zusätzliche Bilder hinzufügen.
Wenn du gerade dein erstes Produkt anlegst, findest du den kompletten Ablauf im Artikel Erstes Produkt in WooCommerce erstellen.
Kurz erklärt: Das Produktbild ist das Hauptbild deines Produkts. Die Produktgalerie ergänzt dieses Hauptbild mit weiteren Ansichten, Detailaufnahmen oder anderen hilfreichen Bildern.
Produktbild und Produktgalerie – was ist der Unterschied? #
Das Produktbild ist das zentrale Bild eines WooCommerce-Produkts. Es wird von WooCommerce an verschiedenen Stellen verwendet, beispielsweise auf der Produktseite und in Produktübersichten.
Die Produktgalerie enthält zusätzliche Bilder desselben Produkts.
Bei einer Kaffeetasse könnte die Aufteilung beispielsweise so aussehen:
Produktbild
└── Tasse schräg von vorne
Produktgalerie
├── Seitenansicht
├── Ansicht von oben
├── Detailaufnahme des Materials
└── Tasse in Verwendung
Die Galerie ersetzt das Produktbild also nicht. Sie ergänzt es.
Das Produktbild festlegen #
Öffne im WordPress-Backend das Produkt, das du bearbeiten möchtest.
Je nach verwendeter WordPress- und WooCommerce-Oberfläche findest du im Produkteditor einen Bereich für das Produktbild.
Klicke dort auf die Funktion zum Festlegen des Produktbildes. Anschliessend öffnet sich die WordPress-Mediathek.
Du kannst nun entweder ein bereits vorhandenes Bild auswählen oder eine neue Bilddatei hochladen.
Wähle das gewünschte Bild aus und bestätige die Auswahl. Das Bild wird anschliessend als Hauptbild des Produkts verwendet.
Tipp: Wähle als Hauptbild eine Aufnahme, auf der das Produkt sofort gut erkennbar ist. Eine extreme Detailaufnahme eignet sich normalerweise besser für die Galerie als für das zentrale Produktbild.
Ein neues Produktbild hochladen #
Wenn das gewünschte Bild noch nicht in WordPress vorhanden ist, kannst du es direkt beim Festlegen des Produktbildes hochladen.
Die Datei wird dabei in die WordPress-Mediathek übernommen und kann anschliessend auch dort verwaltet werden.
Achte vor dem Hochladen darauf, dass das Bild für die Verwendung im Web geeignet ist. Sehr grosse Bilddateien können unnötig viel Speicherplatz und Datenübertragung verursachen und die Ladezeit einer Produktseite beeinträchtigen.
Die Bilddatei sollte deshalb nicht einfach unverändert aus einer Kamera oder einem hochauflösenden Original übernommen werden, wenn diese Auflösung für die Website gar nicht benötigt wird.
Welches Bildformat sollte ich verwenden? #
WordPress unterstützt verschiedene Bildformate. Für normale Produktfotos kommen häufig JPEG, WebP oder – abhängig vom Bild und der verwendeten Umgebung – andere moderne Webformate infrage. PNG ist besonders dort sinnvoll, wo beispielsweise Transparenz benötigt wird.
Welches Format am besten geeignet ist, hängt vom Bildinhalt und der gewünschten Verwendung ab.
Für ein klassisches Produktfoto mit vielen Farben und Details ist ein Fotoformat mit guter Komprimierung sinnvoll. Bei Grafiken, Logos oder Bildern mit transparentem Hintergrund können andere Formate geeigneter sein.
Wichtig: Nicht allein die Dateiendung entscheidet über eine gute Ladezeit. Entscheidend sind auch Bildabmessungen, Komprimierung und die tatsächlich übertragene Dateigrösse.
Wie gross sollte ein Produktbild sein? #
Es gibt keine einzige Pixelgrösse, die für jeden WooCommerce-Shop richtig ist.
Die benötigte Bildgrösse hängt unter anderem vom verwendeten Theme, dem Aufbau der Produktseite, der gewünschten Zoom-Darstellung und der Bildschirmgrösse ab.
WooCommerce empfiehlt für Produktbilder eine ausreichende Ausgangsgrösse und nennt in seiner aktuellen Dokumentation mindestens 800 × 800 Pixel als sinnvollen Ausgangspunkt. Grössere Bilder können insbesondere für Zoom-Funktionen erforderlich beziehungsweise sinnvoll sein.
Das bedeutet jedoch nicht, dass jedes Bild möglichst riesig hochgeladen werden sollte.
Ein Produktbild sollte gross genug sein, damit das Produkt scharf dargestellt werden kann, aber nicht unnötig gross sein.
Praxisbeispiel: Wenn dein Produktbild auf der Website nur einige hundert Pixel breit dargestellt wird, ist ein Original mit beispielsweise 6000 × 4000 Pixeln in vielen Fällen unnötig gross. Das Bild sollte vor oder während der Webaufbereitung auf eine vernünftige Grösse gebracht werden.
Einheitliche Bildproportionen verwenden #
Für ein ruhiges und professionelles Erscheinungsbild solltest du bei vergleichbaren Produkten möglichst einheitliche Bildproportionen verwenden.
Wenn beispielsweise ein Produktbild quadratisch, das nächste extrem hoch und das dritte sehr breit ist, kann eine Produktübersicht unruhig wirken.
Ein einheitlicher Aufbau könnte beispielsweise sein:
Produkt A → quadratisch
Produkt B → quadratisch
Produkt C → quadratisch
Produkt D → quadratisch
Das bedeutet nicht, dass jedes Originalbild exakt gleich sein muss. Entscheidend ist, dass die Bilder in deinem Shop zusammenpassen und wichtige Produktbereiche nicht durch unterschiedliche Zuschnitte verloren gehen.
Wie WooCommerce Bilder tatsächlich zuschneidet oder darstellt, hängt auch vom Theme und den verwendeten Shop-Einstellungen ab.
Produkte nicht zu stark anschneiden #
Das Hauptprodukt sollte auf dem Bild vollständig oder zumindest so dargestellt sein, dass ein Kunde sofort versteht, was angeboten wird.
Wenn WooCommerce oder dein Theme Vorschaubilder automatisch zuschneidet, solltest du deshalb kontrollieren, ob wichtige Teile des Produkts abgeschnitten werden.
Das ist besonders bei sehr hohen oder sehr breiten Produkten relevant.
Die Produktgalerie verwenden #
Ein einziges Produktbild reicht bei vielen Produkten nicht aus.
Über die Produktgalerie kannst du zusätzliche Aufnahmen hinterlegen.
Öffne dazu im Produkteditor den Bereich für die Produktgalerie und wähle die Funktion zum Hinzufügen von Bildern.
Auch hier kannst du vorhandene Bilder aus der WordPress-Mediathek auswählen oder neue Dateien hochladen.
Du kannst mehrere Bilder für die Galerie auswählen.
Welche Bilder gehören in die Galerie? #
Die Galerie sollte dem Kunden zusätzliche Informationen liefern und nicht einfach fünf nahezu identische Bilder zeigen.
Je nach Produkt können beispielsweise sinnvoll sein:
- weitere Ansichten des Produkts
- Rückseite oder Unterseite
- Detailaufnahmen
- Anschlüsse oder Bedienelemente
- Materialstruktur
- Grössenvergleich
- Produkt in Verwendung
- Verpackung oder Lieferumfang, wenn dies für den Kauf relevant ist
Bei einem Rucksack könnten beispielsweise Vorderseite, Rückseite, Innenraum, Tragesystem und einzelne Fächer gezeigt werden.
Bei einem elektronischen Gerät können Anschlüsse und Bedienelemente wichtig sein.
Die entscheidende Frage lautet: Welche Ansicht hilft einem Kunden bei seiner Kaufentscheidung?
Reihenfolge der Galeriebilder ändern #
Die Bilder der Produktgalerie können im WooCommerce-Produkteditor per Drag-and-drop neu angeordnet werden.
Ziehe ein Bild an die gewünschte Position und speichere beziehungsweise aktualisiere danach das Produkt.
Ordne die Bilder möglichst logisch.
Zum Beispiel:
Hauptbild
↓
zweite Gesamtansicht
↓
Seitenansicht
↓
Detailaufnahme
↓
Produkt in Verwendung
So erhält der Kunde beim Durchsehen der Bilder eine nachvollziehbare Reihenfolge.
Bild aus der Produktgalerie entfernen #
Wenn ein Bild nicht mehr benötigt wird, kannst du es aus der Produktgalerie entfernen.
Das Entfernen eines Bildes aus der Galerie bedeutet nicht automatisch, dass die Bilddatei auch aus der WordPress-Mediathek gelöscht wird.
Die Datei kann weiterhin in WordPress vorhanden sein und an anderen Stellen der Website verwendet werden.
Wichtig: Lösche eine Bilddatei nicht vorschnell direkt aus der Mediathek. Dass du sie bei diesem Produkt nicht mehr benötigst, bedeutet nicht, dass sie nicht an einer anderen Stelle deiner Website verwendet wird.
Produktbild austauschen #
Wenn du das Hauptbild eines Produkts ändern möchtest, entfernst beziehungsweise ersetzt du die bisherige Zuordnung und wählst ein anderes Bild aus der Mediathek oder lädst ein neues hoch.
Speichere beziehungsweise aktualisiere das Produkt anschliessend.
Kontrolliere danach sowohl die Produktseite als auch eine Produktübersicht. So erkennst du, ob das neue Bild in beiden Darstellungen richtig zugeschnitten und angezeigt wird.
Was passiert mit dem alten Produktbild? #
Wenn du einem Produkt ein neues Hauptbild zuweist, wird die bisher verwendete Bilddatei dadurch nicht automatisch aus der WordPress-Mediathek gelöscht.
Das ist sinnvoll, weil dieselbe Mediendatei möglicherweise noch an anderer Stelle verwendet wird.
Wenn du alte Bilder später aus der Mediathek entfernen möchtest, solltest du deshalb vorher prüfen, ob sie tatsächlich nicht mehr benötigt werden.
ALT-Text für Produktbilder eintragen #
WordPress bietet in der Mediathek für Bilder ein Feld für den Alternativtext beziehungsweise ALT-Text.
Der ALT-Text beschreibt den Inhalt beziehungsweise die Funktion eines Bildes für Situationen, in denen das Bild nicht visuell wahrgenommen werden kann. Er ist insbesondere für die Barrierefreiheit wichtig.
Ein sinnvoller ALT-Text beschreibt das tatsächlich sichtbare Produkt möglichst knapp und verständlich.
Beispiel:
Schwarzer Wanderrucksack mit geöffnetem Hauptfach
Weniger hilfreich wäre:
bild123.jpg
oder eine künstliche Aneinanderreihung von Suchbegriffen.
Grundregel: Beschreibe, was auf dem Bild relevant zu sehen ist. Schreibe den ALT-Text für Menschen und nicht als Liste möglichst vieler Keywords.
Muss jedes Galeriebild denselben ALT-Text haben? #
Nein. Wenn verschiedene Bilder unterschiedliche Ansichten zeigen und ein Alternativtext für diese Bilder sinnvoll ist, sollte der Text auch die jeweilige Ansicht beschreiben.
Beispielsweise:
Hauptbild:
Schwarzer Wanderrucksack von vorne
Galeriebild:
Schwarzer Wanderrucksack mit geöffnetem Hauptfach
Galeriebild:
Rückseite des schwarzen Wanderrucksacks mit Tragesystem
So beschreibt jeder Alternativtext tatsächlich das jeweilige Bild.
Produktbilder bei variablen Produkten #
Bei variablen Produkten kann WooCommerce einzelnen Varianten eigene Bilder zuweisen.
Das ist beispielsweise bei unterschiedlichen Farben sehr hilfreich.
Ein T-Shirt könnte so eingerichtet sein:
Variante Schwarz
→ Bild des schwarzen T-Shirts
Variante Weiss
→ Bild des weissen T-Shirts
Variante Rot
→ Bild des roten T-Shirts
Wenn ein Kunde eine Variante auswählt, kann WooCommerce das zu dieser Variante gehörende Bild anzeigen.
Dadurch sieht der Kunde nicht nur den Namen der gewählten Farbe, sondern auch die entsprechende Produktansicht.
Ein Variantenbild ersetzt nicht automatisch eine komplette Galerie pro Variante #
WooCommerce Core ermöglicht es, einer Variante ein eigenes Bild zuzuweisen.
Eine vollständig separate Galerie mit mehreren Bildern für jede einzelne Variante gehört dagegen nicht zur grundlegenden Variantenfunktion von WooCommerce Core.
Wenn du beispielsweise für jede Farbe fünf eigene Galeriebilder benötigst, kann dafür eine zusätzliche Erweiterung oder eine entsprechende Funktion des verwendeten Themes beziehungsweise Shop-Systems erforderlich sein.
Wichtig: Installiere nicht einfach irgendein Galerie-Plugin, nur weil du zusätzliche Bilder benötigst. Prüfe zuerst, ob dein Theme oder eine bereits vorhandene Erweiterung die gewünschte Funktion schon bereitstellt.
Was zeigt WooCommerce auf der Produktseite? #
WooCommerce stellt die technischen Produktbild- und Galeriefunktionen bereit. Die genaue Darstellung im Frontend wird jedoch stark vom verwendeten Theme beziehungsweise vom Aufbau der Produktseite beeinflusst.
Je nach Shop können beispielsweise vorhanden sein:
- grosses Hauptbild
- kleine Vorschaubilder der Galerie
- Zoom-Funktion
- Lightbox
- Slider oder Karussell
Deshalb können zwei WooCommerce-Shops mit denselben Produktbildern unterschiedlich aussehen.
Produktbild sieht im Backend gut aus, im Shop aber nicht #
Wenn ein Bild in der WordPress-Mediathek korrekt aussieht, auf der Produktseite oder in der Shop-Übersicht aber ungünstig dargestellt wird, muss nicht die Originaldatei beschädigt sein.
Mögliche Ursachen sind beispielsweise:
- das Theme verwendet einen bestimmten Bildausschnitt,
- Produktvorschaubilder besitzen andere Proportionen,
- das Bild ist für die gewünschte Darstellung zu klein,
- ein Page Builder verändert das Produktlayout,
- zwischengespeicherte Bild- oder Seitendaten zeigen noch eine ältere Version.
Prüfe deshalb zuerst, ob nur eine bestimmte Darstellung betroffen ist.
Unscharfe Produktbilder #
Ein kleines Ausgangsbild kann unscharf wirken, wenn es auf der Produktseite deutlich grösser dargestellt wird.
Beispiel:
Originalbild:
300 × 300 Pixel
Darstellung auf grossem Bildschirm:
deutlich grösser als das Original
Der Browser kann fehlende Bildinformationen nicht einfach wiederherstellen. Das Bild wird vergrössert und kann dadurch unscharf erscheinen.
Verwende deshalb Ausgangsbilder mit ausreichender Auflösung.
Zu grosse Produktbilder #
Das andere Extrem sind unnötig grosse Originaldateien.
Ein Foto mit mehreren tausend Pixeln Breite und sehr grosser Dateigrösse kann für eine normale Produktdarstellung überdimensioniert sein.
WordPress erzeugt beim Hochladen zwar verschiedene Bildgrössen, trotzdem solltest du die Ausgangsbilder sinnvoll für das Web vorbereiten.
Gerade bei einem Shop mit vielen Produkten können schlecht optimierte Bilder einen erheblichen Anteil des übertragenen Datenvolumens ausmachen.
Produktbilder und Ladezeit #
Produktseiten enthalten häufig mehrere hochauflösende Bilder. Dadurch können Bilder einen grossen Einfluss auf die Ladezeit haben.
Wichtig sind insbesondere:
- passende Bildabmessungen
- geeignete Komprimierung
- passendes Dateiformat
- nicht mehr Bilder laden als tatsächlich benötigt werden
Wenn du wissen möchtest, wie schnell deine Produktseite tatsächlich lädt, kannst du die Ladezeit mit den Methoden aus dem Artikel Website-Ladezeit messen überprüfen.
Für eine zusätzliche technische Analyse kannst du auch Google PageSpeed Insights verwenden.
Bilddateien sinnvoll benennen #
Es ist sinnvoll, Bilddateien bereits vor dem Hochladen verständlich zu benennen.
Statt:
IMG_8472.jpg
kann beispielsweise verwendet werden:
wanderrucksack-schwarz-vorne.jpg
Das erleichtert auch dir selbst die spätere Verwaltung in einer grossen Mediathek.
Wenn hunderte Produktbilder nur Namen wie DSC_0012, IMG_4821 oder final-neu-3 besitzen, wird die Suche nach einer bestimmten Datei unnötig schwierig.
Mehrere Bilder nicht unnötig doppelt hochladen #
Wenn eine Bilddatei bereits in der WordPress-Mediathek vorhanden ist und für ein weiteres Produkt verwendet werden soll, musst du sie nicht zwingend nochmals hochladen.
Du kannst vorhandene Medien erneut auswählen.
Das verhindert unnötige Kopien derselben Datei und hält die Mediathek übersichtlicher.
Produktbilder nach dem Speichern kontrollieren #
Nach dem Hinzufügen oder Ändern von Produktbildern solltest du das Produkt speichern beziehungsweise aktualisieren und anschliessend die tatsächliche Produktseite öffnen.
Kontrolliere dort insbesondere:
- Wird das richtige Hauptbild angezeigt?
- Ist das Produkt vollständig und scharf erkennbar?
- Werden alle Galeriebilder angezeigt?
- Ist die Reihenfolge sinnvoll?
- Funktioniert die Bildauswahl beziehungsweise Galerie?
- Werden Variantenbilder korrekt gewechselt?
- Sieht die Darstellung auch auf einem Smartphone vernünftig aus?
Kontrolliere zusätzlich eine Produktübersicht beziehungsweise Kategorie. Das Hauptbild kann dort anders zugeschnitten oder in einer anderen Grösse dargestellt werden als auf der einzelnen Produktseite.
Ein einfaches Beispiel für eine gute Bilderstruktur #
Nehmen wir einen schwarzen Wanderrucksack.
| Bild | Aufgabe |
|---|---|
| Hauptbild | Rucksack vollständig von vorne beziehungsweise leicht seitlich zeigen |
| Galeriebild 1 | Rückseite und Tragesystem zeigen |
| Galeriebild 2 | Geöffnetes Hauptfach zeigen |
| Galeriebild 3 | Taschen und Reissverschlüsse im Detail zeigen |
| Galeriebild 4 | Rucksack getragen beziehungsweise in Verwendung zeigen |
Damit beantwortet jedes Bild eine andere mögliche Frage des Kunden.
Was du bei Produktbildern vermeiden solltest #
Einige typische Probleme lassen sich bereits beim Einrichten vermeiden:
- unscharfe oder zu kleine Ausgangsbilder
- unnötig riesige Bilddateien
- völlig unterschiedliche Bildproportionen innerhalb einer Produktübersicht
- mehrere nahezu identische Galeriebilder ohne zusätzlichen Informationswert
- falsche Variantenbilder
- unverständliche Dateinamen
- ALT-Texte, die nur aus einer Liste von Suchbegriffen bestehen
- vorschnelles Löschen vermeintlich unbenutzter Dateien aus der Mediathek
Entscheidend ist nicht, möglichst viele Bilder zu verwenden. Die Bilder sollten dem Kunden helfen, das Produkt möglichst gut zu beurteilen.
Wie geht es weiter? #
Nachdem Produktinformationen, Varianten, Eigenschaften und Bilder eingerichtet sind, solltest du dich mit dem verfügbaren Bestand beschäftigen.
Im nächsten Artikel erklären wir deshalb, wie du Lagerbestand, SKU und Lieferstatus in WooCommerce verwaltest. Dabei schauen wir uns unter anderem die automatische Bestandsverwaltung, Lagerstatus, Bestellrückstände und die Verwaltung von Variantenbeständen an.
Zusammenfassung #
Das Produktbild ist das Hauptbild eines WooCommerce-Produkts. Über die Produktgalerie kannst du zusätzliche Ansichten, Detailaufnahmen und weitere hilfreiche Bilder ergänzen.
Verwende ausreichend grosse und für das Web geeignete Bilder, ohne unnötig riesige Originaldateien hochzuladen. Einheitliche Proportionen sorgen insbesondere in Produktübersichten für ein ruhigeres Erscheinungsbild.
Galeriebilder lassen sich in WooCommerce per Drag-and-drop sortieren. Das Entfernen eines Bildes aus einer Produktgalerie löscht die Datei nicht automatisch aus der WordPress-Mediathek.
Bei variablen Produkten kann einzelnen Varianten ein eigenes Bild zugeordnet werden. Eine komplette separate Galerie für jede Variante gehört jedoch nicht zur grundlegenden WooCommerce-Core-Funktion.
Kontrolliere Produktbilder nach jeder grösseren Änderung direkt im Shop – auf der Produktseite, in Produktübersichten und auf einem Smartphone.
