Wichtigste Erkenntnisse
- Shopify konvertiert Bilder automatisch in WebP – aber große Quelldateien machen deinen Shop trotzdem langsamer.
- Nicht optimierte Bilder gehören zu den häufigsten Ursachen für schlechte Core Web Vitals-Werte auf Shopify.
- Komprimiere Bilder vor dem Hochladen mit kostenlosen Tools wie Squoosh oder TinyPNG.
- Ziele auf unter 500 KB für Produktbilder und unter 1 MB für Hero-/Banner-Bilder ab.
Shopify übernimmt viel Bildverarbeitung für dich – Formatkonvertierung, CDN-Bereitstellung, Responsive Sizing. Aber es kann nur mit dem arbeiten, was du ihm gibst.
Wenn du ein 5 MB großes Produktfoto hochlädst, liefert Shopify eine kleinere Version aus – aber die Quelldatei ist immer noch groß und das verursacht Overhead. Bilder vor dem Upload zu komprimieren, ist eine einfache Gewohnheit, die sich durch schnellere Ladezeiten, besseres SEO und niedrigere Bounce-Raten auszahlt.
Warum du uns vertrauen kannst
Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung und hat bereits für hunderte von Marken langsam ladende Storefronts analysiert. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von hunderten Shopify-Shops genutzt wird und eine Bewertung von 4.9 im Shopify App Store hat.
Komprimiert Shopify Bilder automatisch?
Teilweise.
Shopify macht automatisch Folgendes:
- Konvertiert Bilder ins WebP-Format (kleinere Dateigröße, gleiche Qualität)
- Liefert Bilder über sein globales CDN aus
- Generiert mehrere Größen für verschiedene Bildschirmbreiten
Shopify macht Folgendes NICHT:
- Deine Quelldateien vor dem Speichern komprimieren
- Unnötige Metadaten aus Uploads entfernen
- Alle Bilder auf deiner Seite standardmäßig lazy-loaden (hängt von deinem Theme ab)
Also ja, Shopify hilft – aber wenn du mit einem bereits komprimierten Bild startest, hat das CDN weniger Arbeit und die Ladezeit wird weiter verbessert.
Du fragst dich, ob ein Drittanbieter-Bild-CDN besser wäre? In unserem Shopify Image CDN-Vergleich erfährst du, wann das integrierte CDN ausreicht und wann Cloudinary oder Bunny ihr Geld wert sind.
Warum Bildkomprimierung für deinen Shopify-Store wichtig ist
Die Seitengeschwindigkeit beeinflusst direkt zwei Dinge: SEO-Rankings und Conversion-Rate.
Google verwendet Core Web Vitals als Ranking-Signal. Die wichtigste Kennzahl, die von großen Bildern beeinflusst wird, ist der Largest Contentful Paint (LCP) — also die Zeit, die das größte Element auf der Seite (in der Regel ein Hero-Image oder Produktfoto) zum Laden benötigt.
Langsamer LCP = schlechtere Rankings. Und für jede zusätzliche 100ms Ladezeit sinkt die Conversion-Rate. Komprimierte Bilder sind für die meisten Shopify-Shops der schnellste Weg zur Optimierung.
Mehr dazu: Alt-Text zu Bildern in Shopify hinzufügen.
So komprimierst du Bilder vor dem Upload in Shopify
Kostenlose Tools
Squoosh – Googles browserbasierter Kompressor. Unterstützt WebP, AVIF und JPEG. Zeigt einen Vorher-Nachher-Vergleich der Dateigröße. Bestens geeignet für einzelne Bilder.
TinyPNG / TinyJPG – Einfache Drag-and-Drop-Komprimierung. Reduziert PNG- und JPEG-Dateien um 60–80 % bei minimalem sichtbarem Qualitätsverlust. Kostenlos für bis zu 500 Bilder pro Monat.
ImageOptim – Mac-App für Batch-Komprimierung. Gut geeignet, um einen ganzen Ordner voller Bilder vor einem Produkt-Launch zu verarbeiten.
Empfohlene Einstellungen
| Bildtyp | Format | Max. Dateigröße | Max. Abmessungen |
|---|---|---|---|
| Produktbild | WebP oder JPEG | 500 KB | 2048 × 2048 px |
| Hero / Banner | WebP oder JPEG | 1 MB | 2560 × 1440 px |
| Hintergrundbild | WebP oder JPEG | 800 KB | 1920 × 1080 px |
| Icon / Logo | PNG oder SVG | 100 KB | Nach Bedarf |
Tipp: Du brauchst keine Produktbilder, die breiter als 2048px sind. Shopify empfiehlt 2048 x 2048px für quadratische Produktfotos, und sein CDN skaliert jedes Bild auf die Breite, die dein Theme anfordert. Banners in voller Breite sind die Ausnahme – für diese und alle anderen Bildtypen siehe unseren Leitfaden für Shopify-Bildgrößen.
So komprimierst du vorhandene Shopify-Bilder per Bulk-Verarbeitung
Wenn dein Shop bereits hunderte nicht optimierte Bilder enthält, ist es unpraktisch, diese händisch zu bearbeiten. Eine Shopify-App kann die Bulk-Komprimierung deiner bestehenden Mediathek übernehmen.
TinyIMG und Crush.pics sind zwei bewährte Optionen im Shopify App Store. Beide scannen deine vorhandenen Produktbilder, komprimieren sie und ersetzen die Originale – meist ohne sichtbaren Qualitätsunterschied.
Achte auf eine App, die Vorher-Nachher-Dateigrößen anzeigt und ein Rollback ermöglicht, falls nötig.
So nutzt du Lazy-loading für Bilder in Shopify
Lazy-loading bedeutet, dass Bilder erst geladen werden, wenn ein Nutzer in deren Nähe scrollt – statt alle auf einmal beim ersten Laden der Seite. Dies verbessert die initiale Ladezeit der Seite drastisch.
Die meisten modernen Shopify-Themes (Dawn, Horizon etc.) nutzen Lazy-loading standardmäßig über das Attribut loading="lazy" in <img>-Tags. Um deins zu prüfen: Rechtsklick auf ein beliebiges Bild in deinem Shop → Untersuchen → suche nach loading="lazy" im HTML-Code.
Falls dein Theme dies nicht enthält, kann ein Entwickler (oder Fudge) es zu deinen Bild-Templates hinzufügen.
Wie sich Bildkomprimierung auf deinen Shopify Speed Score auswirkt
Der Speed Score von Shopify basiert auf Google Lighthouse, das die reale Performance misst. Große Bilder erscheinen dort als:
- “Properly size images” – Bilder werden viel größer ausgeliefert, als sie angezeigt werden
- “Efficiently encode images” – Bilder könnten stärker komprimiert sein
- “Defer offscreen images” – Bilder werden geladen, bevor der Nutzer sie sehen kann
Die ersten beiden Punkte hast du voll unter Kontrolle, indem du vor dem Upload komprimierst. Die meisten Shops können allein durch Bildoptimierung 10–30 Punkte beim Speed Score herausholen.
Verwandt: Add Alt Text to Images in Shopify.
Falls noch nicht eingerichtet, starten Sie mit Update Product Images in Shopify.
Welches Bildformat sollte ich für Shopify verwenden?
Verwende WebP für die beste Kombination aus Qualität und Dateigröße – es ist bei gleicher visueller Qualität in der Regel 25–35 % kleiner als JPEG und wird von allen modernen Browsern unterstützt. Shopify konvertiert hochgeladene Bilder automatisch in WebP, wenn sie an kompatible Browser ausgeliefert werden. Für Produktbilder ist JPEG der sichere Fallback für ältere Tools. Verwende PNG nur, wenn du einen transparenten Hintergrund benötigst (Logos, Icons). Vermeide GIF für alles andere als kurze animierte Loops – verwende stattdessen kurze MP4-Videos für eine bessere Komprimierung. Siehe auch: Lazy Loading für Bilder in Shopify für den nächsten Schritt bei der Bild-Performance-Optimierung.
FAQ
Sollte ich mich allein auf Shopifys automatische Komprimierung verlassen?
Nein. Die CDN-Optimierung von Shopify hilft, aber sie hat ihre Grenzen – sie kann keine aufgeblähte Quelldatei reparieren. Ein 5-MB-Upload wird zwar als kleinere Datei ausgeliefert, aber die zugrunde liegende Datei ist immer noch riesig, was Backups, Theme-Exporte und das Browsen im Shopify-Adminbereich verlangsamt. Komprimiere unabhängig vom CDN-Verhalten vor dem Upload.
Was ist der Unterschied zwischen WebP, JPEG und PNG für Shopify?
WebP: kleinste Größe bei gleicher Qualität, unterstützt sowohl Fotos als auch Grafiken mit Transparenz, ideal für die meisten Produktbilder. JPEG: weitgehend kompatibel, etwas größer als WebP, gut für Fotos. PNG: größte Dateigröße, unterstützt Transparenz, nur für Logos/Icons oder Grafiken mit scharfen Kanten verwenden. Shopify konvertiert hochgeladene Bilder für unterstützende Browser automatisch in WebP.
Schadet zu viel Komprimierung der Bildqualität?
Ja, ab einem gewissen Punkt. Eine JPEG-Qualität von 80 % ist in der Regel optisch identisch mit 100 %, aber 30–50 % kleiner; unter 60 % sieht man erste Artefakte (blockartige Bereiche, Farbverlaufs-Banding). Für WebP sind 80 % Qualität ebenfalls ein guter Standardwert. Schau dir die komprimierte Version vor dem Hochladen immer mit 100 % Zoom auf einem echten Bildschirm an.
Kann ich bereits bei Shopify hochgeladene Bilder nachträglich komprimieren?
Ja, über Apps (TinyIMG, Crush.pics usw.) – sie ersetzen vorhandene Bilder durch komprimierte Versionen. Shopify selbst verfügt nicht über eine integrierte Bulk-Rekompression. Für einzelne Produkte funktioniert der manuelle Download → Neukomprimierung → erneuter Upload, ist aber langsam. Oder beschreibe Fudge einfach, was du möchtest ("Prüfe unseren Shop auf Produktbilder über 500 KB und schlage komprimierte Alternativen vor") und es erstellt eine Liste mit Vorher/Nachher-Größen zur Überprüfung.
Wie sehr verbessert die Bildkomprimierung tatsächlich die Page-Speed-Performance bei Shopify?
Erheblich. Die Dateigröße von Bildern ist die Hauptursache für langsame Shopify-Stores – die Komprimierung eines 3-MB-Hero-Bildes auf 300 KB kann den LCP bei langsamen Verbindungen um 1–2 Sekunden senken. Die meisten Shopify-Stores können 10–30 PageSpeed-Punkte allein durch Bildoptimierung gewinnen, ohne andere Änderungen. Der Performance-Fix mit der größten Hebelwirkung.
Verwandt: Ein Shopify-Theme schneller machen.
Verwandt: Render-Blocking Scripts in Shopify beheben.