AVIF für Shopify 2026: Shop 3x Schneller [Implementierung]

Shopify und AVIF

Shopify liefert automatisch optimierte Bilder an Browser, die sie unterstützen. Zu verstehen, wie das funktioniert und wie Sie weiter optimieren können, macht den Unterschied für Ihren Store.

Shopify CDN (powered by Cloudflare) unterstützt automatische Konvertierung zu WebP und AVIF für kompatible Browser.

Das bedeutet, dass viele Stores bereits AVIF ausliefern, ohne es zu wissen, aber es gibt Möglichkeiten zur weiteren Optimierung.

Der Schlüssel ist das Hochladen hochwertiger Quellbilder und die richtige Konfiguration der Größen.

Implementierungsmethoden

Es gibt verschiedene Ansätze zur Implementierung von AVIF auf Shopify, von vollautomatisch bis manuell.

• Automatisch (Standard): Shopify CDN konvertiert automatisch. Funktioniert, bietet aber wenig Kontrolle.
• Optimierungs-Apps: Apps wie TinyIMG oder Crush.pics bieten mehr Kontrolle und Funktionen.
• Liquid + srcset: Passen Sie Templates an, um spezifische Formate auszuliefern.
• Pre-Konvertierung: Konvertieren Sie Bilder vor dem Upload für volle Kontrolle.

Empfohlene Apps

Diese Shopify-Apps vereinfachen die Bildoptimierung und bieten erweiterte Funktionen.

TinyIMG: Die beliebteste, optimiert automatisch alle hochgeladenen Bilder mit AVIF-Unterstützung.

Crush.pics: Ausgezeichnet für Stores mit tausenden Produkten, effiziente Batch-Konvertierung.

Booster: Komplette Suite mit Bildoptimierung, Lazy Loading und intelligentem Preload.

Manuelle Konfiguration

Für volle Kontrolle können Sie das Liquid-Theme modifizieren, um spezifische Formate auszuliefern.

Der image_url-Filter von Shopify unterstützt den format-Parameter, um spezifische Formate anzufordern.

Dieser Ansatz bietet maximale Kontrolle, erfordert aber Theme-Modifikationen.

{% comment %} In product-image.liquid {% endcomment %}
<picture>
  <source type="image/avif" srcset="{{ image | image_url: width: 800, format: 'avif' }}">
  <source type="image/webp" srcset="{{ image | image_url: width: 800, format: 'webp' }}">
  <img src="{{ image | image_url: width: 800 }}" alt="{{ image.alt }}" loading="lazy">
</picture>

Performance-Monitoring

Nach der Implementierung überwachen Sie die Auswirkungen auf die Performance Ihres Stores.

• PageSpeed Insights: Überprüfen Sie LCP und Bildvorschläge in Google PSI.
• Shopify Analytics: Überwachen Sie Bounce-Rate und Verweildauer.
• Real User Monitoring: Erwägen Sie Tools wie SpeedCurve für echte Daten.
• A/B Testing: Vergleichen Sie Versionen mit und ohne AVIF, um Conversion-Auswirkungen zu messen.