So optimieren Sie die Bilder Ihres Shopify-Shops (und gewinnen 2 s Ladezeit)

Warum Ihre Shopify-Bilder Ihre Conversion ausbremsen

Auf einer durchschnittlichen Shopify-Produktseite machen die Bilder 60 bis 80 % des Gesamtgewichts der Seite aus. Jede beim Laden gewonnene Sekunde bedeutet etwa 4 bis 7 % mehr Conversion-Rate (Quelle: Deloitte-Studie Milliseconds Make Millions, 2020).

Das klassische Problem:

• Das Theme akzeptiert ein Quellbild im Format JPG 4000×3000 (8 MB).
• Shopify passt seine Größe CDN-seitig an, behält aber das Eingangsformat bei.
• Der mobile Besucher lädt ein JPG von 350 KB herunter, wo ein WebP von 90 KB genügen würde — für ein streng identisches visuelles Ergebnis.

Bei 20 Produkten × 5 Bildern pro Seite ergibt das über 25 MB unnötig übertragene Daten pro Sitzung.

Die drei Hebel, die Sie betätigen sollten

1. Ihre Quellen in WebP (oder AVIF) umwandeln

Das WebP-Format bietet im Schnitt 30 % weniger Gewicht als ein gleichwertiges JPG bei identischer wahrgenommener Qualität. AVIF geht noch weiter hinunter (bis zu -50 % gegenüber JPG), aber seine Unterstützung bleibt auf manchen älteren Browsern unvollständig.

Faustregel: Laden Sie Ihre Master in WebP mit Qualität 82-88 hoch. Das ist der Sweet Spot zwischen Größe und Farbtreue.

2. Die tatsächliche Anzeigegröße kalibrieren

Es ist sinnlos, ein Bild 2400×1800 auszuliefern, wenn es im Theme in 600×450 angezeigt wird. Für die meisten Shopify-Themes (Dawn, Sense, Refresh):

Platzierung	Empfohlene native Breite
Hero Startseite	1920 px
Produktkarussell	1200 px
Kollektions-Miniatur	600 px
Blog-Bild	1200 px

3. loading="lazy" überall außerhalb des Folds aktivieren

Shopify fügt es bei den aktuellen Themes standardmäßig hinzu, aber prüfen Sie Ihre benutzerdefinierten Bereiche (Liquid) — ein <img> ohne dieses Attribut blockiert den LCP.

Der konkrete Workflow in 4 Schritten

1. Prüfen: Lighthouse → Tab Opportunities → “Serve images in next-gen formats”.
2. Einen Stapel vorbereiten der Produktfotos in .jpg mit hoher Auflösung.
3. Den gesamten Stapel umwandeln in WebP mit MediaBay — Drag & Drop, Ausgabeformat WebP, Qualität 85, max. Größe 1200 px.
4. Erneut hochladen in Shopify (Admin → Dateien, oder direkt in die Produktseite). Das Shopify-CDN liefert anschließend die passende Größe je nach Viewport aus.

Praxisfall: -1,8 s beim LCP eines Mode-Shops

Bei einem Kunden-Shop (Katalog ~40 Artikel):

• LCP vorher: 3,2 s (mobiles 4G)
• LCP nach der Stapelkonvertierung in WebP: 1,4 s
• Durchschnittsgewicht einer Produktseite: 2,8 MB → 720 KB

Der SEO-Nutzen ist sofort spürbar: Seit 2023 wertet Google Seiten ab, deren LCP 2,5 s überschreitet.

Und was ist mit dem Datenschutz Ihrer Bilder?

Viele Online-Konvertierungstools senden Ihre Bilder an ihre Server — ein DSGVO-Risiko, wenn Ihre Fotos Personen, vertrauliche Prototypen oder schlicht Ihren Katalog vor dem Launch enthalten.

MediaBay konvertiert zu 100 % lokal in Ihrem Browser, per WebAssembly. Kein Upload, keine serverseitige Speicherung. Überprüfbar im Tab Netzwerk der DevTools.

TL;DR

• Wandeln Sie Ihre JPG in WebP Qualität 85 um, max. Größe 1200 px in der Produktbreite.
• Prüfen Sie loading="lazy" bei jedem <img> außerhalb des Folds.
• Messen Sie mit Lighthouse vorher/nachher — streben Sie einen LCP < 2,5 s an.
• Tun Sie es, ohne Ihre Fotos hochzuladen: wandeln Sie sie lokal um.