Die passende WooCommerce Bildgröße für einen sauberen Modeshop

Die Antwort von WooCommerce ist einfach: Lade Bilder mit mindestens 800 × 800 Pixeln hoch. Laut dem Leitfaden zu Produktbildern wirkt diese Größe gut als Produktseitenbild, Katalogbild und Vorschaubild. Der Leitfaden zu unscharfen Bildern nennt sie ebenfalls als Minimum für die meisten Themes.

Sieh 800 als Untergrenze, nicht als Ziel. Zeigt dein Theme das Hauptbild am Desktop 800 px breit, braucht ein hochauflösendes Handy- oder Laptop-Display etwa das Doppelte, damit es scharf bleibt. WooCommerce rät selbst, Vorschaubilder auf das Doppelte der angezeigten Größe zu setzen, etwa 160 × 160 für einen 80 × 80 großen Platz, und weist darauf hin, dass größere Bilder Ladezeit kosten.

Eine praktische Regel für einen Modeshop: Exportiere das Original mit 1600 bis 2000 px an der langen Kante, als JPEG oder WebP, komprimiert auf einige hundert Kilobyte. Das reicht für Zoom und scharfe Displays, ohne den Shop auszubremsen. Vergrößere nie ein kleines Foto, nur um eine Zahl zu erreichen: Eine größere Bildgröße fügt einem kleinen Original keine Details hinzu, so WooCommerce selbst.

Die Einstellungen liegen im Customizer: Design › Customizer › WooCommerce › Produktbilder. Je nach Theme siehst du dort die Breite des Hauptbilds, die Breite der Vorschaubilder und den Zuschnitt der Vorschaubilder. Ändern, Vorschau prüfen, dann auf Veröffentlichen klicken; ohne Veröffentlichen sehen Kunden nichts Neues.

Fehlen Felder, legt dein Theme die Größen selbst fest. Seit WooCommerce 3.3 kann ein Theme seine Bildbreiten deklarieren, und laut Entwicklerdokumentation kann der Shopbetreiber sie dann nicht mehr ändern: Die Breitenfelder werden ausgeblendet, nur der Zuschnitt bleibt. Dann entscheiden die Theme-Einstellungen oder seine Dokumentation über die Größe, und es ist klüger, die Fotos ans Theme anzupassen, als dagegen zu arbeiten.

Block-Themes und der Produktgalerie-Block können Bilder noch einmal anders zeigen, und jedes Theme kann Bilder per CSS skalieren. Schau dir deshalb nach jeder Änderung die echte Shopseite und eine Produktseite am Handy und am Laptop an, nicht nur die Zahlen.

Für den Zuschnitt der Vorschaubilder gibt es drei Optionen. 1:1 macht jedes Katalogbild quadratisch. Benutzerdefiniert lässt dich ein Seitenverhältnis eingeben, etwa 3:4 fürs Hochformat. Nicht zugeschnitten zeigt jedes Bild so, wie es ist; haben deine Fotos verschiedene Formate, wird das Raster unruhig.

Bei Mode entscheidet der Zuschnitt, ob Kopf und Schuhe im Bild bleiben. WooCommerce schneidet von der Mitte aus: Ein 3:4-Modelfoto, das zum Quadrat wird, verliert den Kopf oben und die Füße unten. Entscheide dich für ein System: Entweder fotografierst oder exportierst du jedes Hauptbild genau im eingestellten Format, oder du bleibst bei 1:1 und lässt über dem Kopf und unter den Schuhen Platz.

Was du auch wählst, nutze es für das erste Bild jedes Produkts. Ein quadratisches Produkt neben drei Hochformaten lässt eine Kategorieseite kaputt aussehen. Dieselbe Entscheidung für Shopify findest du unter Shopify Produktbildgröße.

Unschärfe hat meist eine von drei Ursachen, so der WooCommerce-Leitfaden zu unscharfen Produktbildern: Die hochgeladene Datei ist zu klein, die Größeneinstellungen liegen unter dem, was das Theme zeigt, oder die Vorschaubilder wurden nach einer Änderung nicht neu erzeugt. Die Lösung folgt derselben Reihenfolge: größeres Original, Hauptbildbreite mindestens so groß wie im Theme, dann neu erzeugen.

Zu groß kann zweierlei bedeuten. Füllt das Bild den Bildschirm oder schiebt es den Text nach unten, bestimmt das CSS des Themes die Anzeigegröße; das ist eine Theme-Einstellung, keine von WooCommerce. Lädt die Seite langsam, sind die Dateien zu schwer: Ein 6-MB-Foto direkt vom Handy ist weit mehr, als eine Produktseite braucht. Vor dem Upload verkleinern und komprimieren.

Halte auch Hintergründe und Licht einheitlich, damit das Raster wie ein Shop wirkt, selbst wenn die Größen stimmen. Darum geht es im Leitfaden zum Hintergrund für Produktfotos.

Das Schwierigste an einem sauberen WooCommerce-Raster ist nicht die Einstellung, sondern jedes Produkt in denselben Rahmen zu bekommen. Liegend, am Bügel, Lieferantenfotos: Alles hat ein anderes Format. Mit KI-Produktfotos mit Model lädst du ein Handyfoto hoch und wählst vor dem Erstellen das Format: 3:4, 2:3, 1:1, 4:5 oder 9:16. Das Ergebnis wird genau auf dieses Format geschnitten; ein 1:1-Shop bekommt Quadrate, ein benutzerdefinierter 3:4-Zuschnitt bekommt 3:4.

Garmo zieht das Kleidungsstück einem von 42 fertigen Models an (22 Frauen und 20 Männer), im Studio, auf der Straße oder im Editorial-Setting; ein Set aus drei Bildern ist in etwa einer Minute fertig. Für ein ganzes Outfit auf einem Foto nimm Kleidung auf KI-Model; für Kleidung von oben fotografiert funktioniert Flat Lay zu Model mit jeder Draufsicht.

Prüf vor dem Upload die Pixelgröße jedes Downloads, lass dein eigenes Foto des echten Produkts neben dem Modelfoto in der Galerie und vergleiche Farbe und Details mit dem Kleidungsstück. Den ganzen Ablauf mit dem Handy findest du unter Produktfotos mit dem Handy machen.