Bilddateigröße, Seitengeschwindigkeit und Umsatz: Der direkte Zusammenhang, den E-Commerce-Verkäufer übersehen

Die meisten E-Commerce-Verkäufer wissen, dass große Bilder schlecht sind. Nur wenige behandeln es als dringendes Umsatzproblem. Eine Google- und Deloitte-Studie liefert die Zahlen: Jede zusätzliche Ladezeit von 100ms kostet Einzelhandelsseiten etwa 1 % Conversion-Rate. Bei einem Shop mit 100.000 € Monatsumsatz kann eine Sekunde Verzögerung rund 12.000 € jährlichen Umsatzverlust bedeuten — allein durch Bilder. Dieser Leitfaden erklärt die Dateigrößenziele, Exporteinstellungen, technische Lösungen und das schnelle Audit, das Probleme in unter zehn Minuten aufdeckt.

Die Forschung: Geschwindigkeit und Conversions

Der Zusammenhang zwischen Seitengeschwindigkeit und Umsatz ist gut belegt. Eine Google- und Deloitte-Studie von 2019 mit 37 Einzelhandels- und Reise-Websites ergab, dass eine Verbesserung der mobilen Seitengeschwindigkeit um 0,1 Sekunden die Conversion-Rate im Durchschnitt um 8 % erhöhte. Einzelhandelsseiten zeigten durch denselben Geschwindigkeitsgewinn eine 10-prozentige Verbesserung beim durchschnittlichen Bestellwert. Aktuelle Google-Daten aus der Core Web Vitals-Forschung zeigen, dass Seiten, die den „Guten" LCP-Schwellenwert erfüllen (unter 2,5 Sekunden), messbar höhere Conversion-Rates erzielen als Seiten in der Kategorie „Verbesserungsbedarf" oder „Schlecht".

Bilder sind der größte Einzelfaktor für lange Ladezeiten auf den meisten Produktseiten. Eine Seite, die 3 MB nicht optimierter Bilder lädt, bevor der Käufer über das Hauptbild hinaus gescrollt hat, verliert Geld — nämlich das Geld der Kunden, die die Seite verlassen haben, bevor sie fertig geladen war.

Dateigrößenziele: Was Sie erreichen sollten

Es gibt keine universelle Regel, aber Branchenbenchmarks für E-Commerce-Produktseiten sind konsistent:

• Hauptproduktbild (above the fold): Unter 100 KB ist ideal; 200 KB ist eine akzeptable Obergrenze. Über 200 KB beeinflussen Sie messbar den LCP.
• Galeriebilder (below the fold): Jeweils unter 200 KB. Da diese auf korrekt konfigurierten Seiten lazy-geladen werden, sind sie weniger kritisch als das Hauptbild — aber angesammeltes Galeriegewicht beeinflusst die gesamte Seitenübertragungsgröße.
• Absolutes Maximum für jedes web-angezeigte Bild: 500 KB. Wenn Sie regelmäßig Bilder über 500 KB auf Ihren Produktseiten veröffentlichen, sollte Optimierung das Erste sein, was Sie beheben, bevor Sie andere Conversion-Arbeit angehen.

Diese Ziele sind ohne sichtbaren Qualitätsverlust erreichbar. Unser Bild-Web-Optimierungsservice übernimmt dies im großen Maßstab für Shops mit großen Katalogen.

Formatvergleich: WebP, JPEG und PNG

Die Formatwahl beeinflusst die Dateigröße erheblich. Für einen detaillierten Vergleich der Kompromisse jedes Formats für Produktfotografie, lesen Sie unseren Leitfaden zu WebP vs. JPEG vs. PNG für E-Commerce. Kurz gefasst für Seitengeschwindigkeit:

• WebP ist die beste Wahl für Web-Produktbilder. Es liefert 25–34 % kleinere Dateien als JPEG bei vergleichbarer visueller Qualität und unterstützt Transparenz. Alle großen Browser unterstützen es seit 2020.
• JPEG ist der zuverlässige Fallback. Verwenden Sie progressive JPEG-Kodierung für schnelleres wahrgenommenes Laden. Qualitätseinstellungen von 75–85 liefern nahezu nicht zu unterscheidende Ergebnisse bei deutlich kleineren Dateigrößen als Qualität 95–100.
• PNG sollte für Bilder reserviert werden, die echte Transparenz erfordern und nicht als WebP geliefert werden können. PNG-Dateien sind für fotografische Inhalte durchgehend größer als JPEG. Das Hochladen von PNGs für Produktfotos, die keine Transparenz benötigen, ist einer der häufigsten Dateigrößenfehler im E-Commerce.

Richtiger Export aus Photoshop

Photoshops „Export als"-Dialog gibt Ihnen volle Kontrolle über Ausgabequalität und Dateigröße. Verwenden Sie diese Einstellungen für Web-Produktbilder:

• Format: JPEG (oder WebP, wenn Ihr Workflow es unterstützt). Vermeiden Sie PNG für fotografische Produktbilder.
• Qualität: 8–10 auf Photoshops Skala (80–100%) ist der Bereich, den die meisten Retuscheure verwenden. Qualität 8 (80%) ist auf Web-Anzeigeformaten von Qualität 10 (100%) nicht zu unterscheiden — aber die Datei ist 40–60 % kleiner. Beginnen Sie bei Qualität 8 und überprüfen Sie die Vorschau bei 100 % Zoom.
• Progressive Kodierung: Aktivieren Sie „Progressive" für JPEG. Progressive JPEGs rendern fast sofort eine niedrig aufgelöste Version des Bildes, während der Rest lädt, was die wahrgenommene Ladegeschwindigkeit erheblich verbessert.
• Auflösung: 72 dpi für Web. Ein 300-dpi-Bild, das bei 72 dpi angezeigt wird, fügt Dateigewicht ohne visuellen Nutzen hinzu.
• Abmessungen: Ändern Sie die Größe auf die tatsächliche Anzeigegröße vor dem Export. Ein Produktbild, das bei 1500×1500 Pixel auf Ihrer Website angezeigt wird, sollte bei 1500×1500 Pixel exportiert werden, nicht bei der ursprünglichen Aufnahmeauflösung von 6000×6000 Pixel oder höher.

Was Sie nicht tun sollten

Der häufigste Dateigrößenfehler im E-Commerce ist das Hochladen derselben Datei, die an Marketplace-Druck- oder Fulfillment-Workflows gesendet wird, direkt auf eine Website. Amazon und viele Druckdienste fordern TIFF-Dateien bei 300 dpi mit Abmessungen von 3000×3000 Pixel oder größer an — manchmal 10–20 MB pro Datei. Exportieren Sie immer eine dedizierte Web-Version aus Ihrer Retouche-Software. Verwenden Sie Ihre Amazon- oder Drucklieferdatei nie als Ihre Website-Datei.

Next.js Image-Komponente und Lazy Loading

Wenn Ihr Storefront auf Next.js läuft, löst die integrierte Image-Komponente automatisch mehrere Seitengeschwindigkeitsprobleme:

• Automatische Formatkonvertierung: Next.js liefert WebP automatisch an Browser, die es unterstützen, mit JPEG-Fallback für ältere Browser — ohne manuellen Exportschritt.
• Automatische Größenänderung: Bilder werden auf die in Ihrem Layout definierten Anzeigeabmessungen skaliert.
• Lazy Loading: Bilder unterhalb des Viewports werden erst geladen, wenn der Benutzer dazu scrollt. Das reduziert das anfängliche Seitengewicht, das den LCP beeinflusst.
• Priority Loading: Fügen Sie Ihrem Hauptproduktbild das priority-Attribut hinzu, um es vorzuladen — dieses Bild bestimmt Ihren LCP-Score und sollte ohne Warten auf andere Ressourcen laden.

Wenn Sie nicht auf Next.js sind, ist das Äquivalent das HTML-Attribut loading="lazy" auf Galeriebildern, kombiniert mit expliziten width- und height-Attributen zur Vermeidung von Layout-Verschiebungen.

CDN: Wie es Bildlieferlatenz reduziert

Ein Content Delivery Network (CDN) speichert Kopien Ihrer Bilder auf weltweit verteilten Servern. Wenn ein Käufer in Sydney Ihre in London gehostete Produktseite lädt, ruft sein Browser Bilder von einem australischen CDN-Knoten ab statt eine Reise nach Europa zu machen. Die Latenzreduzierung ist erheblich — oft 200–400ms bei internationalen Anfragen. Große E-Commerce-Plattformen (Shopify, BigCommerce, Vercel-gehostetes Next.js) beinhalten standardmäßig CDN-Lieferung für Bilder. Selbst gehostete WooCommerce- oder Magento-Installationen oft nicht — und das Hinzufügen eines CDN (Cloudflare, BunnyCDN oder AWS CloudFront) ist eine der rentabelsten Performance-Investitionen für solche Shops.

Core Web Vitals: LCP und Ihre Produktbilder

Googles Core Web Vitals sind die technischen Metriken, die Bildperformance direkt mit organischen Suchrankings verbinden. Die relevanteste für Produktseiten ist der Largest Contentful Paint (LCP) — die Zeit von der Navigation bis zum vollständigen Rendering des größten sichtbaren Elements. Auf einer Produktseite ist dieses Element fast immer das Hauptproduktbild.

LCP-Schwellenwerte:

• Gut: Unter 2,5 Sekunden
• Verbesserungsbedarf: 2,5–4,0 Sekunden
• Schlecht: Über 4,0 Sekunden

Seiten im „Guten" Bereich profitieren von besserer Positionierung in Google-Suchergebnissen. Zu große Hauptproduktbilder sind die häufigste Ursache für schlechte LCP-Scores auf E-Commerce-Produktseiten.

Schnelles Audit: Bilddateigröße mit Chrome DevTools prüfen

Sie können Ihre Produktseiten-Bilder in unter fünf Minuten mit Chrome DevTools prüfen:

• Öffnen Sie die Produktseite, die Sie prüfen möchten, und drücken Sie F12, um DevTools zu öffnen.
• Klicken Sie auf den Tab Netzwerk, dann laden Sie die Seite mit Strg+Umschalt+R neu (harter Reload mit deaktiviertem Cache).
• Geben Sie in der Filterleiste Img ein, um nur Bildanfragen anzuzeigen.
• Die Spalte Größe zeigt die tatsächlich übertragenen Bytes. Sortieren Sie absteigend nach Größe, um Ihre größten Bilder zu finden.
• Jedes Bild über 200 KB in der Größenspalte erfordert einen Neuexport. Wenn Ihr Hauptproduktbild über 100 KB liegt, sollte es ganz oben auf der Liste stehen.

Wann die Bildoptimierung ausgelagert werden sollte

Bei Shops mit Hunderten oder Tausenden von SKUs ist der manuelle Neuexport jedes Bildes nicht praktikabel. Unser Bild-Web-Optimierungsservice übernimmt die Stapelverarbeitung von Produktbild-Bibliotheken und liefert webfertige Dateien mit den richtigen Abmessungen, im WebP- und JPEG-Format, mit entfernten Metadaten und Dateigrößen innerhalb der oben genannten Ziele. Wenn Ihre Google PageSpeed Insights-Scores konstant im Bereich „Verbesserungsbedarf" oder „Schlecht" liegen und Bilder als Hauptursache identifiziert werden, reichen Sie 5 Bilder für eine kostenlose Probebatch ein.