Produktbilder für Shopify, Shopware, WooCommerce: Größen

Welche Größe sollten Produktbilder bei Shopify haben, und gilt dasselbe für Shopware und WooCommerce? Die drei Systeme beantworten die Frage unterschiedlich. Shopify nennt eine Wunschgröße, Shopware dokumentiert seine Thumbnail-Stufen, WooCommerce eine Mindestgröße. Wer das nicht weiß, lädt entweder zu kleine Bilder hoch, die im Zoom verschwimmen, oder 8-MB-Dateien, die das Smartphone ausbremsen.

Dieser Technik-Guide stellt die Werte aus der offiziellen Dokumentation der drei Systeme nebeneinander, mit Quelle und Stand. Danach geht es um Zoom, Seitenverhältnis, ein gemeinsames Master-Format und die Ladezeit. Für die Ladezeit haben wir selbst gemessen, wie groß dasselbe Foto in vier Breiten und drei Formaten wird.

Wie Sie Dateinamen, Alt-Texte und strukturierte Daten für Google aufbereiten, erklärt der Schwesterartikel Bild-SEO für Produktbilder. Hier geht es um Pixel, Kilobyte und Einstellungen im Backend.

Welche Bildgröße empfehlen Shopify, Shopware und WooCommerce?

Kurz: Shopify empfiehlt 2.048 x 2.048 Pixel für quadratische Bilder, Shopware 6 erzeugt Thumbnails bis 1.920 Pixel, WooCommerce verlangt für die meisten Themes mindestens 800 x 800 Pixel. Ein Upload mit rund 2.048 Pixeln an der längsten Seite deckt alle drei ab.

Punkt	Shopify	Shopware 6	WooCommerce
Empfohlene Uploadgröße	2.048 x 2.048 px bei quadratischen Bildern	keine feste Angabe, größtes Standard-Thumbnail 1.920 x 1.920 px	mindestens 800 x 800 px für die meisten Themes
Obergrenzen	5.000 x 5.000 px oder 25 Megapixel, unter 20 MB	in der Doku nicht genannt	in der Doku nicht genannt, abhängig von WordPress und Server
Upload-Formate	PNG als bestes Format, danach JPEG; außerdem TIFF, BMP, GIF, SVG, HEIC, WebP	unter anderem jpg, jpeg, png, webp, gif, svg, bmp, tiff	WordPress-Mediathek, keine eigene Liste in der WooCommerce-Doku
Automatisch erzeugte Größen	verschiedene Größen je Theme-Bereich, per image_url bis 5.760 px	400, 800 und 1.920 px, je Medienordner änderbar	Einzelbild 600 px breit, Katalogbild 300 px breit, Galerie-Vorschau 100 x 100 px
Format bei Auslieferung	wählt je Browser ein passendes Format, etwa WebP oder AVIF	keine automatische Umwandlung dokumentiert	keine automatische Umwandlung dokumentiert
Zuschnitt	Parameter crop im Filter image_url	Option „Seitenverhältnis beibehalten“	Customizer: 1:1, Custom oder Uncropped
Wo einstellen	im Theme-Code (Liquid)	Inhalte, Medien, Ordner-Einstellungen, Thumbnails	Design, Customizer, WooCommerce, Produktbilder
Nach Änderungen	Größen entstehen bei Bedarf über das CDN	Konsolenbefehl media:generate-thumbnails	Neuberechnung im Hintergrund seit Version 3.3, manuell unter Status, Werkzeuge
Quelle	Shopify-Hilfe, shopify.dev	docs.shopware.com, developer.shopware.com	woocommerce.com, developer.woocommerce.com
Stand	10/2026	10/2026	10/2026

Die vollständigen Quellen-URLs stehen unter dem Artikel. Themes und Plugins können die Werte ändern, bitte im eigenen Shop prüfen.

Shopify: 2.048 Pixel hochladen, den Rest erledigt das CDN

Shopify nennt in der Hilfe zu Produktmedien 2.048 x 2.048 Pixel als Größe, die bei quadratischen Produktbildern meist am besten angezeigt wird. Erlaubt sind Bilder bis 5.000 x 5.000 Pixel oder 25 Megapixel und Dateien unter 20 MB.

Als bestes Format für die meisten Produktbilder nennt Shopify PNG, gefolgt von JPEG. Für Fotos ohne Transparenz ist ein hochwertiges JPEG in der Praxis kleiner und reicht völlig, weil Shopify ohnehin neu kodiert (Einschätzung der Redaktion). PNG lohnt sich vor allem für freigestellte Produkte mit transparentem Hintergrund.

Wichtig für die Ladezeit: Shopify erzeugt die kleineren Größen selbst. Laut Shopify-Entwicklerdoku zum Filter image_url erkennt Shopify, welche Formate der Browser unterstützt, und wählt ein Format mit gutem Verhältnis aus Qualität und Dateigröße, genannt werden WebP und AVIF. Sie müssen also kein WebP hochladen. Der Filter erlaubt Breiten und Höhen bis 5.760 Pixel und einen Zuschnitt per crop mit den Werten top, center, bottom, left, right oder region.

Der Filter image_tag erzeugt laut Shopify automatisch ein srcset mit einer Reihe von Breiten bis zur in der Bild-URL angegebenen Maximalbreite. Ohne den Parameter preload setzt er Bilder in weiter unten liegenden Abschnitten automatisch auf lazy. Shopify rät selbst, Bilder im ersten sichtbaren Bereich nicht lazy zu laden und preload sparsam für genau diese Bilder zu nutzen. Prüfen Sie, wie Ihr Theme das Hauptbild auf der Produktseite behandelt.

Shopware 6: Thumbnail-Stufen je Medienordner

Shopware 6 erzeugt aus jedem hochgeladenen Bild standardmäßig drei Thumbnails mit 400 x 400, 800 x 800 und 1.920 x 1.920 Pixeln. Eine feste Uploadgröße nennt die Shopware-Dokumentation zu Medien nicht.

Die Thumbnail-Einstellungen liegen in den Einstellungen des jeweiligen Medienordners. Dort legen Sie fest:

• Größen: eigene Stufen hinzufügen oder entfernen. Unterordner können die Einstellungen des übergeordneten Ordners erben.
• Seitenverhältnis beibehalten: Die Option sorgt dafür, dass ein rechteckiges Bild bei quadratischen Thumbnail-Größen nicht verzerrt wird.
• Thumbnail-Qualität: von 1 für sehr niedrige bis 100 für sehr hohe Qualität.

Nach jeder Änderung an den Größen erzeugen Sie die Thumbnails mit dem Konsolenbefehl media:generate-thumbnails im Hauptverzeichnis der Installation neu.

Für Entwickler zwei Details aus der Entwicklerdoku: Die Twig-Funktion sw_thumbnails baut img und srcset aus den Thumbnails automatisch. Lässt man den Parameter sizes weg, nutzt Shopware die Breakpoints des Themes. Lazy Loading ist bei neu eingefügten sw_thumbnails-Elementen standardmäßig aus und muss für Bilder weiter unten aktiv eingeschaltet werden. Seit Version 6.6.4.0 kann Shopware die Thumbnail-Erzeugung außerdem an einen externen Dienst abgeben (Remote Thumbnails), etwa ein Bild-CDN.

Richtwert der Redaktion: Laden Sie mindestens 1.920 Pixel an der längsten Seite hoch. Sonst ist das Original kleiner als die größte Thumbnail-Stufe, und die Detailansicht zeigt nicht mehr Bildpunkte, als tatsächlich vorhanden sind.

WooCommerce: Customizer, Zuschnitt und Neuberechnung

WooCommerce empfiehlt in seiner Dokumentation zu unscharfen Produktbildern Originalbilder mit mindestens 800 x 800 Pixeln für die meisten Themes. Im Theme Storefront ist diese Größe nötig, damit der Zoom-Effekt greift, obwohl das Bild nicht in dieser Größe angezeigt wird.

Die Größen stellen Sie unter Design, Customizer, WooCommerce, Produktbilder ein, bei Block-Themes im Website-Editor. WooCommerce kennt drei eigene Bildgrößen:

Bildgröße	Einsatz	Standard	Zuschnitt
woocommerce_single	Hauptbild auf der Produktseite	600 px Breite	standardmäßig nicht beschnitten
woocommerce_thumbnail	Produktraster, etwa Shopseite und Kategorien	300 px Breite	standardmäßig quadratisch
woocommerce_gallery_thumbnail	Vorschaubilder unter dem Hauptbild	100 x 100 px	immer quadratisch

Quelle: WooCommerce-Entwicklerdokumentation, Stand 10/2026. Themes können eigene Werte festlegen, dann zeigt der Customizer nur noch die Zuschnitt-Option.

Für den Zuschnitt der Katalogbilder bietet der Customizer drei Optionen: 1:1 (quadratisch), Custom (eigenes Seitenverhältnis) und Uncropped (Originalverhältnis). Für Retina-Displays rät WooCommerce, Thumbnails doppelt so groß anzulegen wie dargestellt, also etwa 160 x 160 Pixel für eine Anzeige mit 80 x 80 Pixeln.

Neu berechnen: Seit Version 3.3 startet WooCommerce bei geänderten Einstellungen laut Entwicklerblog einen Hintergrundprozess, der alle Bilder neu skaliert, und skaliert bis dahin bei Bedarf im Frontend. Manuell stoßen Sie die Neuberechnung unter WooCommerce, Status, Werkzeuge mit „Regenerate shop thumbnails“ an.

Wie viele Pixel braucht der Zoom?

Der Zoom braucht mehr Pixel, als die Produktseite normal anzeigt. Wie viele, hängt vom Theme ab. Belegte Werte gibt es nur für einzelne Fälle.

System oder Kanal	Belegter Wert für Zoom	Quelle
WooCommerce mit Storefront	800 x 800 px als Mindestgröße für den Zoom-Effekt	WooCommerce-Doku
WooCommerce allgemein	Zoom und Vollbild nutzen standardmäßig die Größe „full“, also das Original	WooCommerce-Entwicklerdoku
Shopify	kein Zoom-Wert genannt, 2.048 px als beste Anzeige für quadratische Bilder	Shopify-Hilfe
Shopware 6	kein Zoom-Wert genannt, größtes Standard-Thumbnail 1.920 px	Shopware-Doku
Amazon	Zoom ab 1.000 px an der längsten Seite	Seller-Central-Hilfe

Stand 10/2026.

In WooCommerce zeigt die Lupe also das hochgeladene Original. Ein zu kleines Original macht den Zoom wertlos, ein riesiges Original wird erst beim Zoomen geladen, belastet aber Speicherplatz und Upload-Zeit. Mit rund 2.048 Pixeln liegen Sie in allen Systemen im sinnvollen Bereich. Wer Kunden das Produkt von allen Seiten zeigen will, braucht statt größerer Einzelbilder eher eine Bildserie, mehr dazu im Ratgeber zu 360-Grad-Produktfotos.

Warum muss das Seitenverhältnis einheitlich sein?

Ein einheitliches Seitenverhältnis sorgt dafür, dass alle Produkte auf Kategorieseiten gleich groß erscheinen und das Raster nicht springt. Shopify empfiehlt ausdrücklich ein einheitliches Seitenverhältnis für alle Hauptbilder.

Gemischte Formate machen in jedem System Ärger: WooCommerce schneidet Katalogbilder standardmäßig quadratisch zu und kann dabei Teile des Produkts abschneiden. Shopware verzerrt mit „Seitenverhältnis beibehalten“ nichts, liefert dann aber unterschiedlich hohe Kacheln.

Die sauberste Lösung ist, schon beim Export alle Hauptbilder in dasselbe Verhältnis zu setzen, mit gleichem Randabstand. 1:1 passt für fast alle Shops und Marktplätze, 4:5 nutzt auf dem Smartphone mehr Fläche. Die Vor- und Nachteile beider Formate stehen im Leitfaden Produktfotos für den Onlineshop.

Ein Master-Format für Shop und Marktplätze

Sie brauchen nicht für jedes System einen eigenen Export. Ein quadratisches Master-Bild mit rund 2.048 bis 2.400 Pixeln, sRGB und hoher JPEG-Qualität deckt alle drei Shopsysteme ab. Das Shopsystem erzeugt daraus die kleineren Größen und bei Shopify auch moderne Formate.

Export	Maße	Format	Für
Master	volle Auflösung	verlustfrei, etwa TIFF oder PNG	Archiv
Shop-Upload	2.048 x 2.048 px, festes Seitenverhältnis	JPEG hohe Qualität, sRGB; PNG bei Transparenz	Shopify, Shopware, WooCommerce
Marktplatz	2.400 x 2.400 px auf Reinweiß	JPEG hohe Qualität, sRGB	Amazon, eBay, Kaufland, Otto, Google Shopping
Eigener Shop ohne Formatumwandlung	1.600 bis 2.048 px	WebP oder AVIF	WooCommerce oder Shopware ohne CDN

Empfehlung der Redaktion, Stand 10/2026.

Die Marktplatz-Spalte leitet sich aus dem Vergleich der Bildanforderungen der Marktplätze ab. Wenn Sie mit einem einzigen Export für alles arbeiten wollen, nehmen Sie die 2.400 Pixel auf Reinweiß auch für den Shop. Shopify, Shopware und WooCommerce verkraften die zusätzliche Größe problemlos, weil sie ohnehin verkleinern. Wie Sie Exportvorgaben in Lightroom oder Photoshop anlegen, erklärt die Anleitung zur Bildbearbeitung für Produktfotos.

Wie groß werden Produktbilder je Breite und Format?

Die Dateigröße wächst mit der Pixelzahl, nicht mit der Breite. Ein doppelt so breites Bild hat viermal so viele Pixel. In unserer Messung war dasselbe Foto mit 1.200 Pixeln Breite als JPEG 3,9-mal so groß wie mit 480 Pixeln.

Aufbau der Messung: Am 25.10.2026 haben wir ein KI-Titelbild dieses Magazins (Studioaufnahme mit Produkt, 1.600 x 900 Pixel, 16:9) mit Pillow 12.3 auf 480, 768 und 1.200 Pixel Breite verkleinert (Lanczos) und in jeder Breite als JPEG, WebP und AVIF gespeichert. Die 1.600-Pixel-Version ist das Original ohne Verkleinerung, nur neu kodiert. Die Qualitätsstufen entsprechen der Messung aus dem Artikel zur Bildbearbeitung, dort waren sie auf gleiche rechnerische Abweichung vom Original abgestimmt. Eine 2.048-Pixel-Stufe haben wir nicht gemessen, weil das Ausgangsbild nur 1.600 Pixel breit ist und Hochrechnen das Ergebnis verfälscht hätte.

Breite	JPEG Q80	WebP Q83	AVIF Q60	WebP gegenüber JPEG	AVIF gegenüber JPEG
480 px	19,2 KB	12,8 KB	9,7 KB	33 % kleiner	49 % kleiner
768 px	37,8 KB	22,6 KB	17,6 KB	40 % kleiner	53 % kleiner
1.200 px	74,8 KB	40,9 KB	32,7 KB	45 % kleiner	56 % kleiner
1.600 px	139,9 KB	61,7 KB	54,9 KB	nicht vergleichbar	nicht vergleichbar

Messung der Redaktion, Stand 10/2026. Bei 1.600 Pixeln wurde das JPEG-Original ohne Verkleinerung erneut als JPEG gespeichert. Das JPEG ist dadurch rechnerisch genauer als WebP und AVIF (PSNR 45,5 statt rund 42 dB), der Prozentvergleich wäre unfair.

Wir haben die Messung mit drei weiteren Titelbildern wiederholt. Zwischen 480 und 1.200 Pixeln war WebP 29 bis 50 Prozent kleiner als JPEG, AVIF 49 bis 62 Prozent. Die Werte gelten für diese Bilder und Encoder, freigestellte Produkte auf Weiß werden in der Regel deutlich kleiner als Studioszenen.

Was heißt das für Ihren Shop? Ein Smartphone, das ein Produktbild in einer 360 Pixel breiten Fläche mit doppelter Pixeldichte zeigt, braucht etwa 720 Pixel. Bekommt es das 768-Pixel-JPEG statt der 1.600-Pixel-Version, lädt es in unserer Messung 37,8 statt 139,9 KB, rund 73 Prozent weniger. Mit AVIF wären es 17,6 KB. Genau das leisten srcset und sizes.

srcset und sizes kurz erklärt

Mit srcset bieten Sie dem Browser mehrere Breiten desselben Bildes an, mit sizes sagen Sie ihm, wie breit das Bild im Layout dargestellt wird. Der Browser wählt dann die passende Datei.

Die MDN-Anleitung zu responsiven Bildern beschreibt den Ablauf: Im srcset steht jede Datei mit ihrer tatsächlichen Breite, etwa „schale-768.jpg 768w“. Im sizes-Attribut steht für jede Bedingung die Breite der Fläche, etwa „(width kleiner gleich 600px) 480px“, zuletzt ein Standardwert. Der Browser nimmt die erste zutreffende Bedingung, ignoriert alle weiteren und lädt die passende oder die nächstgrößere Datei. Ein src-Attribut bleibt als Rückfall Pflicht.

In der Praxis schreiben Sie das selten selbst:

• Shopify: image_tag erzeugt srcset automatisch, sizes setzen Sie als Parameter.
• Shopware: sw_thumbnails erzeugt srcset aus den Thumbnail-Stufen, sizes folgt ohne Angabe den Theme-Breakpoints.
• WooCommerce: WordPress ergänzt bei Bildern aus der Mediathek in der Regel automatisch srcset und sizes aus den registrierten Bildgrößen.

Prüfen Sie, ob sizes zur Darstellung passt. Ein pauschales „100vw“ bei einem Bild, das nur die halbe Bildschirmbreite füllt, lässt den Browser zu große Dateien laden.

Lazy Loading: alle Bilder außer dem Hauptbild

Laden Sie Galerie- und Katalogbilder lazy, das Hauptbild auf der Produktseite aber nicht. web.dev rät ausdrücklich davon ab, Bilder im ersten sichtbaren Bereich und besonders das LCP-Bild lazy zu laden.

Das Attribut loading=lazy verschiebt das Laden, bis das Bild in die Nähe des sichtbaren Bereichs kommt. Browser, die es nicht kennen, ignorieren es. Geben Sie zusätzlich width und height an, damit der Browser Platz reserviert und die Seite beim Nachladen nicht springt. Für das Hauptbild hilft umgekehrt fetchpriority=high. Was das für Ladezeit und Google bedeutet, steht im Abschnitt zur Ladezeit im Artikel Bild-SEO für Produktbilder.

Praxisbeispiel: Holzstuhl in drei Shopsystemen

Ein Möbelhändler verkauft einen Holzstuhl (Beispiel der Redaktion) im eigenen Shop und testet den Wechsel des Shopsystems. Das Master-Bild ist quadratisch, 2.400 x 2.400 Pixel, JPEG in hoher Qualität, sRGB.

Checkliste: Produktbilder hochladen

Prüfen Sie jedes neue Produktbild vor dem Upload mit dieser Liste.

• Festes Seitenverhältnis für alle Hauptbilder, gleicher Randabstand
• Rund 2.048 Pixel an der längsten Seite, mindestens 1.920 für Shopware und 800 für WooCommerce
• Unter den Obergrenzen, bei Shopify höchstens 25 Megapixel und unter 20 MB
• sRGB, JPEG hoher Qualität oder PNG bei Transparenz
• Beschreibender Dateiname und Alt-Text, siehe Bild-SEO-Anleitung
• Nach geänderten Größen Thumbnails neu erzeugt (Shopware, WooCommerce)
• srcset und passendes sizes im Quelltext vorhanden
• Hauptbild ohne Lazy Loading, Galerie und Katalog mit Lazy Loading
• width und height an allen Bildern gesetzt
• Zoom auf Desktop und Smartphone getestet

Fazit: ein Upload-Standard, drei Systeme

Die richtige Größe für Produktbilder ist bei Shopify, Shopware und WooCommerce kein Rätsel, wenn man die Dokumentation liest: Shopify will 2.048 Pixel, Shopware erzeugt bis 1.920, WooCommerce braucht mindestens 800. Ein quadratischer Upload mit rund 2.048 Pixeln in sRGB erfüllt alle drei. Die eigentliche Ladezeit entscheidet sich danach: bei passenden Thumbnail-Stufen, srcset und sizes, modernen Formaten und einem Hauptbild, das nicht lazy lädt. Unsere Messung zeigt, dass die richtige Breite dabei mehr spart als der Formatwechsel allein.

Ihr nächster Schritt: Legen Sie eine Exportvorgabe mit festem Seitenverhältnis und 2.048 Pixeln an und prüfen Sie eine Produktseite im Quelltext auf srcset, sizes und Lazy Loading. Danach kümmern Sie sich mit der Anleitung Bild-SEO für Produktbilder um Dateinamen, Alt-Texte und strukturierte Daten.