Warum Bildoptimierung wichtig ist
Bilder machen normalerweise aus 50–80 % des gesamten Seitengewichts in Shopify-Shops. Ein einzelnes unkomprimiertes Produktfoto kann 3–8 MB groß sein, obwohl es 100–300 KB groß sein sollte. Dies wirkt sich direkt auf Folgendes aus:
40–70%
of page weight comes from images
LCP
Das Heldenbild ist normalerweise das LCP-Element
SEO
Die Bildersuche sorgt für erheblichen E-Commerce-Verkehr
Nicht optimierte Bilder verlangsamen das Laden Ihrer Seite, beeinträchtigen Ihre Core Web Vitals (insbesondere LCP). Erhöhen Sie die Absprungraten und beeinträchtigen Sie die Conversionsund verschwenden Sie die mobilen Daten Ihrer Besucher. Die gute Nachricht: Die Bildoptimierung ist eine der einfachsten und wirkungsvollsten Geschwindigkeitsverbesserungen, die Sie vornehmen können. Möchten Sie sehen, wo Ihr Geschäft steht? Testen Sie die Geschwindigkeit Ihres Shops , um herauszufinden, wie sehr Bilder Sie verlangsamen.
Die einfache Lösung: Automatische Bildoptimierung
Bevor wir uns unten mit den manuellen Techniken befassen – Thunder Page Speed Optimizer übernimmt die Bildoptimierung automatisch sowie Skriptverzögerung, CSS-Inlining und Schriftartenoptimierung.
Was Thunder automatisch verarbeitet:
Intelligentes verzögertes Laden
Lazy lädt Below-Fold-Bilder und hält Heldenbilder für schnelles LCP bereit
WebP/Responsive Sizing
Stellt sicher, dass Bilder im optimalen Format und in optimalen Abmessungen bereitgestellt werden
Skriptverzögerung
Verschiebt renderblockierende Skripte, damit Bilder früher geladen werden
Kritische CSS- und Schriftartenoptimierung
Vollständige Optimierung der Seitengeschwindigkeit – nicht nur Bilder
Durchschnittliche Verbesserung: +27 PageSpeed-Punkte
Thunder optimiert Bilder als Teil einer umfassenden Geschwindigkeitslösung. 30-Sekunden-Einrichtung, keine Codeänderungen, funktioniert mit allen Themes.
Kostenloser Plan verfügbar · Keine Kreditkarte erforderlich · 30-Sekunden-Einrichtung · Funktioniert mit allen Themen
Bildformate: WebP, AVIF, JPEG, PNG
Das von Ihnen verwendete Format hat einen massiven Einfluss auf die Dateigröße. Folgendes müssen Sie wissen:
WebP – Beste Gesamtwahl
25–35 % kleiner als JPEG bei gleicher Qualität. Unterstützt von über 97 % der Browser. Das CDN von Shopify wird automatisch in WebP konvertiert, wenn Sie das verwenden Bild-URL Flüssigkeitsfilter.
AVIF – Am effizientesten (aufstrebend)
50 % kleiner als JPEG. Langsamere Kodierung und etwas weniger Browserunterstützung (~93 %). Am besten für Geschäfte geeignet, die maximale Komprimierung benötigen. Shopify führt noch keine automatische Konvertierung in AVIF durch.
JPEG – Der Standard
Am besten für Fotos geeignet. Laden Sie hochwertige JPEGs hoch und überlassen Sie die WebP-Konvertierung dem CDN von Shopify. Verwenden Sie eine Qualität von 80–85 %, um das beste Verhältnis zwischen Größe und Qualität zu erzielen.
PNG – Nur für Transparenz
Verwenden Sie PNG nur, wenn Sie Transparenz benötigen (Logos, Symbole). PNGs sind bei Fotos 3–10x größer als JPEGs. Verwenden Sie niemals PNG für Produktfotos.
Komprimierung: So reduzieren Sie die Dateigröße
⚡ Überspringen Sie diesen Schritt: Thunder optimiert die Bildbereitstellung automatisch. Um die besten Ergebnisse zu erzielen, empfiehlt es sich jedoch, vor dem Hochladen zu komprimieren.
Shopify schon nicht komprimieren Sie Ihre ursprünglichen Uploads. Wenn Sie ein 5-MB-Bild hochladen, wird diese 5-MB-Datei unverändert gespeichert. Sie müssen vor dem Hochladen komprimieren:
- Squoosh – Googles kostenloses Tool. Ziehen Sie den Schieberegler für die Qualität, legen Sie ihn ab und passen Sie ihn an. Am besten für einmalige Bilder geeignet.
- TinyPNG – Stapelkomprimierung. Laden Sie bis zu 20 Bilder gleichzeitig hoch (kostenloses Kontingent).
- Ziel: Unter 200 KB pro Produktbild, unter 150 KB für Miniaturansichten der Sammlung, unter 300 KB für Heldenbilder.
Typische Komprimierungsergebnisse:
Originalproduktfoto: 3,2 MB (4000×4000 PNG)
Nach der Größenänderung auf 2048 Pixel: 1,8 MB
Nach JPEG-Konvertierung: 420 KB
Nach Qualität 82 %: 180 KB ← Laden Sie dies auf Shopify hoch
Shopify dient als WebP: ~130 KB ← Was Besucher herunterladenDimensionierung: Laden Sie die richtigen Abmessungen hoch
Das Hochladen übergroßer Bilder ist einer der häufigsten Fehler. Ein 4000×4000 Pixel großes Bild, das mit 800×800 Pixel angezeigt wird, verschwendet 96 % seiner Pixel. Dies ist besonders kostspielig für mobile Besucher, die häufig langsamere Verbindungen und kleinere Bildschirme nutzen.
| Bildtyp | Empfohlene Größe | Zieldateigröße |
|---|---|---|
| Produktbilder | 2048×2048px (quadratisch) | 100–200 KB |
| Miniaturansichten der Sammlung | 800×800px | 50–100 KB |
| Helden-/Bannerbilder | 1600–2000 Pixel breit | 150–300 KB |
| Bilder von Blogbeiträgen | 1200px breit | 100–200 KB |
| Logos/Symbole | Nach Bedarf (SVG bevorzugt) | Unter 20 KB |
Lazy Loading: Bilder nach Bedarf laden
Lazy Loading verzögert das Laden von Bildern, bis der Benutzer in deren Nähe scrollt. Dadurch wird das anfängliche Seitengewicht drastisch reduziert – a Sammlungsseite lädt bei 40 Produkten nur die ersten 4–8 Bilder im Voraus. Weitere Informationen zu Implementierungsstrategien finden Sie in unserem speziellen Artikel Shopify Lazy Loading-Anleitung.
<!-- ✅ Below-fold images: lazy load -->
<img src="product.jpg" loading="lazy" alt="...">
<!-- ✅ Hero/LCP image: load eagerly -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">
<!-- ❌ Don't lazy-load your hero image -->
<img src="hero.jpg" loading="lazy" alt="...">Kritische Regel: Laden Sie niemals Ihr Heldenbild oder Ihre Produktbilder über dem Falz herunter. Dies schadet LCP, da der Browser das wichtigste Bild absichtlich verzögert. Thunder übernimmt diese Unterscheidung automatisch.
Responsive Bilder mit srcset
Responsive Bilder bieten unterschiedliche Größen für unterschiedliche Bildschirmgrößen. Ein Telefon erhält ein 400-Pixel-Bild; Ein Desktop erhält 1200 Pixel. Dies spart Bandbreite auf Mobilgeräten.
<img
src="{{ image | image_url: width: 800 }}"
srcset="
{{ image | image_url: width: 400 }} 400w,
{{ image | image_url: width: 800 }} 800w,
{{ image | image_url: width: 1200 }} 1200w
"
sizes="(max-width: 768px) 100vw, 50vw"
width="800" height="800"
alt="{{ image.alt }}"
loading="lazy"
>
Die meisten modernen Shopify-Themes umfassen Quelle -Unterstützung. Überprüfen Sie zur Verifizierung die Bildabschnitte Ihres Themes.
Alt-Text für SEO
Alt-Text dient zwei Zwecken: Barrierefreiheit (Screenreader) und SEO (Google Bildersuche). Guter Alternativtext ist beschreibend, prägnant und natürlich.
alt="IMG_4523" – bedeutungslos
alt="Tasche Ledertasche Umhängetasche Damentasche" – Keyword-Stuffing
alt="Umhängetasche aus rotem Leder mit goldener Hardware" – beschreibend und natürlich
Legen Sie in Shopify für jedes Produktbild im Produkteditor Alternativtext fest. Fügen Sie für Themenbilder Alternativtext in den Abschnittseinstellungen oder direkt in der Liquid-Vorlage hinzu.
Shopifys integriertes Image-CDN
Shopify automatically serves your images through a CDN (via Cloudflare), meaning they're delivered from servers close to your visitors worldwide. The CDN also handles:
- Automatische WebP-Konvertierung – wenn Sie das verwenden
Bild-URLFlüssigkeitsfilter - Größenänderung im laufenden Betrieb – spezifische Größen anfragen mit
| Bild-URL: Breite: 800 - Caching – Bilder werden zur schnellen Bereitstellung an Randstandorten zwischengespeichert
Sie benötigen kein separates Image-CDN oder Optimierungsdienst. Aber das CDN komprimiert Ihre Originale nicht und kümmert sich auch nicht um Lazy Loading – das liegt in Ihrer Verantwortung (oder in der von Thunder). Eine vollständige Anleitung zu allen verfügbaren Optimierungshebeln finden Sie in unserem Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.
Manuelle Bildoptimierung vs. Thunder
📸 2026-Update: Was ist neu in der Shopify-Bildoptimierung?
- → Die AVIF-Unterstützung nimmt zu. Während WebP die sichere Standardeinstellung bleibt (über 97 % Browserunterstützung), bietet AVIF 20–30 % kleinere Dateien als WebP. Das CDN von Shopify stellt AVIF noch nicht automatisch bereit, aber es kommt. Im Moment ist WebP die beste Wahl.
- → LCP ist das Core Web Vital Nr. 1 für Bilder. Ihr Heldenbild ist fast immer das LCP-Element. Es darf NICHT Lazy-Loaded sein – verwenden
Stattdessen
fetchpriority="hoch" Stattdessen. Sehen Sie sich unsere an Leitfaden zur LCP-Optimierung. - → Bilderlastige Geschäfte verzeichnen die größten Geschwindigkeitsgewinne. Geschäfte mit mehr als 50 Produkten haben in der Regel 40–70 % des Seitengewichts in Bildern. Richtige Optimierung kann steigert die Conversions um 8–15 % allein durch Geschwindigkeitsverbesserungen.
- → Sammelseiten sind die schlimmsten Übeltäter. Eine Sammlung mit 48 Produkten, die alle Bilder auf einmal lädt, kann die Seitengröße um 5–15 MB erhöhen. Sammlungsspezifische Optimierung ist unerlässlich.
Überprüfen Sie die Image-Leistung Ihres Shops: Führen Sie einen kostenlosen Geschwindigkeitstest durch →
Häufig gestellte Fragen
Was ist das beste Bildformat für Shopify?
WebP ist das beste Gesamtformat für Shopify im Jahr 2026 – es wird von über 97 % der Browser unterstützt und bietet 25–35 % kleinere Dateien als JPEG bei gleicher Qualität. Das CDN von Shopify stellt WebP automatisch bereit, wenn Sie den Liquid-Filter image_url verwenden. Thunder stellt außerdem sicher, dass alle Bilder automatisch in optimalen Formaten bereitgestellt werden.
Welche Größe sollten Shopify-Produktbilder haben?
Laden Sie Produktbilder mit maximal 2048×2048 Pixel hoch – dies sorgt für scharfe Qualität auf Retina-Displays und hält gleichzeitig die Dateigröße überschaubar. Das CDN von Shopify bietet je nach Anzeigegerät unterschiedliche Größen. Für Sammlungs-Thumbnails sind 800×800 Pixel ausreichend. Helden-/Bannerbilder sollten 1600–2000 Pixel breit sein.
Optimiert Shopify Bilder automatisch?
Teilweise. Das CDN von Shopify stellt automatisch das WebP-Format bereit und bietet eine reaktionsfähige Größenanpassung durch den image_url Liquid-Filter. Allerdings komprimiert Shopify Ihre ursprünglichen Uploads NICHT – wenn Sie ein 5-MB-Bild hochladen, wird diese 5-MB-Datei unverändert gespeichert. Sie müssen Bilder vor dem Hochladen komprimieren oder Thunder verwenden, das die Bildoptimierung automatisch übernimmt.
Sollte ich eine Bildoptimierungs-App auf Shopify verwenden?
Für Geschäfte mit mehr als einer Handvoll Produkten, ja. Das manuelle Komprimieren jedes Bildes ist zeitaufwändig und kann leicht vergessen werden. Thunder übernimmt die Bildoptimierung als Teil seiner vollständigen Geschwindigkeitsoptimierung – Lazy Loading, reaktionsfähige Größenanpassung und Formatkonvertierung neben Skriptverzögerung und CSS-Inlining. Dieser umfassende Ansatz führt normalerweise zu einer Verbesserung des PageSpeed um +27 Punkte.
Wie schreibe ich guten Alternativtext für Shopify-Produktbilder?
Guter Alternativtext ist beschreibend, prägnant und natürlich. Beschreiben Sie, was auf dem Bild zu sehen ist: „Umhängetasche aus rotem Leder mit goldenen Beschlägen“ ist besser als „Tasche“ oder „IMG_4523“. Geben Sie Ihren Produktnamen natürlich an. Halten Sie die Länge unter 125 Zeichen. Füllen Sie keine Schlüsselwörter auf – schreiben Sie für eine Person, die das Bild nicht sehen kann.
Beeinflusst die Bildoptimierung die Suchmaschinenoptimierung von Shopify?
Ja, in mehrfacher Hinsicht. Optimierte Bilder verbessern die Seitengeschwindigkeit (Core Web Vitals), was ein direktes Google-Ranking-Signal ist. Beschreibender Alternativtext hilft beim Ranking in der Google-Bildersuche. Bilder in der richtigen Größe verhindern Layout Shift (CLS), ein weiteres zentrales Web-Vital. Thunder optimiert alle diese Aspekte automatisch.
Wie optimiere ich Bilder auf Shopify ohne App?
Vor dem Hochladen: Komprimieren Sie Bilder mit TinyPNG oder Squoosh auf unter 200 KB, speichern Sie sie als WebP oder JPEG (nicht PNG für Fotos) und ändern Sie die Größe auf maximal 2048 Pixel. Verwenden Sie in Liquid-Vorlagen den image_url-Filter mit Breitenparametern für eine reaktionsfähige Größenanpassung. Fügen Sie „loading=‘lazy‘“ zu „Below-Fold“-Bildern und „fetchpriority=‘high‘“ zu Ihrem Heldenbild hinzu. Fügen Sie jedem Bild im Shopify-Adminbereich einen beschreibenden Alternativtext hinzu.
Was ist die maximale Bilddateigröße für Shopify?
Shopify erlaubt Bilder bis zu 20 MB und 4472 x 4472 Pixel. Allerdings sollten Sie niemals so große Bilder hochladen – streben Sie nach der Komprimierung eine Größe von weniger als 200 KB pro Bild an. Große Dateien verlangsamen die Ladezeit Ihres Shops erheblich, selbst mit dem CDN von Shopify. Bei Produktbildern bietet eine Komprimierung von 100–150 KB bei 2048 x 2048 Pixeln die beste Balance zwischen Qualität und Geschwindigkeit.