Shopware Bildoptimierung: Mit WebP und AVIF die Ladezeit Ihres Onlineshops senken

Bilder sind in fast jedem Shopware-Shop der mit Abstand größte Posten beim Seitengewicht. Produktfotos, Kategorie-Teaser, Hero-Banner und Trust-Logos summieren sich schnell zu mehreren Megabyte pro Seite – und genau diese Megabyte entscheiden darüber, ob Ihre Storefront in unter einer Sekunde steht oder Ihre Kundschaft beim Warten abspringt. Als spezialisierte Shopware-Agentur sehen wir täglich, dass die Shopware Bildoptimierung der schnellste und günstigste Performance-Hebel überhaupt ist. In diesem Beitrag zeigen wir Ihnen, wie Sie ihn richtig ziehen.

Warum Bilder der größte Performance-Hebel sind

Studien zur Ladezeit im E-Commerce sind eindeutig: Schon eine Sekunde Verzögerung kann die Conversion Rate um bis zu sieben Prozent senken. Schnelle Shops mit Ladezeiten unter einer Sekunde konvertieren teils dreimal besser als träge Seiten. Da Bilder regelmäßig 50 bis 70 Prozent des Seitengewichts ausmachen, ist hier der größte Hebel verborgen. Bevor Sie über teure Caching-Strategien oder einen Frontend-Umbau nachdenken, lohnt sich der Blick auf das, was Ihr Server tatsächlich an Bilddaten ausliefert.

Hinzu kommt der SEO-Effekt: Google bewertet mit den Core Web Vitals unter anderem den Largest Contentful Paint (LCP) – und das LCP-Element ist auf Produkt- und Landingpages fast immer ein Bild. Eine schlanke Bildauslieferung verbessert also nicht nur das Einkaufserlebnis, sondern auch Ihre Sichtbarkeit in den Suchergebnissen. Performance und Ranking gehen hier Hand in Hand.

WebP und AVIF: Was die modernen Bildformate wirklich bringen

JPEG und PNG sind über 25 Jahre alt – und das merkt man an der Dateigröße. Moderne Formate liefern bei gleicher oder besserer Qualität deutlich weniger Bytes. WebP komprimiert rund 25 bis 35 Prozent stärker als JPEG. AVIF, das jüngste Format, schafft noch einmal bis zu 50 Prozent kleinere Dateien gegenüber JPEG und liegt rund 20 Prozent unter WebP. In der Praxis bedeutet das: Allein die Umstellung auf AVIF kann die Gesamtladezeit eines Shops um 30 bis 50 Prozent reduzieren.

Wichtig ist die richtige Auslieferungsstrategie. Nicht jeder Browser unterstützt jedes Format gleich gut, deshalb sollten Sie mit dem <picture>-Element oder serverseitiger Content-Negotiation arbeiten: Der Browser bekommt automatisch das beste Format, das er versteht, und fällt sonst sauber auf WebP oder JPEG zurück. Shopware bringt über die Mediathek bereits eine WebP-Unterstützung mit; für AVIF und eine konsequente Pipeline setzen wir je nach Setup auf erprobte Plugins oder eine eigene Lösung. Beachten Sie dabei: Für AVIF benötigt Ihr Server mindestens PHP 8.1, damit die Funktion imageavif() verfügbar ist.

Lazy Loading, fetchpriority und Thumbnails richtig einsetzen

Das richtige Format ist nur die halbe Miete – entscheidend ist auch, wann und wie groß ein Bild geladen wird. Eine der häufigsten Fehlkonfigurationen, die wir in Audits finden: Lazy Loading wird pauschal auf alle Bilder angewendet, auch auf das Hero-Bild oben im Viewport. Das verzögert genau das LCP-Element und verschlechtert die Core Web Vitals. Die Regel lautet: Bilder, die sofort sichtbar sind, niemals lazy laden – stattdessen mit fetchpriority="high" priorisieren. Erst alles unterhalb der Falz bekommt loading="lazy".

Genauso wichtig ist die Thumbnail-Strategie. Shopware generiert für jedes Medium verschiedene Größen – werden diese nicht sauber konfiguriert, liefert der Shop riesige Originaldateien aus, die der Browser erst herunterskaliert. Achten Sie auf passende srcset-Angaben, sinnvolle Thumbnail-Größen pro Anzeigekontext und einen aufgeräumten Medienmanager. Bei großen Katalogen mit zehntausenden Produktbildern empfiehlt sich zusätzlich die On-the-fly-Generierung über einen Imaging-Service oder ein CDN, statt alle Varianten beim Upload physisch abzulegen.

Diese Fehler kosten in der Praxis am häufigsten Performance:

• Originalbilder ohne Skalierung: Ein 4000-Pixel-Foto wird per CSS auf 400 Pixel gequetscht – der Browser lädt trotzdem die volle Datei.

• Lazy Loading auf dem Hero-Bild: Das wichtigste Bild der Seite wird künstlich verzögert und ruiniert den LCP-Wert.

• Fehlende moderne Formate: Trotz vorhandener Mediathek werden weiter JPEGs ausgeliefert, weil die WebP- und AVIF-Auslieferung nicht aktiviert ist.

• Unkomprimierte PNGs für Fotos: PNG gehört zu Logos und Grafiken, nicht zu Produktfotos.

So gehen wir bei der Shopware Bildoptimierung vor

In unseren Projekten beginnt jede Bildoptimierung mit einer Messung: Wir analysieren mit Lighthouse und echten Felddaten, welche Bilder das LCP bestimmen, wie groß die ausgelieferten Dateien sind und wo unnötige Originale durchrutschen. Daraus leiten wir eine klare Pipeline ab – von der automatischen Konvertierung nach WebP und AVIF über die Thumbnail-Konfiguration bis zur CDN-Anbindung. Das Ergebnis ist messbar: schnellere Ladezeiten, bessere Core Web Vitals und in der Folge mehr Conversions und Sichtbarkeit. Wie diese Bausteine zusammenspielen, vertiefen wir auch in unserer Arbeit rund um Shopware Architektur und Performance.

Bildoptimierung ist dabei kein einmaliges Projekt, sondern Teil eines sauberen Betriebs: Jedes neue Produktfoto, jeder Kampagnen-Banner sollte automatisch durch die richtige Pipeline laufen, ohne dass Ihr Team manuell komprimieren muss. Genau solche Automatisierungen bauen wir als Shopware Agentur Köln fest in Ihren Workflow ein – damit Performance dauerhaft bleibt und nicht mit dem nächsten Katalog-Update wieder verloren geht.

Lassen Sie Ihren Umsatz nicht von zu schweren Bildern und veralteten Strukturen ausbremsen. Sprechen Sie mit den Experten von enno.dev, Ihrer spezialisierten Shopware Agentur Köln – wir analysieren Ihr Setup und zeigen Ihnen, wo der größte Performance-Hebel liegt.