Das Wichtigste in 30 Sekunden

  • WooCommerce kennt drei Bildtypen: Single Product (Standard 600 px, unkroppt/ohne Zuschnitt), Catalog Image (Standard 300 px, quadratisch) und Gallery Thumbnail (Standard 100 × 100 px). Diese Werte stellen Sie im Customizer ein (Darstellung > Anpassen > WooCommerce > Produktbilder).
  • Laden Sie Quellbilder mit mindestens 800 × 800 Pixeln hoch, besser 1200 × 1200 px. WooCommerce skaliert von oben nach unten, nicht umgekehrt.
  • WebP reduziert die Dateigröße gegenüber JPEG im Schnitt um 25 bis 35 Prozent; alle modernen Browser unterstützen das Format. WordPress wandelt JPEGs aber nicht von selbst in WebP um, dafür laden Sie WebP direkt hoch oder nutzen ein Konvertier-Plugin.
  • Zoom, Lightbox und einheitlicher Bildhintergrund sind keine Extras, sondern direkte Kaufentscheidungs-Faktoren. Schlechte Produktbilder sind einer der häufigsten Gründe für Warenkorbabbrüche.

Kunden können ein Produkt nicht anfassen oder drehen. Das Foto ist alles, was sie vom Produkt haben. Der häufigste Fehler ist dabei nicht ein schlechtes einzelnes Bild, sondern das unruhige Raster: Ein Shop mit durchweg guten Fotos kann unprofessionell wirken, wenn das erste Galeriebild mal Freisteller, mal Lifestyle ist. Dazu kommt die technische Seite. Unsere eigene Stichprobe von 102 deutschen Onlineshops zeigt, dass fast jeder zweite Produktbilder noch ohne das einfachste Format-Upgrade ausliefert. Dieser Ratgeber zeigt, welche Einstellungen sinnvoll sind, wie Sie Bilder für Tempo optimieren und woran es liegt, wenn gute Fotos trotzdem Käufe kosten.

Die drei Bildtypen in WooCommerce

Worum es geht: WooCommerce unterscheidet drei Bildtypen mit unterschiedlicher Funktion und Standardgröße. Welches Bild wo erscheint, ist festgelegt. Die Dimensionen können Sie im Customizer einstellen.

WooCommerce registriert drei Image Sizes, die an verschiedenen Stellen im Shop eingesetzt werden:

Single Product Image (woocommerce_single). Das ist das große Hauptbild auf der Produktdetailseite, das der Besucher als Erstes sieht. Der Standardwert ist 600 Pixel Breite, unkroppt. WooCommerce behält also das Seitenverhältnis des Originals. Bei Zoom ist dieses Bild die Quelle für die vergrößerte Darstellung, weshalb es größer hochgeladen sein sollte als die Anzeigegröße.

Catalog Image (woocommerce_thumbnail). Dieses Bild erscheint in der Shop-Übersicht, in Kategorieseiten, bei verwandten Produkten und überall, wo Produktkarten nebeneinander stehen. Standard sind 300 Pixel Breite, quadratisch zugeschnitten. Die quadratische Ausrichtung sorgt dafür, dass Produktkarten eine einheitliche Höhe haben und das Raster nicht auseinanderfällt.

Gallery Thumbnail (woocommerce_gallery_thumbnail). Die kleinen Vorschaubilder der Bildergalerie unterhalb des Hauptbilds sowie Bilder im Warenkorb und in Widgets. Standard: 100 × 100 Pixel, quadratisch zugeschnitten.

Das Wichtigste dabei: WooCommerce skaliert immer vom Original nach unten. Hochgeladen werden muss ein Bild, das größer ist als die größte benötigte Ausgabegröße. Wer ein 300-Pixel-Bild hochlädt und dann die Catalog-Größe auf 400 Pixel erhöht, bekommt unscharfe Bilder. WooCommerce kann aus kleinen Quelldaten keine Details erfinden.

Ein großes Quellbild, drei Ausgabegrößen in WooCommerceWooCommerce erzeugt aus einem hochgeladenen Quellbild drei kleinere Größen: das Single Product Image mit 600 Pixel als Hauptbild und Zoom-Quelle, das Catalog Image mit 300 Pixel fürs Shop-Raster und das Gallery Thumbnail mit 100 Pixel für die Vorschau. Skaliert wird nur nach unten, deshalb das Quellbild mit mindestens 1200 Pixel hochladen.Quellbild ≥ 1200 px, WooCommerce skaliert nur nach untenSingle ProductCatalogGallery600300100Pixel breitPixel breitPixel breitHauptbild + ZoomShop-RasterVorschau
Aus einem Quellbild erzeugt WooCommerce drei feste Ausgabegrößen. Weil nur nach unten skaliert wird, entscheidet die Größe des Originals über die Schärfe, gerade beim Zoom. Eigene Darstellung nach der WooCommerce-Bilddokumentation.

Empfohlene Bildgrößen und Seitenverhältnisse

Bildtyp Standard (WooCommerce) Empfehlung (Quelle) Seitenverhältnis
Single Product Image 600 px Breite, unkroppt min. 800 px, besser 1200 px frei, 1:1 bewährt
Catalog Image 300 px, quadratisch 600 bis 800 px, quadratisch 1:1
Gallery Thumbnail 100 × 100 px 150 bis 200 px 1:1
Hochgeladenes Quellbild keine feste Vorgabe min. 800 × 800 px, besser 1200 × 1200 px 1:1 oder größer

Die offiziellen WooCommerce-Docs nennen 800 × 800 Pixel als Mindesteingabe für Quellbilder. Für Produkte mit feinen Details (Schmuck, Textilien, technische Bauteile) empfehlen sie noch größere Originale. Das hat einen einfachen Grund: Zoom braucht Pixel. Wenn der Besucher in ein 600-Pixel-Bild hineinzoomt, muss das Original größer sein, sonst sieht der vergrößerte Ausschnitt unscharf aus.

Beim Seitenverhältnis hat sich 1:1 (Quadrat) als de-facto-Standard im E-Commerce durchgesetzt, weil Produktraster damit konsistent aussehen. Wer aus gestalterischen Gründen andere Verhältnisse (4:3, 3:2) bevorzugt, kann das im Customizer konfigurieren, muss dann aber konsequent alle Produktbilder im selben Verhältnis aufnehmen oder zuschneiden.

Hochformat (2:3) eignet sich für Mode und Accessoires und hat auf Mobile-Displays mehr Wirkung, weil die Bilder den vertikalen Bildschirm besser füllen. Querformat läuft im Raster fast immer problematisch und sollte nur eingesetzt werden, wenn das Theme damit explizit umgehen kann.

Customizer-Einstellungen Schritt für Schritt

Seit WooCommerce 3.3 sitzen die Produktbild-Einstellungen im WordPress-Customizer: Darstellung > Anpassen > WooCommerce > Produktbilder. Dort stehen drei Optionen für Catalog Images und Gallery Thumbnails:

1:1 (Quadrat). Alle Bilder auf ein Quadrat zugeschnitten, die sichere Wahl für einheitliche Produktraster.

Benutzerdefiniert. Eigenes Seitenverhältnis (z. B. 4:3 oder 3:2). Das Theme muss das unterstützen, sonst entstehen abgeschnittene oder verzerrte Bilder.

Unkroppt. Bilder behalten ihr Originalformat. Funktioniert nur zuverlässig, wenn alle Produkte dasselbe Seitenverhältnis haben, sonst entstehen unterschiedlich hohe Karten im Raster.

Das Hauptproduktbild wird von diesen Einstellungen nicht beeinflusst. Nach jeder Größenänderung müssen vorhandene Bilder mit dem Tool Regenerate Shop Thumbnails neu berechnet werden.

Wie weit ist WebP bei deutschen Shops wirklich angekommen? Eine eigene Stichprobe gibt die Antwort.

Eigene Erhebung · ihp media

58 %

der geprüften Shops liefern Produktbilder sichtbar im modernen WebP-Format. Lazy-Loading nutzen schon 70 Prozent.

Wo der Hebel liegt: Lazy-Loading ist breit angekommen, das deutlich kleinere WebP-Format erst bei gut der Hälfte. Wer noch reines JPEG ausliefert, verschenkt den einfachsten Geschwindigkeitsgewinn, den ein Shop hat.

Methodik: Eigene Erhebung über 102 deutsche Onlineshops, geprüft auf sichtbare WebP-Einbindung und natives Lazy-Loading im Quelltext. WebP-Zahl ist eine Untergrenze, Server-Content-Negotiation nicht erfasst. Stand: Juni 2026. Keine amtliche Grundgesamtheit.

Moderne Formate: WebP, Dateigröße und Ladezeit

Kurz gesagt: WebP-Bilder sind im Schnitt 25 bis 35 Prozent kleiner als vergleichbare JPEGs. WordPress verarbeitet und liefert WebP seit Version 5.8, erzeugt es aber nicht automatisch aus Ihren JPEGs. Für die Umwandlung laden Sie WebP direkt hoch oder nutzen ein Plugin.

Ein Shop mit 50 Produkten hat schnell 200 bis 400 Bilder in verschiedenen Größen auf dem Server. Bei JPEG-Originalen ohne Optimierung entstehen leicht mehrere Megabyte pro Seitenaufruf. Das trifft die Ladezeit, den LCP (Largest Contentful Paint, die Zeit, bis das wichtigste sichtbare Element geladen ist, ein direktes Google-Ranking-Signal) und damit die Sichtbarkeit.

WebP löst das verlässlich. Laut Google web.dev sind WebP-Bilder im Schnitt 25 bis 35 Prozent kleiner als JPEGs bei vergleichbarer Qualität. Bei PNG-Ersatz (Freisteller mit Transparenz) fällt die Einsparung noch deutlicher aus. Alle modernen Browser unterstützen WebP, Safari seit Version 14 (2020).

Wichtig zur WordPress-Realität: Die automatische Umwandlung von JPEG zu WebP war für WordPress 6.1 geplant, wurde aber vor dem Release wieder herausgenommen. WordPress liefert hochgeladene WebP-Dateien korrekt aus (seit Version 5.8), erzeugt WebP aber nicht von selbst aus Ihren JPEGs. Zwei saubere Wege: die Bilder gleich als WebP exportieren und hochladen, dann erstellt WordPress die kleineren WebP-Größen mit, oder die automatische Umwandlung per Plugin nachrüsten, etwa mit dem offiziellen Modern Image Formats (vom WordPress-Performance-Team) oder WebP Converter for Media.

Originale von 500 KB bis 1 MB reichen für die meisten Shop-Zwecke. Mehr zu Exporteinstellungen und verlustfreier Kompression: Bilder fürs Web optimieren ohne sichtbaren Qualitätsverlust.

Bild-SEO: Alt-Texte und Dateinamen

Suchmaschinen sehen keine Pixel, sie lesen Text. Für Produktbilder zählen zwei Textelemente.

Dateinamen. Benennen Sie Bilder vor dem Upload sprechend: leder-geldbeutel-schwarz-herren.webp statt IMG_4872.jpg. Trennzeichen sind Bindestriche, Umlaute und Sonderzeichen weglassen.

Alt-Texte. Der Alt-Text ist Pflicht für Barrierefreiheit (Screenreader lesen ihn vor) und SEO-Signal. Konkret und ohne Keyword-Stuffing: „Schwarzes Lederportemonnaie für Herren, Innenansicht mit Kartenfächern“ ist gut. „Geldbeutel kaufen günstig Leder“ ist keiner. In WooCommerce setzen Sie den Alt-Text beim Upload in die Mediathek oder direkt im Produkteditor. Für große Bestände hilft Media Library Assistant bei der Bulk-Bearbeitung.

Für WooCommerce-SEO insgesamt: Produkttitel, Meta-Descriptions, strukturierte Daten: WooCommerce SEO.

Zoom, Galerie und Lightbox

WooCommerce bringt drei Front-End-Funktionen für Produktbilder mit, die ohne Plugin-Kauf verfügbar sind:

Zoom. Beim Hovern über das Hauptbild vergrößert sich der Ausschnitt. Damit das Ergebnis scharf ist, muss das hochgeladene Originalbild größer sein als die angezeigte Single-Product-Breite. Bei einer angezeigten Breite von 600 Pixeln sollte das Original mindestens 1200 Pixel breit sein, damit der Zoom 2-fach vergrößern kann, ohne pixelig zu werden. Den Zoom aktivieren oder deaktivieren Sie im Customizer unter Darstellung > Anpassen > WooCommerce > Produktbilder.

Lightbox. Klickt der Besucher auf das Hauptbild, öffnet sich eine Lightbox mit dunklem Hintergrund und einer Slideshow-Funktion durch alle Galerie-Bilder. Auch das ist ein WooCommerce-Bordmittel. Themes können die Standard-Lightbox durch eigene ersetzen. Viele Premium-Themes machen das.

Galerie-Thumbnails. Unterhalb oder neben dem Hauptbild zeigt WooCommerce automatisch die Gallery Thumbnails. Per Drag-and-Drop im Produkteditor legen Sie die Reihenfolge der Galerie-Bilder fest. Diese Reihenfolge bestimmt nur die Anordnung der zusätzlichen Bilder auf der Einzelproduktseite. Das Hauptbild auf der Kategorieseite wird dagegen durch das separat in der Seitenleiste des Produkteditors gesetzte Produktbild (Featured Image) festgelegt, nicht durch die Galerie-Reihenfolge.

Reicht das Standard-System nicht aus, etwa weil Sie 360-Grad-Ansichten, Video-Einbettung oder Produktkonfiguratoren brauchen, gibt es spezialisierte Plugins. Wer Produktvideos direkt in die Galerie einbetten will, findet dafür Erweiterungen im Marketplace.

Variantenbilder: ein Bild je Farbe oder Größe

Im Kern: WooCommerce kann pro Variante ein eigenes Hauptbild zeigen, das beim Auswählen umschaltet. Eine ganze Bildergalerie je Variante kennt der Core aber nicht, dafür braucht es ein Plugin.

Bei variablen Produkten (Farben, Größen) erwartet der Kunde, dass sich das Bild ändert, sobald er „Rot“ wählt. Das beherrscht WooCommerce von Haus aus: Im Tab Variationen hat jede einzelne Variation ein eigenes Bildfeld. Das dort hinterlegte Bild ersetzt beim Auswählen der Variante das Hauptbild auf der Produktseite.

Die Grenze des Cores liegt bei genau diesem einen Bild je Variante. Die zusätzlichen Galeriebilder (Rückseite, Detail) bleiben für alle Varianten gleich und wechseln nicht mit. Wer pro Variante eine vollständige Galerie braucht, etwa fünf Ansichten je Farbe, nutzt eine Erweiterung wie WooCommerce Additional Variation Images (eigene Bildergalerie pro Variante) oder eine vergleichbare freie Lösung aus dem Plugin-Verzeichnis. Das ist der häufigste Grund hinter der Frage „warum ändert sich meine Galerie nicht, wenn ich die Farbe wechsle“.

Freisteller oder Lifestyle: was wann funktioniert

Diese Frage taucht in fast jedem Gespräch über Produktfotografie auf, und die Antwort ist: beides hat seinen Platz, aber nicht gleichzeitig und nicht gemischt ohne System.

Freisteller (Produkt auf weißem oder neutralem Hintergrund) eignen sich als erstes Bild in der Galerie, weil sie im Produktraster für einen konsistenten, aufgeräumten Look sorgen. Varianten lassen sich damit einfach vergleichen. Für technische Produkte, Kleidung im Flatlay oder Verbrauchsgüter ist der Freisteller oft die klarste Wahl.

Lifestyle-Bilder (Produkt in einem Nutzungskontext: getragen, verwendet, in der Küche auf dem Herd) transportieren Emotion und helfen dem Käufer, sich das Produkt im eigenen Leben vorzustellen. Sie eignen sich als zweites oder drittes Bild in der Galerie, wenn das erste bereits die technische Klarheit geliefert hat.

Das Mischproblem: Wenn ein Shop Freisteller und Lifestyle-Bilder als erstes Produktbild willkürlich kombiniert, sieht das Produktraster unruhig aus. Kunden nehmen das als mangelnde Sorgfalt wahr. Die Regel lautet: Erstes Bild immer gleich behandeln (alle Freisteller oder alle Lifestyle), dann kann ab dem zweiten Bild variiert werden.

Für die Bildsprache insgesamt, also wie Ton, Farbraum und Belichtung konsistent bleiben, ist die Frage der Markenwirkung relevant. Dazu passt die Einordnung im Ratgeber Produktbeschreibungen, die verkaufen und von KI gefunden werden.

Mobile Darstellung

WooCommerce setzt das Hauptproduktbild in den meisten Themes als 100 Prozent der Spaltenbreite auf Mobile. Ein 600-Pixel-Bild wird auf einem 375-Pixel-Display entsprechend skaliert, das sieht scharf aus, solange das Original die 600 Pixel liefert. Laden Sie zu schmale Bilder hoch, zeigt der Shop auf Mobile sofort Qualitätsverluste.

Drei Punkte für Mobile-Produktseiten: Das erste Bild sollte das wichtigste Produktdetail zeigen, weil Mobile-Nutzer nach dem ersten Bild entscheiden, ob sie weiterscrollen. Galerie-Thumbnails sind auf kleinen Bildschirmen oft zu schmal zum Tippen. Themes mit horizontalem Wischen durch die Galerie helfen. Lazy Loading für Galerie-Bilder setzt WordPress seit Version 5.5 automatisch ein, das schont mobile Verbindungen. Wichtig fürs Tempo: Das erste, große Produktbild lädt WordPress seit Version 5.9 bewusst vorrangig statt verzögert und seit 6.3 mit hoher Ladepriorität. Das verbessert den LCP. Überschreiben Sie dieses Verhalten nicht von Hand, sonst wird die Seite langsamer.

Wie Bildformate und responsives Serving die Ladezeit auf mobilen Verbindungen senken, zeigt der Ratgeber WebP und AVIF: Moderne Bildformate für schnelle Websites.

Was gute Produktbilder für die Conversion leisten

Produktbilder sind kein Designelement, sondern ein Verkaufswerkzeug. Schlechte Bilder gehören zu den häufigsten Gründen für Warenkorbabbrüche: Wer ein Produkt nicht beurteilen kann, kauft es nicht.

Aus unserer Erfahrung aus mehreren übernommenen Shops ist dabei nicht die einzelne Bildqualität der häufigste Fehler, sondern das uneinheitliche Raster. Ein Shop kann durchweg gute Fotos haben und trotzdem unprofessionell wirken, wenn das erste Galeriebild mal Freisteller, mal Lifestyle ist und die Seitenverhältnisse springen. Genau da kosten gute Fotos Käufe: Das Gesamtbild wirkt unruhig und lässt Sorgfalt vermissen, obwohl jedes Einzelbild für sich in Ordnung ist. Der schnellste Hebel ist deshalb Konsistenz, nicht die teurere Kamera. Wie das in der Praxis aussieht, zeigt das Beispiel weiter unten.

Vertrauen aufbauen. Professionell beleuchtete Bilder wirken hochwertiger als Schnellaufnahmen. Typisch ist, dass eine ehrliche, detailreiche Bildstrecke die Retourenquote senkt, weil die Erwartung beim Kauf besser zur gelieferten Ware passt. Konkrete Prozentzahlen nennen wir bewusst nicht, weil solche Werte stark shopabhängig und kaum sauber isolierbar sind.

Fragen vorwegnehmen. Mehrere Ansichten beantworten Fragen, die der Käufer sonst per E-Mail stellt: Wie sieht die Rückseite aus? Wie groß ist der Anschluss? Was steht auf dem Etikett? Jede Frage, die das Bild beantwortet, ist eine Kaufbarriere weniger.

Rückgaben senken. Zeigt das Bild ehrlich Farbe, Größe und Zustand, deckt sich die Erwartung mit der Lieferung. Enttäuschte Erwartungen sind ein Haupttreiber von Retouren.

Wo steht Ihr Shop? Acht Punkte, zwei Minuten

Ankreuzen, was schon erfüllt ist, technisch wie gestalterisch. Der Check zeigt als Ampel, wo Sie stehen, und markiert die zwei kritischen Lücken, die am stärksten über den professionellen Eindruck entscheiden.

Ankreuzen, was in Ihrem Shop heute schon erfüllt ist

Für die technische Seite der Shop-Performance: WooCommerce beschleunigen: die wirksamsten Performance-Hebel. Wer einen neuen Onlineshop plant oder seinen Shop grundlegend überarbeiten will, findet einen Einstieg auf unserer Leistungsseite Websites & Onlineshops.

Wann Bildoptimierungs-Plugins helfen

WooCommerce-Bordmittel reichen für viele Shops aus. Plugins sind in drei Situationen sinnvoll:

  • Automatische WebP-Umwandlung nachrüsten: Da WordPress JPEGs nicht von selbst in WebP umwandelt, übernimmt das ein Plugin, das offizielle Modern Image Formats, WebP Converter for Media (kostenlos) oder ShortPixel; sie liefern WebP per <picture>-Element mit JPEG-Fallback.
  • Große Bildbestände komprimieren: Bei Shops mit hunderten unkomprimierten Quellbildern helfen ShortPixel oder Imagify für eine einmalige Bulk-Optimierung.
  • Uneinheitliche Lieferantenbilder vereinheitlichen: Smart Image Resize setzt Padding auf quadratische Flächen, ohne zu beschneiden.

Wer seine Quellbilder sorgfältig vorbereitet und gleich als WebP exportiert, braucht für die Auslieferung kein zusätzliches Bild-Plugin. Geht es nur darum, einen vorhandenen Bestand aus JPEGs umzuwandeln, ist ein Konvertier-Plugin der einfachste Weg.

Für Fortgeschrittene · überspringbar

Profi-Block: Image Sizes für Theme-Entwickler

Dieser Abschnitt richtet sich an Entwickler. Laien können ihn überspringen.

WooCommerce registriert die drei Bildgrößen intern. Ein Theme überschreibt die Standardwerte über add_theme_support('woocommerce', ...):

add_theme_support( 'woocommerce', array(
    'thumbnail_image_width'         => 300,
    'gallery_thumbnail_image_width' => 100,
    'single_image_width'            => 600,
) );

Für feingranulare Kontrolle stehen Filter bereit. Beispiel, Gallery Thumbnails unkroppt:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
    return array( 'width' => 150, 'height' => 150, 'crop' => 0 );
} );

Die Template-Filter steuern, welche Größe wo ausgespielt wird:

Filter Standard Einsatz
single_product_archive_thumbnail_size woocommerce_thumbnail Shop-/Kategorieseite
woocommerce_gallery_image_size woocommerce_single Galerie (Hauptansicht)
woocommerce_gallery_full_size full Lightbox/Vollansicht
Direkt umsetzbar: WooCommerce-Bildgrößen als mu-plugin

Beide Snippets aus dem Profi-Block als fertige, drop-in-ready Datei. Speichern als /wp-content/mu-plugins/ihp-wc-image-sizes.php, kein Aktivieren nötig.

<?php
/**
 * Plugin Name: IHP WooCommerce Image Sizes
 * Description: Registriert benutzerdefinierte Bildgrößen für WooCommerce und steuert den Galerie-Thumbnail-Zuschnitt.
 * Version: 1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Schritt 1: Bildgrößen per Theme-Support setzen.
 * Werte in Pixeln, an das eigene Layout anpassen.
 */
add_action( 'after_setup_theme', function() {
    add_theme_support( 'woocommerce', array(
        'thumbnail_image_width'         => 600,  // Catalog Image (Shop-Übersicht)
        'gallery_thumbnail_image_width' => 150,  // Gallery Thumbnails
        'single_image_width'            => 1200, // Single Product (Zoom-Quelle)
    ) );
} );

/**
 * Schritt 2 (optional): Gallery Thumbnails unkroppt ausgeben.
 * Entfernen, wenn der quadratische Zuschnitt gewünscht ist.
 */
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
    return array( 'width' => 150, 'height' => 150, 'crop' => 0 );
} );

Nach dem Einrichten des mu-plugins unter Darstellung > Anpassen > WooCommerce > Produktbilder die Werte prüfen und anschließend mit dem Plugin Regenerate Shop Thumbnails den bestehenden Bildbestand neu berechnen.

Frei nutzbar. Wer die Anpassung für ein bestehendes Theme oder einen laufenden Shop lieber abgeben möchte: wir übernehmen das.

Aus der Praxis

Nehmen wir einen übernommenen Modeshop mit rund 180 Produkten. Die Quellbilder liegen als JPEG vor, teils 4 bis 6 MB groß, mit unterschiedlichen Seitenverhältnissen: Freisteller im Format 1:1 gemischt mit Lifestyle-Fotos im 4:3-Format. Das Ergebnis ist ein Produktraster, das auf Desktop chaotisch wirkt und auf Mobile mit deutlich sichtbaren Zuschnitt-Artefakten arbeitet.

Der saubere Weg führt über drei Schritte:

  1. Alle Quellbilder aus der Mediathek per Bulk-Export entnehmen und mit einem Tool wie ShortPixel auf einen einheitlichen WebP-Bestand komprimieren, ohne sichtbaren Qualitätsverlust, bei einer Ausgabegröße von 1200 × 1200 Pixel.
  2. Im Customizer auf quadratischen Zuschnitt umstellen und alle Thumbnails neu generieren.
  3. Die Galerie-Reihenfolge überarbeiten: Freisteller als erstes Bild, Lifestyle ab Position zwei.

Das Ergebnis ist ein konsistentes Raster und deutlich schnellere Ladezeiten. Wo die Produktseiten vorher bei 3 bis 4 Sekunden LCP auf Mobile lagen, sind danach unter 2 Sekunden realistisch. Dazu kommen weniger Supportanfragen zu Produktdetails, weil die Galerie jetzt alle wichtigen Ansichten liefert. Konkrete Conversion-Zahlen lassen sich dabei kaum sauber isolieren, weil in solchen Phasen meist parallel am Checkout gearbeitet wird. Was bleibt, ist ein Shop, der auf den ersten Blick professioneller wirkt und schneller lädt, ohne ein einziges neues Foto, allein durch Konsistenz und Format.

Checkliste Produktbilder

  • Quellbilder mindestens 800 × 800 Pixel (besser 1200 × 1200 px) hochgeladen?
  • Seitenverhältnis aller ersten Galeriebilder einheitlich (alle 1:1 oder alle gleich)?
  • Customizer-Einstellung für Catalog Images und Thumbnails gesetzt und mit dem Plugin Regenerate Shop Thumbnails neu berechnet?
  • WebP-Auslieferung sichergestellt (Bilder als WebP hochgeladen oder Konvertier-Plugin aktiv)?
  • Dateinamen vor dem Upload sprechend und ohne Sonderzeichen/Umlaute?
  • Alt-Text für jedes Produktbild und jedes Galerie-Bild gesetzt?
  • Zoom aktiviert und Quellbilder groß genug für scharfen Zoom-Ausschnitt?
  • Galerie mit mehreren Ansichten: Freisteller (weißer Hintergrund), Rückseite, Detail, ggf. Lifestyle?
  • Mobile Darstellung geprüft: erstes Bild zeigt das wichtigste Produktdetail?
  • Bei uneinheitlichen Lieferantenbildern: Smart Image Resize oder manuelle Aufbereitung eingeplant?

Mehrere Punkte noch offen? Wir bereiten Produktbilder einheitlich auf und richten Größen, WebP und Galerie sauber ein: Websites & Onlineshops.

Das Wichtigste zum Mitnehmen

  • WooCommerce kennt drei Bildtypen mit festgelegten Standardgrößen, die Einstellungen dafür sitzen im Customizer unter Darstellung > Anpassen > WooCommerce > Produktbilder. Nach Änderungen Thumbnails neu generieren.
  • Laden Sie Quellbilder immer größer hoch als die größte Ausgabegröße. Die offizielle Empfehlung lautet mindestens 800 × 800 Pixel, besser 1200 × 1200 Pixel.
  • WebP spart gegenüber JPEG im Schnitt 25 bis 35 Prozent Dateigröße. WordPress erzeugt es aber nicht automatisch aus JPEG, also WebP direkt hochladen oder per Plugin umwandeln.
  • Einheitlicher Bildhintergrund und eine konsequente Galerie-Struktur (Freisteller zuerst, Lifestyle danach) sind die einfachsten Hebel für professionellere Produktpräsentation.

Häufige Fragen

Welche Bildgröße empfiehlt WooCommerce für Produktbilder?

WooCommerce empfiehlt als Mindestgröße für Quellbilder 800 × 800 Pixel, für detailreiche Produkte mehr. Die drei generierten Bildtypen haben Standardbreiten von 600 px (Single), 300 px (Catalog) und 100 px (Gallery Thumbnail), die Sie im Customizer anpassen können.

Muss ich Produktbilder als WebP hochladen?

Nicht zwingend, aber WordPress wandelt JPEGs auch nicht von allein in WebP um. Diese automatische Umwandlung war für WordPress 6.1 geplant und wurde vor dem Release zurückgezogen. Sie haben zwei Wege: die Bilder gleich als WebP exportieren und hochladen, oder ein Plugin wie Modern Image Formats die Umwandlung automatisch erledigen lassen.

Warum werden meine Produktbilder nach einer Größenänderung unscharf?

Nach jeder Änderung der Bildgrößen im Customizer müssen vorhandene Bilder neu berechnet werden. Das Tool „Regenerate Shop Thumbnails“ erledigt das für den bestehenden Bildbestand. Ohne diesen Schritt zeigt der Shop die alten, nicht neu skalierten Varianten.

Was ist besser: Freisteller oder Lifestyle-Bilder?

Beide ergänzen sich. Freisteller eignen sich als erstes Bild für ein einheitliches Produktraster, Lifestyle-Bilder ab der zweiten Position für den Nutzungskontext. Wichtig ist Konsistenz: Das erste Bild aller Produkte sollte vom selben Typ sein.

Brauche ich ein Plugin für Zoom in WooCommerce?

Nein. Zoom und Lightbox sind WooCommerce-Bordmittel und werden im Customizer aktiviert. Für 360-Grad-Ansichten oder variationsspezifische Bildergalerien (also eine eigene Galerie je gewählter Farbe oder Größe) brauchen Sie eine Erweiterung.

Warum wechselt meine Produktgalerie nicht, wenn ich eine Farbe auswähle?

WooCommerce tauscht beim Auswählen einer Variante nur das eine Hauptbild aus, das Sie im Tab Variationen je Variante hinterlegt haben. Die zusätzlichen Galeriebilder bleiben im Core für alle Varianten gleich. Wer pro Variante eine komplette Galerie zeigen will, braucht eine Erweiterung wie WooCommerce Additional Variation Images.

Wie viele Bilder pro Produkt sind sinnvoll?

Drei bis fünf als Richtwert: Hauptansicht, Rückseite oder zweite Ansicht, mindestens ein Detailbild und bei körperbezogenen Produkten ein Anwendungsbild. Für Varianten (Farben, Größen) können es deutlich mehr sein.

Quellen und weiterführende Informationen: WooCommerce: Adding Product Images and Galleries; WooCommerce Developer Docs: Image Sizes for Theme Developers; Google web.dev: Serve images in modern formats (WebP). Stand: Juni 2026. Dieser Artikel gibt allgemeine technische Hinweise und ersetzt keine individuelle Konfigurationsberatung für Ihren Shop.