AVIF
Was ist AVIF?
AVIF ist ein modernes Bildformat für Websites und steht für AV1 Image File Format. Es komprimiert Fotos und Grafiken verlustbehaftet oder verlustfrei, unterstützt Transparenz, Animationen und hohe Farbtiefen. Kleinere Bilddateien können den Datentransfer reduzieren und dadurch PageSpeed, Nutzererlebnis und Core Web Vitals verbessern.
Wie funktioniert AVIF?
AVIF speichert einzelne Bilder oder Bildsequenzen auf Basis der AV1-Kompression in einem HEIF-Container. Der AV1-Codec wurde ursprünglich für Videodaten entwickelt, kann aber auch einzelne Frames effizient komprimieren. Das Format entfernt dabei Bildinformationen, die für das menschliche Auge kaum wahrnehmbar sind, oder speichert das Motiv auf Wunsch verlustfrei.
AVIF unterstützt neben gewöhnlichen RGB-Bildern auch einen Alphakanal für transparente Bereiche, Animationen, HDR-Inhalte und Farbtiefen von mehr als 8 Bit pro Kanal. Dadurch eignet sich das Format für Produktfotos, große Titelbilder, Illustrationen und Motive mit feinen Farbverläufen. Bei kleinen Logos, Icons oder sehr einfachen Grafiken kann SVG oder PNG trotzdem besser passen.
AVIF verbessert den PageSpeed
AVIF kann den PageSpeed verbessern, wenn die konvertierte Datei bei vergleichbarer sichtbarer Qualität kleiner als die bisherige JPEG-, PNG- oder WebP-Datei ist. Der Browser überträgt dann weniger Daten und kann das Bild früher darstellen. Der tatsächliche Effekt hängt von Motiv, Auflösung, Qualitätsstufe, Serverantwort und Netzwerkverbindung ab.
Besonders relevant ist AVIF für den Largest Contentful Paint, kurz LCP. Der LCP misst, wann das größte sichtbare Inhaltselement im ersten Ansichtsbereich dargestellt wird. Handelt es sich dabei um ein großes Titel- oder Produktbild, kann eine kleinere Bilddatei die Ladezeit dieses Elements verkürzen. Das LCP-Bild sollte außerdem früh angefordert und nicht per Lazy Loading verzögert werden.
AVIF löst jedoch keine falschen Bildabmessungen. Responsive Bilder mit srcset und sizes sorgen dafür, dass Smartphones eine kleinere Variante erhalten als große Desktop-Bildschirme. Feste Angaben für width und height reservieren zudem den benötigten Platz und reduzieren Layout-Verschiebungen, die den Cumulative Layout Shift beeinflussen.
AVIF, WebP, JPEG und PNG
Der Unterschied zwischen AVIF und WebP liegt hauptsächlich im verwendeten Kompressionsverfahren und in der Verarbeitung durch Browser und Bildsoftware. AVIF erreicht bei komplexen Fotos und Farbverläufen häufig eine kleinere Datei, benötigt beim Erstellen und Dekodieren jedoch mitunter mehr Rechenzeit. WebP ist deshalb weiterhin eine sinnvolle Alternative, wenn ein System AVIF nicht erzeugen oder zuverlässig ausliefern kann.
| Format | Geeignete Inhalte | Transparenz | Verlustfreie Speicherung |
|---|---|---|---|
| AVIF | Fotos, Titelbilder, Farbverläufe, Animationen | Ja | Ja |
| WebP | Fotos, Grafiken und Animationen | Ja | Ja |
| JPEG | Fotos und detailreiche Motive | Nein | Nein |
| PNG | Grafiken, Screenshots und transparente Motive | Ja | Ja |
| SVG | Logos, Icons und skalierbare Vektorgrafiken | Ja | Vektorbasiert |
Ein modernes Bildformat sollte nicht allein anhand der Dateiendung ausgewählt werden. Vergleiche die Dateigröße immer bei ähnlicher wahrgenommener Qualität. Eine stark komprimierte AVIF-Datei mit sichtbaren Artefakten ist keine sinnvolle Verbesserung gegenüber einem etwas größeren, sauber dargestellten WebP- oder JPEG-Bild.
AVIF sicher einbinden
AVIF lässt sich über das HTML-Element picture mit einem alternativen Format kombinieren. Der Browser prüft die Quellen von oben nach unten und lädt die erste unterstützte Variante. Eine JPEG- oder PNG-Datei im img-Element dient als Rückfalllösung für ältere Browser, E-Mail-Programme oder andere Systeme ohne AVIF-Unterstützung.
<picture><source srcset='produkt.avif' type='image/avif'><source srcset='produkt.webp' type='image/webp'><img src='produkt.jpg' alt='Produktbeschreibung' width='800' height='600'></picture>
Der Webserver muss AVIF mit dem MIME-Typ image/avif ausliefern. Kontrolliere außerdem, ob CDN, Cache, Content-Management-System und Bildbearbeitung das Format korrekt verarbeiten. Eine fehlerhafte Serverkonfiguration kann dazu führen, dass der Browser das Bild herunterlädt, aber nicht als Bildressource interpretiert.
Typische Fehler bei AVIF
Ein häufiger Fehler besteht darin, sämtliche Bilder mit derselben Qualitätsstufe umzuwandeln. Fotos, Screenshots, Illustrationen und Schriftgrafiken reagieren unterschiedlich auf Kompression. Feine Linien oder eingebetteter Text können früh unscharf werden, während fotografische Motive eine stärkere Kompression vertragen. Prüfe deshalb mehrere Qualitätsstufen am tatsächlichen Ausgabegerät.
Ein weiterer Fehler ist die Konvertierung bereits stark komprimierter Dateien. Durch erneute verlustbehaftete Kompression können Blockbildung, Farbsäume und Detailverluste entstehen. Verwende nach Möglichkeit ein hochwertiges Original und erzeuge JPEG, WebP und AVIF direkt aus dieser Quelldatei.
Messbar ist die Wirkung von AVIF durch einen Vergleich vor und nach der Umstellung. Kontrolliere Dateigröße, übertragene Bilddaten, LCP und visuelle Qualität auf Mobilgeräten. Ein einzelner PageSpeed-Wert reicht für die Bewertung nicht aus, weil Server- und Netzwerkbedingungen zwischen zwei Messungen schwanken können. Prüfe mehrere Läufe und vergleiche denselben Seitentyp.
Teste die Ladezeit deiner Seite direkt mit dem kostenlosen Check:
AVIF für SEO und GEO
AVIF ist kein eigenständiger Ranking-Faktor. Das Format kann SEO indirekt unterstützen, wenn kleinere Dateien die Ladeleistung und das Nutzererlebnis verbessern. Suchmaschinen benötigen weiterhin einen aussagekräftigen Alt-Text, einen verständlichen Dateinamen, passende Bildabmessungen und eine technisch erreichbare Bild-URL. Das Bildformat ersetzt keine inhaltliche Bildoptimierung.
Für GEO, also Generative Engine Optimization, schafft eine schnelle und technisch saubere Seite bessere Voraussetzungen für das Abrufen und Verarbeiten von Inhalten. AVIF liefert dabei keine spezielle Auszeichnung für KI-Systeme. Maschinenlesbare Texte, klare Entitäten und zugängliche Bildbeschreibungen bleiben für die inhaltliche Einordnung wichtiger als die Dateiendung.
Eine technische Prüfung sollte AVIF deshalb gemeinsam mit Caching, responsiven Bildern, Lazy Loading und den Core Web Vitals betrachten. Weitere Zusammenhänge erklärt der Ratgeber zur technischen SEO und Ladezeitenoptimierung. Bei neuen Seiten sollte die Website-Entwicklung mit SEO-Fokus die Bildauslieferung bereits im technischen Konzept berücksichtigen.
Wenn du Bildformate, Ladezeiten und technische SEO-Signale strukturiert prüfen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Häufige Fragen zu AVIF
Kann jeder Browser AVIF anzeigen?
Aktuelle Versionen der verbreiteten Browser unterstützen AVIF. Für ältere Browser, E-Mail-Programme und bestimmte eingebettete Webansichten empfiehlt sich trotzdem eine Rückfalllösung über das picture-Element.
Ist AVIF immer kleiner als WebP?
Nein. Die Dateigröße hängt vom Motiv, der Auflösung, dem Encoder und der Qualitätsstufe ab. Vergleiche AVIF und WebP deshalb anhand desselben Ausgangsbildes und bei ähnlicher sichtbarer Qualität.
Kann AVIF einen transparenten Hintergrund speichern?
Ja. AVIF unterstützt einen Alphakanal und kann transparente oder halbtransparente Bildbereiche speichern. Für einfache Logos und Icons ist eine SVG-Datei häufig trotzdem kompakter und besser skalierbar.
Kann ich alle JPEG-Bilder durch AVIF ersetzen?
Eine vollständige Umstellung ist technisch möglich, sollte aber getestet werden. Prüfe Browserunterstützung, Bildqualität, Ladezeit, CMS-Kompatibilität und eine geeignete Rückfalllösung, bevor du bestehende JPEG-Dateien entfernst.
Unterstützt AVIF Animationen?
Ja. AVIF kann Bildsequenzen und damit Animationen speichern. Ob AVIF für eine konkrete Animation geeignet ist, hängt von Dateigröße, benötigter Browserunterstützung und Rechenaufwand beim Dekodieren ab.
Warum wird meine AVIF-Datei nicht angezeigt?
Häufige Ursachen sind ein ungeeigneter Browser, ein falscher MIME-Typ, eine beschädigte Datei oder eine fehlerhafte CDN-Konfiguration. Prüfe die Serverantwort und die Netzwerkanfragen in den Entwicklertools des Browsers.
Sie haben noch Fragen?
