⏱ 15 Min. Lesezeit

WebP und AVIF in Shopify: Was wirklich optimiert werden muss

WebP oder AVIF? Diese Frage kostet dich weniger Zeit, als du denkst, denn Shopify beantwortet sie längst für dich. Die CDN wandelt deine Bilder automatisch in moderne Formate um, sobald der Browser sie unterstützt. Trotzdem verbringen Shops Stunden damit, jedes Bild von Hand zu konvertieren oder eine Bulk-App zu installieren, die genau das doppelt macht. Echte Shopify Bildoptimierung liegt woanders: bei den Abmessungen, dem Auslieferungsweg, der Größe der Quelldatei und dem Hero-Bild. Dieser Leitfaden trennt sauber, was Shopify automatisch erledigt, von dem, was wirklich dir gehört.

Was Shopify bereits automatisch für dich tut

Der wichtigste Satz zuerst: Du musst keine WebP- oder AVIF-Dateien hochladen. Shopifys CDN erkennt über den Accept-Header des Browsers, welche Formate er unterstützt, und liefert automatisch das kleinste passende aus. WebP seit 2020, AVIF seit 2022. Das gilt für jedes Bild, das über den image_url– oder image_tag-Filter läuft, also für Produktbilder, Theme-Assets und Bilder aus dem Rich-Text-Editor.

Daraus folgt direkt der erste Mythos, den wir aus dem Weg räumen: Eine App, die deine Bibliothek massenhaft zu WebP konvertiert, erledigt Arbeit, die die CDN längst kostenlos macht. Sie fügt oft nur JavaScript hinzu, das die Seite wieder ausbremst. Wie App-Ballast entsteht, haben wir im Beitrag zu Shopify-Apps und Ladezeit beschrieben. Für die Formatkonvertierung brauchst du keine. Bulk-Format-Apps sind der häufigste Irrweg der Shopify Bildoptimierung.

WebP gegen AVIF 2026: die Kurzfassung

Beide sind moderne Formate, beide schlagen JPEG deutlich. Der Unterschied ist für die meisten Shops akademisch, weil Shopify die Wahl trifft. Zur Einordnung trotzdem die Fakten:

AVIF komprimiert Fotos noch einmal rund 30 Prozent stärker als WebP, kodiert aber langsamer und wird von etwas weniger Browsern unterstützt. In der Praxis ist WebP heute der verlässliche Standard, den du in deinem Network-Tab am häufigsten sehen wirst.

Warum du das Format meist nicht erzwingen solltest

Hier scheitern viele Anleitungen an der Realität. Laut der offiziellen Shopify-Dokumentation akzeptiert der format-Parameter von image_url nur die Werte jpg und pjpg. WebP und AVIF wählt Shopify automatisch anhand des Browsers. Ein format: 'webp' im Filter ist also kein verlässlicher Hebel. Verlass dich auf die automatische Aushandlung, statt ein Format hart vorzugeben, das die CDN ohnehin selbst am besten wählt.

Was wirklich optimiert werden muss

Wenn Shopify Format und Auslieferung übernimmt, wo verlierst du dann echte Ladezeit? An fünf Stellen, die dir gehören und die keine automatische Konvertierung für dich löst. Die folgenden Abschnitte gehen sie der Reihe nach durch. Hier beginnt die eigentliche Shopify Bildoptimierung.

1. Jedes Bild über die Liquid-Pipeline ausliefern

Das ist die Grundvoraussetzung jeder Shopify Bildoptimierung. Die automatische Format-Umwandlung greift nur bei Bildern, die über image_url oder image_tag und damit über cdn.shopify.com laufen. Diese Fälle umgehen die CDN und bekommen kein WebP:

• fest verdrahtete <img>-Tags mit kompletter URL statt Liquid-Filter,
• Hintergrundbilder in CSS,
• Bilder von externen CDNs oder aus Apps,
• Rohcode aus alten Page-Buildern.

So findest du sie: Öffne DevTools, Reiter Network, filtere auf „Img“ und lade neu. Jede Antwort, die auf einem modernen Browser als jpg oder png zurückkommt statt als webp, umgeht die Pipeline. Genau diese Bilder lösen in PageSpeed Insights die Warnung „Bilder in modernen Formaten bereitstellen“ aus, obwohl der Rest deines Shops längst WebP liefert.

2. Richtige Größe mit Abmessungen und srcset

Format spart Prozente, die richtige Größe spart ein Vielfaches. Ein 1800px-Bild, das auf einem Handy in 400px Breite angezeigt wird, verschwendet den Großteil seiner Bytes. Zwei Regeln lösen das.

Erstens: Übergib image_url immer eine Breite. Ohne width liefert der Filter die Originalgröße und überspringt die Optimierung. Zweitens: Nutze für <img>-Elemente den image_tag-Filter, der ein vollständiges srcset automatisch baut, sodass jedes Gerät die passende Größe bekommt.

{{ product.featured_image | image_tag:
   widths: '400, 800, 1200, 1600',
   sizes: '(min-width: 750px) 50vw, 100vw',
   loading: 'lazy',
   alt: product.featured_image.alt }}

Der Filter gibt ein fertiges <img> mit srcset aus, das Format wählt die CDN weiterhin selbst. Die Kontrolle im Network-Tab: Sortiere absteigend nach Größe. Ein 500-KB-Bild, das in 200×200 gerendert wird, ist das sichere Zeichen für eine fehlende oder falsche width.

3. Die Quelldatei vor dem Upload komprimieren

Der meistübersehene Teil der Shopify Bildoptimierung steckt in der Quelle: Shopify komprimiert deine hochgeladene Datei nicht. Lädst du ein 5-MB-Bild hoch, wird es als 5-MB-Original gespeichert, und alle Ableitungen werden daraus berechnet. In Audits wiegt ein durchschnittliches Hero-Bild oft über 2 MB, allein weil niemand die Quelle vorbehandelt hat. Deine Regeln vor dem Upload:

• Skaliere Fotos auf maximal rund 2048px Kantenlänge, größer braucht kein Shop.
• Exportiere als JPEG mit Qualität 80 bis 85 Prozent, das ist der Sweetspot aus Größe und Aussehen.
• Nutze PNG nur für Logos und Icons mit Transparenz, nie für Produktfotos, dort ist PNG um ein Vielfaches größer.
• Setze SVG für einfache Logos ein, das skaliert verlustfrei.

4. Das Hero- und LCP-Bild richtig behandeln

Das größte sichtbare Bild ist fast immer dein Largest-Contentful-Paint-Element und verdient Sonderbehandlung. Es darf nicht lazy laden, sondern gehört auf loading="eager" mit fetchpriority="high", damit der Browser es sofort priorisiert.

<img
  src="{{ section.settings.hero | image_url: width: 1600 }}"
  width="1600" height="900"
  loading="eager"
  fetchpriority="high"
  alt="...">

Weil das ein Thema für sich ist, haben wir die vollständige Anleitung in den Shopify LCP Fix ausgelagert. Für die Bildoptimierung merke dir nur: Genau ein Bild pro Seite bekommt diese Vorzugsbehandlung, alle anderen laden lazy.

5. Kategorieseiten zähmen

Kategorieseiten sind der größte Einzelposten beim Bildgewicht. Eine Kollektion mit 48 Produkten, die alle Bilder gleichzeitig lädt, kann mehrere Megabyte auf einmal ziehen. Drei Maßnahmen:

• Below-the-fold lazy laden. Nur die erste sichtbare Zeile eager, der Rest lazy.
• Immer width und height setzen. Das reserviert den Platz und verhindert Layout-Shift, also CLS.
• Anfangszahl begrenzen. Lade zunächst weniger Produkte und lade beim Scrollen nach, statt 48 Bilder auf einmal auszuliefern.

Deine Bilder in 10 Minuten auditieren

Ein Shopify-Bildoptimierung-Audit in zehn Minuten braucht kein Tool-Abo, nur Chrome und PageSpeed Insights.

1. DevTools öffnen, Reiter Network, Filter „Img“, Seite neu laden.
2. Prüfen, ob die Antworten webp oder avif sind. Erscheint auf einem modernen Browser jpeg oder png, umgeht dieses Bild die Pipeline.
3. Nach Größe absteigend sortieren und mit der gerenderten Größe vergleichen. Große Datei, kleine Anzeige bedeutet fehlendes srcset.
4. Die Seite durch PageSpeed Insights schicken und die Punkte „Bilder in modernen Formaten bereitstellen“ und „Bilder richtig dimensionieren“ lesen. Sie zeigen dir genau die Ausreißer.

Zur Einordnung, warum sich das lohnt: Laut Web Almanac 2025 machen Bilder einen erheblichen Teil des gesamten Seitengewichts aus. Auf bildlastigen Shops sind sie der größte einzelne Hebel für die Ladezeit, größer als Theme oder Apps, und damit der wirksamste Teil der Shopify Bildoptimierung.

Häufige Fehler bei der Shopify Bildoptimierung

Selbst eine gute Shopify Bildoptimierung scheitert, wenn du in eine dieser Fallen tappst.

1. WebP-Dateien direkt hochladen und damit den JPEG-Fallback zerstören.
2. Eine Bulk-Konvertierungs-App installieren, die doppelt, was die CDN kostenlos tut, und dabei JavaScript hinzufügt.
3. Das Hero-Bild lazy laden und so den LCP verschlechtern.
4. PNG für Produktfotos verwenden, obwohl JPEG ein Bruchteil der Größe hätte.
5. width und height weglassen und damit Layout-Shift verursachen.
6. Bilder außerhalb der Liquid-Pipeline einbinden und sich wundern, warum sie kein WebP bekommen.

Brauchst du eine App für die Shopify Bildoptimierung?

Für die Formatkonvertierung eindeutig nein, das erledigt die CDN. Eine App kann einen schmalen Nutzen haben, wenn du keinen Code anfassen kannst und automatisches Lazy-Loading oder responsive Größen brauchst. Aber wäge den Preis ab: Jede App bringt eigenes JavaScript mit, und genau das kann die Bild-Ersparnis wieder auffressen. Der leichtere Weg ist fast immer die native Umsetzung im Theme, mit image_tag, sauberem Lazy-Loading und einem korrekt behandelten Hero-Bild. Eine gute Shopify Bildoptimierung entsteht durch die richtigen Handgriffe an der Quelle, nicht durch eine weitere Erweiterung.

Fazit: Optimiere, was dir gehört

Die Formatfrage kannst du getrost Shopify überlassen. WebP und AVIF liefert die CDN automatisch aus, sobald der Browser sie unterstützt, und eine Bulk-App ändert daran nichts Sinnvolles. Was zählt, sind die Dinge, die keine Automatik für dich löst: Bilder über die Liquid-Pipeline ausliefern, richtig dimensionieren, die Quelldatei vor dem Upload komprimieren, das Hero-Bild priorisieren und Kategorieseiten zähmen. Wer diese fünf Punkte sauber macht, holt aus jedem Bild das Maximum, ohne eine einzige Datei von Hand zu konvertieren. So sieht Shopify Bildoptimierung aus, die hält.