So verwenden Sie AVIF-Bilder auf Ihrer Website

Die wichtigsten Schritte

1. Wählen Sie ein Bild aus, das bereits auf einer Seite verwendet wird, und bewahren Sie das Original auf.
2. Erstellen Sie eine AVIF-Version und prüfen Sie deren Qualität.
3. Binden Sie das AVIF-Bild auf eine Weise ein, die Ihr Veröffentlichungssystem unterstützt.
4. Prüfen Sie die veröffentlichte Seite auf einem Smartphone und einem Computer.
5. Kontrollieren Sie anhand der Netzwerkanfragen im Browser, welche Bilddatei geladen wird.

Die folgenden Abschnitte erläutern, worauf Sie bei jedem Schritt achten sollten.

Prüfen Sie, wie Ihre Website AVIF verarbeitet

Ein Veröffentlichungssystem kann AVIF-Dateien in der Mediathek akzeptieren, sie aber anders verarbeiten als JPG oder PNG. Prüfen Sie deshalb sowohl das Hochladen als auch die Verwendung auf einer veröffentlichten Seite.

Testen Sie mit einem Bild:

• Akzeptiert die Mediathek die Datei?
• Wird das Bild im Seiteneditor angezeigt?
• Funktioniert es auf der veröffentlichten Seite?
• Werden die benötigten kleineren Bildversionen erstellt, wenn das System diese normalerweise erzeugt?

Ein Bildoptimierungsdienst oder CDN liefert Ihre Bilder möglicherweise bereits als AVIF aus. Prüfen Sie die aktuelle Auslieferung, bevor Sie Dateien manuell ersetzen. Ein JPG in der Mediathek sagt allein noch nichts darüber aus, welches Format Besucher erhalten.

Bereiten Sie ein Bild für den Test vor

Wählen Sie ein Bild, das für Ihre Website typisch ist. Ein Produktfoto, ein Artikelbild oder eine Grafik mit transparentem Hintergrund eignet sich besser als ein beliebiges Testbild.

Verwenden Sie den Konverter für das jeweilige Ausgangsformat:

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

Die AVIF-Konverter von Pixilo behalten die ursprünglichen Pixelmaße bei und verwenden eine feste Einstellung für verlustbehaftete Komprimierung. Sie erzeugen ein einzelnes Standbild. Animationen, die ursprünglichen HDR-Informationen und Metadaten bleiben nicht erhalten.

Vergleichen Sie das heruntergeladene AVIF mit dem Original. Achten Sie besonders auf lesbaren Text, feine Kanten, Farbverläufe und transparente Bereiche. Prüfen Sie auch die Dateigröße: Die Umwandlung macht eine Datei nicht immer kleiner.

Wenn die Qualität nicht ausreicht oder die Datei größer wird, behalten Sie die bisherige Version. Ein Formatwechsel ist kein Selbstzweck.

Binden Sie AVIF über Ihr Veröffentlichungssystem ein

Wenn Sie einen Seitenbaukasten oder ein Content-Management-System verwenden, laden Sie das AVIF in die Mediathek und wählen Sie es im entsprechenden Bildelement als neues Bild aus.

Lassen Sie die angezeigte Größe und den Bildausschnitt während des Tests unverändert. So können Sie die Auswirkungen des Formatwechsels beurteilen, ohne gleichzeitig das Seitenlayout zu verändern.

Prüfen Sie beim Ersetzen:

• den Alternativtext
• das Seitenverhältnis und den Bildausschnitt
• eine gegebenenfalls vorhandene Bildunterschrift und Verlinkung
• die Darstellung auf Computern und Mobilgeräten.

Das Ändern der Dateiendung in einer URL wandelt das Bild nicht um. Veröffentlichen Sie eine echte AVIF-Datei oder nutzen Sie einen Dienst, der die Umwandlung übernimmt.

Bieten Sie bei Bedarf ein alternatives Format an

Wenn Sie das HTML selbst bearbeiten, können Sie mit einem picture-Element AVIF bevorzugt anbieten und JPG als Alternative hinterlegen.

In diesem Beispiel zeigen beide Dateien dasselbe Bild mit 1200 × 800 Pixeln. Ersetzen Sie die Pfade, Maße und den Alternativtext durch passende Angaben für Ihr Bild.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Blauer Rucksack von vorne">
</picture>

Ein Browser mit AVIF-Unterstützung kann die AVIF-Version auswählen. Unterstützt er das angegebene Format nicht, verwendet er hier das JPG. Für transparente Bilder sollten Sie eine Alternative wählen, die Transparenz erhält, etwa PNG. Weitere Informationen finden Sie in der MDN-Dokumentation zum picture-Element.

Diese Alternative berücksichtigt die Unterstützung des Bildformats. Sie behebt jedoch nicht automatisch eine falsche AVIF-Adresse oder eine beschädigte Datei.

Wenn Ihr Veröffentlichungssystem alternative Bildformate automatisch verwaltet, nutzen Sie diese integrierte Funktion.

Prüfen Sie, welches Bild der Browser lädt

Ein sichtbares Bild auf der Seite beweist noch nicht, dass AVIF verwendet wird. Der Browser kann das bisherige Bild, eine kleinere Variante oder eine von einem Optimierungsdienst erzeugte Datei laden.

In Chrome lässt sich das mit den Entwicklertools prüfen:

1. Öffnen Sie die veröffentlichte Seite und die Entwicklertools.
2. Wählen Sie den Tab Network und den Filter Img.
3. Aktivieren Sie Disable cache und laden Sie die Seite bei geöffneten Entwicklertools neu.
4. Öffnen Sie die Anfrage für das betreffende Bild.
5. Prüfen Sie die URL und den Content-Type der Antwort. Für AVIF lautet dieser image/avif.

Die Dateiendung ist nicht der einzige Hinweis: Ein Optimierungsdienst kann AVIF über eine URL ausliefern, die auf .jpg endet. Im Network-Tab lässt sich auch die übertragene Dateigröße prüfen. Die Chrome-Anleitung zur Prüfung von Netzwerkanfragen erläutert das Vorgehen.

Wenn die Seite ein separates Bild für Mobilgeräte oder mehrere Bildgrößen verwendet, prüfen Sie auch diese Anfragen.

Prüfen Sie die veröffentlichte Seite vor weiteren Änderungen

Beurteilen Sie das Bild dort, wo es tatsächlich verwendet wird. Die Vorschau in der Mediathek zeigt weder den mobilen Bildausschnitt noch die Wirkung des Seitenhintergrunds oder ob die richtige Variante geladen wird.

Stellen Sie sicher, dass:

• das ganze Bild sichtbar ist oder der Ausschnitt beabsichtigt ist
• Text und wichtige Details ausreichend klar bleiben
• transparente Bereiche vor dem Seitenhintergrund korrekt wirken
• der reservierte Platz für das Bild und das Seitenlayout weiterhin stimmen
• der Browser die erwartete Datei lädt.

Verwenden Sie für Ladevergleiche vor und nach der Änderung dieselbe Seite, Fenstergröße und Testeinstellungen. Ein einzelner schnellerer Aufruf belegt keine dauerhafte Verbesserung. Eine kleinere Dateigröße lässt sich leichter nachweisen, wenn die Bilder dieselben Maße und eine akzeptable Qualität haben.

Wenn das AVIF-Bild nicht angezeigt wird

Prüfen Sie zuerst, ob sich die direkte Bildadresse im Browser öffnen lässt. Falls nicht, kontrollieren Sie den Speicherort und mögliche Fehlermeldungen des Veröffentlichungssystems.

Wenn das Bild direkt funktioniert, die Seite aber die alte Version zeigt, prüfen Sie die URL des Bildelements, weitere Bildgrößen und den Website-Cache. Das Umgehen des Browser-Caches leert weder den Cache des Veröffentlichungssystems noch den des CDN.

Bleibt die Ursache unklar, setzen Sie im Bildelement zunächst das funktionierende Original wieder ein. Klären Sie die AVIF-Unterstützung vor dem nächsten Versuch.

Häufig gestellte Fragen

Sollten alle Website-Bilder auf AVIF umgestellt werden?

Nein. Ersetzen Sie Bilder dann, wenn die Datei sinnvoll kleiner wird und das Ergebnis in Ihrem Veröffentlichungssystem mit akzeptabler Qualität funktioniert.

Reicht es, AVIF in die Mediathek hochzuladen?

Nein. Das Bild muss auch auf der Seite ausgewählt werden. Prüfen Sie anhand der Netzwerkanfragen der veröffentlichten Seite, welche Datei geladen wird.

Braucht AVIF immer ein alternatives Bildformat?

Das hängt von den Browsern Ihrer Besucher und Ihrer Veröffentlichungstechnik ab. Ein alternatives Format ist sinnvoll, wenn Sie auch Umgebungen unterstützen möchten, in denen AVIF nicht funktioniert.

Warum wird die auf der Seite geladene Datei durch das neue AVIF nicht kleiner?

Die Seite verwendet möglicherweise noch das alte Bild oder eine andere Version, die Ihr Veröffentlichungssystem erzeugt hat. Auch das AVIF selbst kann größer sein. Prüfen Sie die tatsächliche Anfrage und vergleichen Sie Dateien mit denselben Pixelmaßen.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)