WebP vs JPEG: Warum 64% der E-Commerce-Websites mit falschen Bildformaten Conversions verlieren

Sarah Chen, eine Produktfotografin aus Portland, Oregon, hatte ihr E-Commerce-Geschäft auf Lifestyle-Produktfotografie aufgebaut. Ihr Shopify-Shop zeigte hochauflösende Bilder von handgefertigten Lederwaren, jedes Bild sorgfältig inszeniert und bearbeitet. Das Problem war nicht ihre Fotografie – es waren ihre Dateiformate. Jede Produktseite lud vier bis sechs JPEG-Bilder mit jeweils 800KB bis 1,2MB. Ihre Konkurrenten, meist kleinere Unternehmen, die sie noch nie gehört hatte, rankten trotz weniger professioneller Bilder besser als sie.

Nach sechs Monaten stagnierender Conversion-Raten von rund 1,8% bemerkte Sarah etwas in ihrer Google Search Console: Seiten mit mehreren Produktbildern wurden wegen „schlechter mobiler Nutzererfahrung“ gekennzeichnet und hatten einen Core Web Vitals Score von „verbesserungsbedürftig“. Ihr Largest Contentful Paint (LCP) lag bei mobilen 4G-Verbindungen durchgehend über 4,5 Sekunden. Sie verlor Kunden, bevor diese überhaupt die Produktdetails sahen. In demselben Zeitraum luden die Websites ihrer Konkurrenten in unter 2,5 Sekunden. Sarah berechnete, dass sie monatlich etwa 2.100 Dollar an Umsatz durch langsame Seitenladezeiten verlor.

Als Sarah ihre Produktbildbibliothek von JPEG zu WebP-Format konvertierte und über ein CDN mit ordnungsgemäßem responsivem Sizing bereitstellte, änderte sich alles. Ihr LCP sank auf 1,8 Sekunden auf Mobilgeräten. Ihre Conversion-Rate stieg innerhalb von 60 Tagen auf 2,7%. Über die nächsten sechs Monate führte diese eine Änderung – die Wahl des richtigen Bildformats – zu 18.900 Dollar zurückgewonnenen Umsatz. Ihre Core Web Vitals erreichten den „gut“-Bereich, und der organische Traffic von bildlastigen Suchanfragen stieg um 34%.

Warum das wichtiger ist, als die meisten Entwickler realisieren

Die Statistik ist ernüchternd: 64% der E-Commerce-Websites setzen immer noch hauptsächlich auf JPEG- und PNG-Formate, obwohl WebP seit 2018 in modernen Browsern flächendeckend unterstützt wird. Das ist ein erheblicher Wettbewerbsnachteil, den die meisten Teams nicht aktiv verfolgen oder priorisieren.

Die realen Kosten sind beträchtlich. Eine typische E-Commerce-Produktseite mit sechs Produktbildern im JPEG-Format hat eine Gesamtgröße von etwa 3,2MB. Die gleichen Bilder im WebP-Format belaufen sich auf 1,8MB – eine Reduktion von 44%. Bei einer 4G-LTE-Verbindung (die weltweit immer noch etwa 35% des mobilen Traffics ausmacht), macht das den Unterschied zwischen einem LCP von 4,1 Sekunden und einem LCP von 2,3 Sekunden aus. Googles Forschung zeigt konsistent, dass Seiten, die die 3-Sekunden-Schwelle überschreiten, eine 40% höhere Absprungrate verzeichnen. Für eine E-Commerce-Website mit einem durchschnittlichen Bestellwert von 50 Dollar kostet jede 1-Sekunden-Verzögerung beim Laden ungefähr 7% der Conversions. Die 1,8-Sekunden-Verbesserung, die Sarah erlebt hat, führt direkt zu messbarem Umsatzgewinn.

Über die Conversion-Metriken hinaus wirkt sich das Bilddateiformat direkt auf Ihre Core Web Vitals-Scores aus – den Ranking-Faktor, den Google zur Bestimmung der Suchsichtbarkeit nutzt. Eine Website mit nicht optimierten Bildern wird fast nie eine „gute“ LCP-Bewertung erreichen, was zunehmend den organischen Traffic beeinflusst, besonders bei mobilen Suchanfragen, wo Geschwindigkeit am wichtigsten ist.

Praktische Lösung 1: Von JPEG zu WebP mit angemessener Fallback-Architektur wechseln

Das Format-Vorteil verstehen und die realen Dateigrößen-Auswirkungen in der Praxis

WebP ist ein modernes Bildformat, das von Google entwickelt wurde und fortgeschrittene Kompressionstechniken nutzt (speziell VP8-Video-Codec-Kompression), um Dateigröße von 25–35% kleiner zu machen als vergleichbare JPEG-Bilder bei gleicher Bildqualität. Anders als JPEG unterstützt WebP sowohl verlustbehaftete als auch verlustfreie Kompression, Transparenz (wie PNG) und Animation (wie GIF) – wodurch es ein echtes universelles Format-Ersatzmittel wird.

Hier ist ein konkretes Beispiel aus einem realen Produktfotografie-Szenario: Ein Lifestyle-Produktbild mit den Maßen 2400×1600px im JPEG-Format bei Qualität 85 ist typischerweise 487KB groß. Dasselbe Bild im WebP-Format bei Qualität 80 konvertiert (für das menschliche Auge nicht wahrnehmbare Qualitätsunterschiede) ist 312KB groß – eine Reduzierung der Dateigröße um 36%. Bei einer Website mit 150 Produktseiten, auf denen jeweils vier Produktbilder vorhanden sind, ist das der Unterschied zwischen einer Gesamtbildbibliotheksgröße von 291,6MB (JPEG) und 187,2MB (WebP) – das bedeutet 104,4MB gewonnener Speicherplatz. Beim Seitenaufbau führt dies zu einer ungefähr 1,2 Sekunden schnelleren LCP auf 4G-Verbindungen.

Die praktische Umsetzung erfordert eine Fallback-Strategie, da etwa 5–8% der Nutzer das Web noch über ältere Browser aufrufen (hauptsächlich Internet Explorer 11 und ältere Android-Browser). Die Lösung besteht darin, WebP an unterstützende Browser bereitzustellen und automatisch auf JPEG für nicht unterstützte Clients zurückzugreifen. Dies wird mithilfe des HTML-Elements „ erreicht:

Browser lesen das „-Element von oben nach unten und verwenden das erste Format, das sie erkennen. Moderne Browser erkennen WebP-Unterstützung und laden diese Datei; ältere Browser überspringen sie und laden stattdessen die JPEG. Kein JavaScript erforderlich, keine doppelte Dateibereitstellung, keine Leistungseinbußen.

Komprimierungseinstellungen, die visuelle Qualität bewahren und Geschwindigkeit maximieren

Die kritische Variable bei der WebP-Konvertierung ist die Qualitätseinstellung. Die meisten Entwickler komprimieren entweder zu stark (was zu sichtbarem Qualitätsverlust führt) oder zu schwach (wodurch der Zweck verfehlt wird, indem die Dateigröße groß bleibt). Der optimale Bereich für die meisten fotografischen Inhalte liegt bei einer Qualität von 75–82 (auf einer Skala von 0–100).

Zum Vergleich: Ein Produktfoto mit den Maßen 1600×1200px bei verschiedenen Einstellungen:
– JPEG Qualität 85: 156KB
– WebP Qualität 82: 94KB (40% kleiner)
– WebP Qualität 75: 76KB (51% kleiner, subtiler, aber erkennbarer Qualitätsverlust)
– WebP Qualität 70: 63KB (60% kleiner, spürbarer Qualitätsverlust für die meisten Nutzer)

Der optimale Bereich für die Bildqualität im E-Commerce liegt bei 79–80. Dies führt zu unmerklichen Qualitätsverlusten für das menschliche Auge und spart gleichzeitig 35–40% Dateigröße. Für Banner und Hero-Bereiche, wo visuelle Wirkung wichtiger ist, verwenden Sie Qualität 82–84. Für Miniaturbilder auf Kategorieseiten können Sie problemlos auf Qualität 75 reduzieren.

Implementieren Sie zusätzlich responsives Bilder-Sizing mit `srcset`. Servieren Sie kein 2400×1600px-Bild an ein Mobilgerät mit einer Viewport-Breite von 375px. Verwenden Sie mehrere WebP-Varianten:

Dieser Ansatz stellt sicher, dass Mobilnutzer etwa 60% weniger Daten herunterladen als Desktop-Nutzer, während Desktop-Nutzer immer noch gestochen scharfe, hochauflösende Bilder erhalten. In Kombination mit WebP-Komprimierung reduziert diese duale Optimierung das Mobile-LCP typischerweise um 2–3 Sekunden bei 4G-Verbindungen.

Praktische Lösung 2: Lazy Loading und Bildgrößenangaben implementieren

Native Lazy-Loading-Syntax und deren Auswirkung auf das initiale Seiten-Rendering

Die meisten Entwickler laden alle Bilder auf einer Seite gleichzeitig, auch Bilder unterhalb der Faltkante, die Nutzer ohne Scrollen nicht sehen. Natives Lazy Loading, das in allen modernen Browsern integriert ist, verzögert das Laden von Bildern, bis sich das Bild dem Viewport nähert – typischerweise 100–200px bevor es sichtbar wird.

Die Implementierung ist einfach – fügen Sie das Attribut `loading=“lazy“` zu jedem ``-Tag hinzu:

Für eine Produktlistenseite mit