Shopify WebP- und AVIF-Bilder: Konvertiert Shopify? Automatisch? (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 der Browser eine HTTP-Anfrage mit einem Accept-Header, der die unterstützten Bildformate aufführt. Ein aktueller Chrome-Browser sendet beispielsweise image/avif,image/webp,image/apng,image/*. Das CDN von Shopify liest diesen Header und liefert das beste verfügbare Format aus.

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 Voraussetzung: Das Bild muss über das CDN von Shopify bereitgestellt werden (die URL beginnt mit cdn.shopify.com). Jedes Bild, das die Bildpipeline von Shopify durchläuft, wird automatisch in das passende Format konvertiert.

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:

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:

Für die meisten Shopify-Shops müssen Sie sich nicht für ein Format entscheiden. Laden Sie hochwertige JPEG- oder PNG-Quelldateien hoch; das CDN von Shopify wählt für jeden Besucher das optimale Format. Die größten Leistungsgewinne erzielen Sie durch die richtige Größenanpassung – laden Sie kein 4000 px breites Bild für eine 400 px breite Darstellung – und durch optimiertes Laden von Bildern mit Lazy Loading, Preloading und responsiven 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:

1. Öffnen Sie Ihren Store in Chrome und drücken Sie F12 (oder Cmd+Option+I auf dem Mac), um DevTools zu öffnen
2. Klicken Sie auf Registerkarte Netzwerk
3. Laden Sie die Seite neu (Strg+R / Befehl+R)
4. Klicken Sie auf Registerkarte Bild Filter, um nur Bilder anzuzeigen
5. Schauen Sie sich das an Spalte Typ – dort sollte webp oder avif statt jpeg oder png stehen
6. Klicken Sie auf ein Bild und prüfen Sie die Antwort-Header – suchen Sie nach content-type: image/webp oder content-type: image/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:

Manuelle WebP-Steuerung mit Shopify Liquid

Shopify übernimmt die Formatkonvertierung in den meisten Fällen automatisch; Shopify-Theme-Entwickler benötigen jedoch manchmal mehr Kontrolle. Dafür bietet Shopify Liquid den Filter image_url mit dem Parameter format:

<!-- 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 ist es besser, den Formatparameter wegzulassen. So kann Shopify AVIF an kompatible Browser ausliefern, wenn es kleiner als WebP ist, und WebP an die übrigen. Das Erzwingen von format: 'webp' verhindert die AVIF-Auslieferung und kann für Nutzer von Chrome und Firefox zu größeren Dateien führen.

Weitere Informationen darüber, wie das Laden von Bildern mit der CSS- und JavaScript-Optimierung interagiert, finden Sie in unserem Leitfaden zur LCP-Optimierung — das Hero-Bild (oft Ihr größtes Bild) ist typischerweise das LCP-Element und profitiert am meisten von der Kombination aus Format- und Ladeoptimierung.

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:

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.

Häufig gestellte Fragen

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.