So komprimierst du Bilder in Shopify (2026)

Zuletzt aktualisiert
Von Experten geprüft
5 Min. Lesezeit
Jacques Blom
Jacques Blom
CTO bei Fudge.

Das Wichtigste auf einen Blick

  • Shopify konvertiert Bilder automatisch in WebP – aber große Quelldateien bremsen deinen Shop trotzdem aus.
  • Nicht optimierte Bilder sind eine der häufigsten Ursachen für schlechte Core Web Vitals-Werte bei Shopify.
  • Komprimiere Bilder vor dem Upload mit kostenlosen Tools wie Squoosh oder TinyPNG.
  • Strebe unter 500 KB für Produktbilder und unter 1 MB für Hero/Banner-Bilder an.

Shopify nimmt dir viel Arbeit bei der Bildverarbeitung ab – Formatkonvertierung, CDN-Auslieferung, responsive Größenanpassung. Aber das System kann nur mit dem arbeiten, was du ihm gibst.

Wenn du ein 5 MB großes Produktfoto hochlädst, liefert Shopify zwar eine kleinere Version aus – aber die Quelldatei ist immer noch groß, was Overhead verursacht. Bilder vor dem Upload zu komprimieren, ist eine einfache Gewohnheit, die sich durch schnellere Ladezeiten, besseres SEO und niedrigere Absprungraten auszahlt.

Warum du uns vertrauen kannst

Jacques verfügt über mehr als 15 Jahre Erfahrung in der Shopify-Entwicklung und hat für hunderte Marken langsam ladende Storefronts analysiert. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von hunderten Shopify-Stores genutzt wird und eine 5.0-Bewertung im Shopify App Store hat.


Komprimiert Shopify Bilder automatisch?

Teilweise.

Shopify erledigt automatisch Folgendes:

Was Shopify NICHT tut:

Also ja, Shopify hilft – aber mit einem bereits komprimierten Bild zu starten, gibt dem CDN weniger Arbeit und beschleunigt die Sache zusätzlich.


Warum Bildkomprimierung für deinen Shopify-Store wichtig ist

Die Seitengeschwindigkeit wirkt sich direkt auf zwei Dinge aus: SEO-Rankings und Conversion-Rate.

Google nutzt die Core Web Vitals als Rankingsignal. Die wichtigste Kennzahl, die durch große Bilder beeinflusst wird, ist der Largest Contentful Paint (LCP) – also die Zeit, die das größte Element auf der Seite (meist ein Hero-Image oder ein Produktfoto) zum Laden benötigt.

Langsamer LCP = schlechtere Rankings. Und für jede 100 ms zusätzliche Ladezeit sinkt die Conversion-Rate. Komprimierte Bilder sind der schnellste Hebel für die meisten Shopify-Stores.


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

BildtypFormatMax. DateigrößeMax. Abmessungen
ProduktbildWebP oder JPEG500KB2048 × 2048px
Hero / BannerWebP oder JPEG1MB2560 × 1440px
HintergrundbildWebP oder JPEG800KB1920 × 1080px
Icon / LogoPNG oder SVG100KBNach Bedarf

Tipp: Du brauchst keine Bilder, die breiter als 2048 px sind. Die maximale Anzeigebreite von Shopify beträgt 2048 px – alles, was darüber hinausgeht, erhöht nur die Dateigröße, ohne die Qualität zu verbessern.


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.

Langsamer Shop kostet Sales? Fudge schreibt sauberen, schnellen Code.
Try Fudge for Free

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:

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.


Welches Bildformat sollte ich für Shopify verwenden?

Verwende WebP für die beste Kombination aus Qualität und Dateigröße – es ist in der Regel 25–35 % kleiner als JPEG bei gleicher visueller Qualität 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 GIFs für alles außer kurzen animierten Loops – nutze stattdessen kurze MP4-Videos für eine bessere Komprimierung. Siehe auch: how to lazy load images in Shopify für den nächsten Schritt bei der Performance-Optimierung der Bilder.

Jacques's signature
Baue einen schnellen Shopify-Store ohne Code anzufassen.

You might also be interested in

So fügen Sie ein Video zur Shopify-Produktgalerie hinzu (2026)
Erfahren Sie, wie Sie Videos zu Ihrer Shopify-Produktgalerie hinzufügen. MP4-Dateien hochladen oder YouTube- und Vimeo-URLs einbetten.
So ändern Sie das Hero-Image in Shopify (2026)
Erfahren Sie, wie Sie das Hero-Image in Shopify mit dem Theme-Editor ändern. Inklusive empfohlener Bildgrößen, Formate und Tipps für die mobile Anzeige. Guide 2026.
So fügst du animierte Inhalte in Shopify hinzu (2026)
Ein vollständiger Guide zum Hinzufügen von Animationen in deinem Shopify Store. Deckt GIFs, CSS-Animationen, Lottie und Videohintergründe ab.