Shopify WebP & AVIF: Konvertiert Shopify Bilder automatisch? (Leitfaden 2026)

Optimieren Sie das Laden von Shopify-Bildern in 60 Sekunden

Führen Sie einen kostenlosen Geschwindigkeitstest in Ihrem Shop durch – Wenn Bilder Ihre Punktzahl nach unten ziehen, werden in der Diagnose Warnungen wie „Bilder in der richtigen Größe anpassen“ oder „Bilder in Formaten der nächsten Generation bereitstellen“ angezeigt. Während Shopify die Formatkonvertierung übernimmt, Thunder Page Speed Optimizer befasst sich mit der anderen Hälfte der Bildleistung:

Lazy lädt Offscreen-Bilder, damit sie das anfängliche Rendern der Seite nicht blockieren
Lädt Ihr Hero-/LCP-Bild vorab für schnelleres „above-the-fold“-Rendering
Verzögert App-Bilder und Skripts von Drittanbietern, die das Laden von Bildern verlangsamen
Optimiert die Reihenfolge beim Laden von Ressourcen, sodass Bilder schneller angezeigt werden

Formatkonvertierung + Ladeoptimierung = maximale Bildgeschwindigkeit. Thunder übernimmt die Ladeseite mit einem Klick.

So funktioniert die automatische WebP- und AVIF-Konvertierung von Shopify

Wenn jemand Ihren Shopify-Shop besucht, sendet sein Browser eine HTTP-Anfrage mit einem Akzeptieren -Header mit den unterstützten Bildformaten. Ein moderner Chrome-Browser sendet etwa Folgendes: image/avif,image/webp,image/apng,image/*. Das CDN von Shopify liest diesen Header und stellt das beste verfügbare Format bereit.

Die Prioritätsreihenfolge ist: AVIF → WebP → Originalformat. Wenn der Browser AVIF unterstützt und Die AVIF-Version ist kleiner als die WebP-Version für dieses bestimmte Bild, Shopify stellt AVIF bereit. Andernfalls wird auf WebP zurückgegriffen. Wenn der Browser keines von beiden unterstützt (im Jahr 2026 äußerst selten), stellt er das ursprüngliche JPEG oder PNG bereit.

Dies geschieht auf CDN-Ebene – es sind keine Änderungen am Theme-Code erforderlich. Shopify angekündigt automatische AVIF-Unterstützung im August 2022basiert auf der WebP-Unterstützung, die seit 2020 verfügbar ist. Die Konvertierung erfolgt serverseitig und funktioniert daher für jedes Bild, das über die Bildpipeline von Shopify bereitgestellt wird.

Was automatisch konvertiert wird

Produktbilder – hochgeladen über den Shopify-Administrator
Sammlungsbilder – ausgewählte Bilder auf Sammlungsseiten
Themenressourcen – Bilder im Assets/Ordner Ihres Themes, bereitgestellt über asset_url
Inhaltsbilder – hochgeladen über den Rich-Text-Editor in Seiten/Blogbeiträgen
Schnittbilder – Diashow, Hero-Banner, Logo und andere Bilder im Themenbereich

Die wichtigste Anforderung: Das Bild muss durchgestellt werden Shopifys CDN (URLs beginnen mit cdn.shopify.com). Jedes Bild, das die Bildpipeline von Shopify durchläuft, erhält eine automatische Formatkonvertierung.

Wenn die Bildkonvertierung von Shopify nicht funktioniert

Die automatische Konvertierung deckt die meisten Bilder ab, aber einige gängige Szenarien umgehen das CDN von Shopify vollständig. Wenn Ihr Geschwindigkeitstestergebnisse zeigt immer noch „Bilder in Formaten der nächsten Generation bereitstellen“, eine dieser Ursachen ist wahrscheinlich:

1. Benutzerdefiniertes HTML mit fest codierten URLs

Wenn Ihr Theme oder ein benutzerdefinierter Abschnitt ein Raw verwendet <img> -Tag mit einer vollständigen URL anstelle der Liquid-Filter von Shopify verwenden, kann das CDN das Format nicht abfangen und konvertieren. Dies kommt häufig bei benutzerdefinierten Abschnitten und Landingpage-Buildern vor.

Fix: Verwenden Sie Shopify Bild-URL Filter bzw img_tag -Filter in Liquid-Vorlagen. Diese leiten das Bild durch die CDN-Pipeline von Shopify.

2. CSS-Hintergrundbilder

Hintergrundbilder über CSS eingestellt Hintergrundbild: URL(...) durchlaufen Sie nicht den Inhaltsverhandlungsprozess von Shopify. CSS sendet Accept-Header nicht auf die gleiche Weise <img> -Tags tun dies, sodass das CDN das Originalformat bereitstellt.

Fix: Ersetzen Sie CSS-Hintergründe durch <img> -Tags mit Objektanpassung: Abdeckung für den gleichen visuellen Effekt, jedoch mit CDN-Formatkonvertierung.

3. App-injizierte Bilder

Many Shopify apps load their own images — review photos, trust badges, popup graphics, product recommendation thumbnails. These often come from the app's own CDN, not Shopify's, so they skip format conversion entirely. Review apps are the most common offender, loading dozens of user-uploaded photos in JPEG.

Fix: Wenden Sie sich an den App-Entwickler oder verwenden Sie eine App, die Bilder über das CDN von Shopify bereitstellt. Donner hilft durch Zurückstellen von App-geladenen Bildern , damit das Rendern nicht blockiert wird.

4. Externe und Metafeld-Bilder

Bilder, die in Metafeldern gespeichert sind und auf die ohne zugegriffen werden kann Bild-URL -Filter oder Bilder, die auf externen Diensten (Cloudinary, Imgix, Ihrem eigenen Server) gehostet werden, umgehen das CDN von Shopify vollständig.

Fix: Bei Metafeldbildern weiterleiten | image_url in Ihrer Liquid-Vorlage. Für externe Bilder verwenden Sie die eigene WebP/AVIF-Konvertierung des externen Dienstes.

WebP vs. AVIF vs. JPEG vs. PNG: Vergleich der Shopify-Bildformate

Das Verständnis der Unterschiede hilft Ihnen, bessere Entscheidungen über Quell-Uploads zu treffen und Formatprobleme zu beheben. So funktionieren die einzelnen Formate bei typischer Shopify-Produktfotografie:

Format	Dateigröße (im Vergleich zu JPEG)	Qualität	Browser-Unterstützung	Transparenz	Am besten für
JPEG	Grundlinie	Gut	100%	❌ Nein	Universeller Fallback
PNG	2-5× größer	Verlustfrei	100%	✅ Ja	Logos, Icons, Transparenz
WebP	25-35% kleiner	Ausgezeichnet	97%+	✅ Ja	Die meisten Produktfotos
AVIF	30-50% kleiner	Am besten bei niedriger Bitrate	~93%	✅ Ja	Hochkomprimierte Heldenbilder

For most Shopify stores, you don't need to choose. Upload high-quality JPEG or PNG source files, and Shopify's CDN picks the optimal format per visitor. The real performance gains come from proper sizing (don't upload 4000px images for 400px displays) and Optimieren, wie Bilder geladen werden – Lazy Loading, Preloading und responsive Srcsets.

So überprüfen Sie, ob Ihr Shopify-Shop WebP und AVIF unterstützt

Möchten Sie überprüfen, ob Ihre Bilder konvertiert werden? Hier ist eine kurze Überprüfung mit Chrome DevTools:

Öffnen Sie Ihren Store in Chrome und drücken Sie F12 (oder Cmd+Option+I auf dem Mac), um DevTools zu öffnen
Klicken Sie auf Registerkarte Netzwerk
Laden Sie die Seite neu (Strg+R / Befehl+R)
Klicken Sie auf Registerkarte Bild Filter, um nur Bilder anzuzeigen
Schauen Sie sich das an Spalte Typ – Sie sollten sehen webp oder Avif statt jpeg oder png
Klicken Sie auf ein beliebiges Bild und überprüfen Sie das Antwortheader – suchen Inhaltstyp: Bild/Webp oder Inhaltstyp: Bild/Avif

Wenn Sie sehen jpeg oder png Bei Bildern im CDN von Shopify (cdn.shopify.com) verhindert etwas die Konvertierung. Überprüfen Sie, ob das Bild-Tag in Ihrem Theme-Code die Liquid-Bildfilter von Shopify verwendet.

Für ein umfassenderes Leistungsbild, das über die reinen Bildformate hinausgeht, unser Shopify-Geschwindigkeitsaudit-Leitfaden durchläuft den gesamten Diagnoseprozess.

Best Practices für das Hochladen von Bildern für Shopify WebP und AVIF

Die automatische Konvertierung von Shopify funktioniert am besten, wenn Sie ordnungsgemäß vorbereitete Quelldateien hochladen. Hier sind die Regeln, die maximale Qualität bei minimaler Dateigröße gewährleisten:

✅ Tun Sie dies

Laden Sie das Original-JPEG oder PNG hoch – Überlassen Sie Shopify die Konvertierung. Die Qualität der Quelle ist wichtiger als das Format der Quelle.
Passen Sie die Größe der Bilder an – Produktbilder mit maximal 2048×2048 Pixeln (von Shopify empfohlenes Maximum). Heldenbilder in den genauen Abmessungen, die Ihr Theme verwendet (normalerweise 1920 x 800 Pixel oder ähnlich).
Verwenden Sie JPEG für Produktfotos – kleinere Quelldatei, besserer Komprimierungsstartpunkt.
Verwenden Sie PNG nur, wenn Sie Transparenz benötigen – Logos, Symbole, Overlays. PNG für Produktfotos verschwendet Bandbreite.
Vor dem Hochladen komprimieren – Verwenden Sie TinyPNG oder Squoosh, um Metadaten zu entfernen und die Quelldatei zu optimieren. Shopify konvertiert das Format, aber es hilft, mit einer sauberen Quelle zu beginnen.

❌ Vermeiden Sie dies

Laden Sie keine vorkonvertierten WebP-Dateien hoch — Shopify may double-compress them, creating artifacts and potentially larger files than converting from the original JPEG.
Laden Sie keine Produktfotos mit 6000 Pixel hoch – Shopify ändert die Größe, aber das Original belegt immer noch Speicherplatz und verlangsamt die Verwaltungsvorgänge.
Verwenden Sie kein BMP oder TIFF – riesige Dateien, die nichts bringen. Konvertieren Sie zuerst in JPEG/PNG.
Verlassen Sie sich nicht nur auf das Format – ein WebP-Bild mit 4000 Pixel ist immer noch langsamer als ein JPEG mit 800 Pixel in der richtigen Größe. Abmessungen sind wichtiger als das Format.

Manuelle WebP-Steuerung mit Shopify Liquid

Während Shopify die Formatkonvertierung in den meisten Fällen automatisch durchführt, benötigen Theme-Entwickler manchmal eine manuelle Steuerung. Shopify's Liquid bietet das Bild-URL Filter mit a -Format Parameter:

<!-- Force WebP format -->
{{ product.featured_image | image_url: width: 800, format: 'webp' }}

<!-- Let Shopify auto-negotiate (recommended) -->
{{ product.featured_image | image_url: width: 800 }}

<!-- Responsive with srcset (auto-format per browser) -->
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy"
  width="800"
  height="800"
/>

In den meisten Fällen Das Weglassen des Formatparameters ist besser. Dadurch kann Shopify AVIF für Browser bereitstellen, die es unterstützen (kleiner als WebP), und WebP für den Rest. Erzwingen -Format: 'webp' verhindert die AVIF-Übermittlung, was für Chrome- und Firefox-Benutzer, die AVIF empfangen könnten, größere Dateien bedeutet.

Weitere Informationen darüber, wie das Laden von Bildern mit der CSS- und JavaScript-Optimierung interagiert, finden Sie in unserem Leitfaden zur LCP-Optimierung — the hero image (often your largest image) is typically the LCP element and benefits most from format + loading optimization combined.

Wie sich WebP und AVIF auf Shopify Core Web Vitals auswirken

Das Bildformat wirkt sich direkt auf zwei Core Web Vitals-Metriken aus, die sich auf Sie auswirken SEO-Rankings:

LCP (Größte Contentful Paint)

Your hero image or largest product photo is usually the LCP element. Switching from JPEG to WebP can reduce this image's download time by 25-35%. Going from JPEG to AVIF can reduce it by 30-50%. On a 4G mobile connection, that can mean 200-500ms faster LCP. Combined with preloading and Ressourcenhinweise, Formatoptimierung kann LCP unter den 2,5-Sekunden-Schwellenwert drücken.

CLS (Cumulative Layout Shift)

Das Bildformat wirkt sich nicht direkt auf CLS aus, steht aber in Zusammenhang. Durch schnelleres Laden von Bildern (dank WebP/AVIF) wird die Wahrscheinlichkeit verringert, dass Bilder durch eine späte Wiedergabe Layoutverschiebungen verursachen. Der größere CLS-Fix ist die Einstellung explizit Breite und Höhe Attribute ein <img> -Tags – siehe unsere CLS-Reparaturanleitung für Details.

Das vollständige Bild zu Core Web Vitals finden Sie in unserem Shopify Core Web Vitals-Leitfaden deckt alle drei Metriken und ihre Interaktion ab.

⚡ Thunder + Shopifys automatische Konvertierung = Maximale Bildgeschwindigkeit

Shopify übernimmt die Formatkonvertierung (WebP/AVIF). Thunder kümmert sich um alles andere:

Optimierung	Shopify CDN	Thunder
WebP/AVIF-Konvertierung	✅ Automatisch	—
Verzögertes Laden von Offscreen-Bildern	—	✅ Automatisch
Vorladen von Hero/LCP-Bildern	—	✅ Automatisch
Skriptverzögerung (schnellere Bildwiedergabe)	—	✅ Automatisch
CSS-Optimierung (Rendering entsperren)	—	✅ Automatisch

Gemeinsam verbessern sich in der Regel die Formatkonvertierung von Shopify und die Ladeoptimierung von Thunder Gesamtgeschwindigkeitswerte um 27+ Punkte. Pläne beginnen bei 19,99 $/Monat mit einer kostenlosen Testversion.

Häufig gestellte Fragen

Konvertiert Shopify Bilder automatisch in WebP?

Ja. Das CDN von Shopify stellt Bilder automatisch im WebP-Format bereit, wenn der Browser des Besuchers dies unterstützt. Dies geschieht durch Inhaltsaushandlung – der Browser sendet einen Accept-Header, der die unterstützten Formate auflistet, und das CDN von Shopify antwortet mit WebP, wenn es unterstützt wird. Sie müssen WebP-Dateien nicht manuell hochladen. Dies funktioniert jedoch nur für Bilder, die über das CDN von Shopify unter Verwendung des image_url Liquid-Filters oder Standard-Theme-Bild-Tags bereitgestellt werden. Benutzerdefiniertes HTML mit fest codierten Bild-URLs umgeht diese Optimierung.

Unterstützt Shopify AVIF-Bilder?

Ja. Seit August 2022 liefert das CDN von Shopify Bilder automatisch im AVIF-Format, wenn der Browser dies unterstützt und wenn AVIF für dieses bestimmte Bild eine kleinere Datei als WebP erzeugt. AVIF erreicht normalerweise 20–50 % kleinere Dateigrößen als WebP, aber die Kodierung ist langsamer und nicht jedes Bild profitiert gleichermaßen. Shopify trifft diese Entscheidung automatisch – es vergleicht die WebP- und AVIF-Ausgabe für jedes Bild und stellt das kleinere Bild bereit.

Soll ich WebP-Bilder auf Shopify hochladen oder die automatische Konvertierung zulassen?

Laden Sie Ihre originalen JPEG- oder PNG-Dateien in hoher Qualität hoch und lassen Sie Shopify automatisch konvertieren. Das Hochladen vorkonvertierter WebP-Dateien kann tatsächlich nach hinten losgehen – Shopify komprimiert sie möglicherweise erneut, was zu doppelten Komprimierungsartefakten und größeren Dateigrößen führt, als wenn Sie das Original hochgeladen hätten. Die Ausnahme besteht, wenn Sie Transparenz benötigen: Laden Sie PNG für Transparenzanforderungen hoch, und Shopify konvertiert in WebP mit Alpha-Kanal-Unterstützung.

Warum werden meine Shopify-Bilder nicht als WebP bereitgestellt?

Häufige Gründe: (1) Bilder, die über benutzerdefiniertes HTML oder externe URLs geladen werden, umgehen die CDN-Konvertierung von Shopify. (2) In CSS festgelegte Hintergrundbilder durchlaufen nicht die Bildpipeline von Shopify. (3) App-injizierte Bilder können ihr eigenes CDN verwenden. (4) Metafeldbilder, auf die ohne den image_url-Filter zugegriffen wird, werden nicht konvertiert. (5) Der Browser des Besuchers unterstützt WebP nicht (selten im Jahr 2026 – über 97 % der Browser unterstützen es). Überprüfen Sie die Registerkarte „Netzwerk“ von Chrome DevTools, filtern Sie nach „Img“ und sehen Sie sich die Spalte „Typ“ an.

Was ist der Unterschied zwischen WebP und AVIF für Shopify-Shops?

WebP reduziert die Dateigröße um 25–35 % im Vergleich zu JPEG bei nahezu identischer Qualität und bietet eine Browserunterstützung von über 97 %. AVIF reduziert die Dateigröße um 30–50 % im Vergleich zu JPEG mit etwas besserer Qualität bei niedrigen Bitraten, aber die Browserunterstützung liegt bei etwa 93 % (kein IE11, eingeschränkt auf ältere iOS-Geräte). Bei Shopify-Shops müssen Sie sich nicht entscheiden – das CDN von Shopify stellt automatisch das beste Format für den Browser jedes Besuchers bereit. AVIF wird bereitgestellt, wenn es unterstützt wird und eine kleinere Datei als WebP erzeugt.

Benötige ich eine Bildoptimierungs-App, wenn Shopify automatisch zu WebP konvertiert?

Die automatische Formatkonvertierung von Shopify kümmert sich um die Formatseite, aber nicht um alles. Sie profitieren weiterhin von: (1) der richtigen Bildgröße – das Hochladen eines 4000-Pixel-Bildes für eine 400-Pixel-Anzeige verschwendet Bandbreite, selbst in WebP, (2) verzögertem Laden für Bilder im unteren Bereich, (3) responsiven SRCSet-Attributen für verschiedene Bildschirmgrößen und (4) Alt-Text-Optimierung für SEO. Thunder Page Speed Optimizer übernimmt die Bildladeoptimierung (Lazy Loading, Vorladen von Hero-Bildern, verzögerte Offscreen-Bilder) als Teil seiner umfassenderen Geschwindigkeitsoptimierung.

Lassen Sie Ihre Shopify-Bilder mit maximaler Geschwindigkeit laden

Die automatische WebP- und AVIF-Konvertierung von Shopify ist eine solide Grundlage – sie übernimmt die Formatoptimierung für die meisten Bilder ohne Ihr Zutun. Die Lücken (benutzerdefiniertes HTML, CSS-Hintergründe, App-Bilder) können durch die richtige Verwendung von Liquid und intelligente Theme-Entwicklung behoben werden.

Aber das Format ist nur die halbe Gleichung für die Bildgeschwindigkeit. Wie Bilder laden ist genauso wichtig wie wie sie sind kodiert. Lazy Loading, das Vorladen des LCP-Bildes und das Zurückstellen von Ressourcen, die das Rendern blockieren, tragen alle zu einer schnelleren Bildwiedergabe bei. Thunder Page Speed Optimizer übernimmt die Ladeseite automatisch.

Testen Sie jetzt die Image-Performance Ihres Shops – und überprüfen Sie die Diagnose auf verbleibende Möglichkeiten zur Bildoptimierung. Das vollständige Optimierungs-Playbook finden Sie in unserem Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.

⚡

Expert Speed Optimization for Your Store

Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.

Get Your Free Speed Audit →

✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder

Starting from €1,500 · Learn more

Shopify WebP- und AVIF-Bilder: Konvertiert Shopify? Automatisch? (2026)