Produktbilder optimieren: So verbessern Sie Ladezeit, SEO und Conversion in WooCommerce, Shopify und Webflow

Wer Produktbilder im Onlineshop optimieren will, muss drei Baustellen gemeinsam angehen: Ladezeit (WebP oder AVIF, passende Abmessungen, Hauptbild mit Vorrang laden), SEO (sprechende Dateinamen, hilfreiche Alt-Texte, indexierbare img-Elemente) und Conversion (scharfe Fotos, Zoom, mehrere Perspektiven). Richtig umgesetzt verkaufen dieselben Bilder besser, ohne den Shop auszubremsen.

Auf der Produktdetailseite ist das Hauptbild meist das Erste, was Kundinnen und Kunden ansehen, und zugleich die größte Datei, die der Browser lädt. Sehr oft ist es auch das LCP-Element (Largest Contentful Paint), an dem Google die Ladegeschwindigkeit misst. Eine schlecht vorbereitete Galerie kostet deshalb Umsatz und Rankings.

Dieser Leitfaden richtet sich an Shopbetreiber, E-Commerce-Verantwortliche und Start-ups mit WooCommerce, Shopify oder Webflow. Er zeigt, was Sie in welcher Reihenfolge verbessern und wie Sie sich rechtzeitig auf die neue Mindestbildgröße im Google Merchant Center vorbereiten.

Warum Produktbilder so stark über den Kauf entscheiden

Im Onlineshop kann niemand das Produkt anfassen oder anprobieren, das Bild übernimmt diese Rolle. Das UX-Forschungsinstitut Baymard hat beobachtet, dass 56 % der Testpersonen auf einer Produktseite zuerst die Bilder erkundeten, noch vor der Beschreibung. Laut derselben Untersuchung ergänzen 52 % der analysierten Shops die Bilder ihrer Bestseller nicht um erklärende Texte oder Grafiken. Damit verschenken sie die Chance, Eigenschaften wie Wasserdichtigkeit oder Maße auf einen Blick zu zeigen.

Eine gute Produktgalerie beantwortet die Fragen, die man im Laden stellen würde:

• Wie sieht das Produkt von allen Seiten aus? Vorderseite, Rückseite, Profil, Detailaufnahmen von Material und Verarbeitung.
• Wie groß ist es wirklich? Ein Bild im Größenvergleich oder am Model.
• Wie wird es genutzt? Ein Anwendungsbild oder ein kurzes Video.
• Welche Variante bekomme ich? Ein Foto pro Farbe, verknüpft mit der Variantenauswahl.

Die Kunst besteht darin, diese Bilder zu zeigen, ohne die Seite auf dem Smartphone auszubremsen. Wie Sie Bildoptimierung in eine strukturierte Testmethode einbetten, lesen Sie in unserem Leitfaden Conversion Rate im Onlineshop erhöhen.

Google Merchant Center: mindestens 500 x 500 Pixel ab dem 31. Januar 2027

Wer Produkte über Google Shopping oder kostenlose Produkteinträge ausspielt, sollte sich ein Datum notieren. Laut der Google-Dokumentation zum Attribut image_link müssen Produktbilder ab dem 31. Januar 2027 für alle Produkte mindestens 500 x 500 Pixel groß sein. Wie Search Engine Roundtable berichtet, zeigen betroffene Konten bereits Warnungen wie „Bild zu klein“. Google empfiehlt Bilder ab 1.500 x 1.500 Pixeln, damit sie in allen Anzeigenformaten gut funktionieren.

Dieselbe Dokumentation nennt auch, was auf dem Hauptbild verboten ist: Werbetext, Wasserzeichen, Rahmen, Platzhalter und künstlich hochskalierte Bilder. Eingebrannte „-20 %“-Badges haben im Feed also nichts verloren.

Jetzt erledigen: Exportieren Sie Ihren Produktfeed, markieren Sie alle Bilder unter 500 Pixeln Kantenlänge (oft alte Importe oder versehentlich hochgeladene Thumbnails) und ersetzen Sie sie durch hochauflösende Originale. Bei mehreren Tausend Artikeln geht das per Skript schneller als von Hand.

Das richtige Bildformat und die passende Größe

Google Bilder unterstützt laut den Best Practices für Bilder die Formate BMP, GIF, JPEG, PNG, WebP, SVG und AVIF. Für einen Onlineshop reichen vier davon:

Wie groß sollte ein Produktfoto sein?

Beginnen Sie mit einem quadratischen Original von mindestens 1.500 Pixeln, auf neutralem Hintergrund und im gesamten Sortiment einheitlich zugeschnitten. Dieses Original dient für den Zoom und den Merchant-Center-Feed. Das Shopsystem erzeugt daraus die kleineren Varianten für Thumbnails, Kategorieraster und Warenkorb. Liefern Sie niemals das 1.500-Pixel-Original in ein 300 Pixel breites Thumbnail aus: Dafür gibt es die Attribute srcset und sizes, mit denen der Browser die passende Datei wählt.

Einheitliche Seitenverhältnisse verhindern Layoutverschiebungen

Nutzen Sie pro Kategorie ein Seitenverhältnis (etwa 1:1 oder 4:5) und geben Sie im Code immer width und height an. So reserviert der Browser den Platz, bevor das Bild geladen ist, und Ihr CLS-Wert (visuelle Stabilität) bleibt gut. Ein Raster mit unterschiedlich geformten Produktbildern springt beim Laden und wirkt weniger vertrauenswürdig.

Produktbilder und Ladezeit: den LCP schützen, ohne die Galerie zu kürzen

Eine Regel ist wichtiger als alle anderen: Das Hauptbild lädt zuerst, alles andere darf warten.

• Kein Lazy Loading für das Hauptbild. Verzögertes Laden ist ideal für Galerie-Thumbnails, ähnliche Produkte und alles unterhalb des sichtbaren Bereichs, bremst aber das Bild aus, das sofort zu sehen ist. Eine Auswertung auf web.dev ergab für WordPress-Seiten mit Lazy Loading einen medianen LCP von 3.768 ms gegenüber 3.495 ms ohne, also rund 8 % langsamer (eine Korrelation, kein Kausalbeweis).
• Setzen Sie fetchpriority="high" auf das Hauptproduktbild oder das Hero-Bild der Startseite. WordPress erledigt das seit Version 6.3 automatisch, was den LCP laut WordPress-Performance-Team typischerweise um 5 bis 10 % verbessert.
• Laden Sie die ersten Bilder im Kategorieraster sofort (zum Beispiel die ersten vier) und den Rest verzögert.
• Vorsicht bei Slidern. Ein Karussell mit fünf Bannern lädt oft fünf große Bilder für eine einzige Ansicht. Ein gut gewähltes statisches Bild ist schneller und konvertiert häufig besser.

Sie nutzen WooCommerce? Unser Leitfaden WooCommerce schneller machen erklärt die übrigen Hebel wie Caching, Skripte und Hosting.

Bilder-SEO im Onlineshop: gefunden werden in Google Bilder und Shopping

img-Elemente statt CSS-Hintergrundbilder

Google stellt klar: CSS-Bilder werden nicht indexiert. Produktfotos gehören in <img>-Elemente (gern innerhalb von <picture>) mit einem src als Fallback. Manche Designthemes zeigen Produkte als CSS-Hintergrund an. Das sollte jedes Audit prüfen.

Sprechende Dateinamen

Aus IMG_4521.jpg wird umhaengetasche-leder-cognac.webp. Der Dateiname ist nur ein Nebensignal, kostet aber nichts, sobald er fester Teil Ihres Upload-Prozesses ist.

Hilfreiche Alt-Texte ohne Keyword-Stuffing

Google bezeichnet das alt-Attribut als wichtigste Metainformation eines Bildes. Beschreiben Sie, was zu sehen ist: „Umhängetasche aus cognacfarbenem Leder, getragen, Seitenansicht“ statt „Ledertasche Damen günstig Tasche kaufen“. Alt-Texte sind außerdem für Menschen mit Screenreader unverzichtbar, wie unser Beitrag zum BFSG für Onlineshops zeigt.

Bilder-Sitemap und strukturierte Daten

Eine Bilder-Sitemap hilft Google, Bilder zu finden, die per JavaScript geladen oder über ein CDN ausgeliefert werden. Pflegen Sie zudem die Eigenschaft image im Product-Schema, wie in unserem Beitrag zu strukturierten Daten im Onlineshop beschrieben.

Tipps für Ihr Shopsystem

WooCommerce und WordPress

WordPress erzeugt beim Upload automatisch mehrere Bildgrößen samt srcset. Seit Version 6.5 akzeptiert es AVIF, sofern der Server das Format unterstützt (zu prüfen unter Werkzeuge > Website-Zustand > Bericht > Medienverarbeitung), so die offizielle Ankündigung. In WooCommerce legen Sie die Breite von Haupt- und Vorschaubildern unter Design > Customizer > WooCommerce > Produktbilder fest und erzeugen die Thumbnails nach einem Themewechsel neu. Die WooCommerce-Anleitung zu unscharfen Produktbildern erklärt diese Einstellungen. Für die Umstellung eines bestehenden Sortiments auf WebP oder AVIF eignet sich ein Optimierungs-Plugin oder ein Bild-CDN, ohne jedes Produkt einzeln anzufassen.

Shopify

Shopify nimmt Ihnen viel Arbeit ab. Laut Entwicklerdokumentation liefert das CDN automatisch WebP oder AVIF an kompatible Browser aus, und der Liquid-Filter image_tag erzeugt das srcset. Optimiert wird im Theme: loading: 'eager' und fetchpriority: 'high' für das Hauptbild, loading: 'lazy' für den Rest des Rasters und widths, die zu Ihrem Layout passen.

Webflow

Webflow erstellt responsive Varianten (bis zu sieben Breiten von 500 bis 3.200 Pixel) für Bilder, die über das Assets-Panel oder ein CMS-Bildfeld hochgeladen werden und kleiner als 4 MB sind, so das Help Center. Bilder in Rich-Text-Feldern, Hintergrundbilder sowie CSV- oder API-Importe erhalten keine Varianten. Das Konvertierungstool wandelt JPEG und PNG in WebP oder AVIF um, ersetzt dabei aber die Originale. Sichern Sie diese vorher und verwenden Sie für Open-Graph-Bilder weiterhin JPEG.

Praxisbeispiel: Maßnahmenplan für einen Kosmetikshop mit 600 Produkten

Ein fiktives, aber typisches Szenario: ein WooCommerce-Shop für Kosmetik mit 600 Produkten, Herstellerfotos in gemischten Formaten und Hintergründen, ein mobiler LCP von rund 4 Sekunden auf Produktseiten und ein Teil des Sortiments in Google Shopping.

1. Bestandsaufnahme: Export des Katalogs mit Abmessungen und Dateigröße aller Bilder; Markierung aller Bilder unter 500 Pixel und aller Bilder mit Werbetext.
2. Bildrichtlinie: Format 1:1, weißer Hintergrund, Originale ab 1.500 Pixel, ein Bild pro Farbton bei Varianten.
3. Technik: Umstellung auf WebP, Hauptbild ohne Lazy Loading mit fetchpriority="high", feste Abmessungen, Galerie und ähnliche Produkte verzögert laden.
4. SEO: Dateinamen der 100 meistverkauften Produkte umbenennen, beschreibende Alt-Texte, Bilder-Sitemap prüfen.
5. Messung: Felddaten über 28 Tage beobachten und die Warenkorbrate der überarbeiteten Produktseiten vergleichen.

Checkliste: optimierte Produktbilder

• Quadratische Originale ab 1.500 Pixel, einheitlicher Bildausschnitt pro Kategorie.
• Kein Feed-Bild unter 500 x 500 Pixel, kein Werbetext, kein Wasserzeichen.
• Fotos als WebP oder AVIF mit srcset und sizes.
• Hauptbild ohne Lazy Loading, mit fetchpriority="high".
• width und height überall gesetzt.
• Produkte als <img>, nie als CSS-Hintergrund.
• Sprechende Dateinamen und Alt-Texte.
• image-Eigenschaft im Product-Schema und Bilder-Sitemap geprüft.

Fazit: Bilder, die verkaufen, ohne zu bremsen

Produktbilder zu optimieren heißt nicht nur komprimieren. Es verbindet Fotografie, Theme-Entwicklung und SEO zu einem Prozess. Shops, die das früh angehen, profitieren mehrfach: schnellere Seiten, mehr Sichtbarkeit in Google Bilder und Shopping und Kundschaft, die genau versteht, was sie kauft. Die Merchant-Center-Frist im Januar 2027 ist ein guter Anlass, das noch vor dem Weihnachtsgeschäft anzupacken.