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 einen hohen Farbumfang. Kleine Bilddateien können die übertragene Datenmenge reduzieren und dadurch den PageSpeed sowie die Nutzererfahrung verbessern.
AVIF speichert Bilddaten auf Basis des Videocodecs AV1 in einem für Einzelbilder geeigneten Container. Das Format wurde für eine hohe Bildqualität bei möglichst geringer Dateigröße entwickelt und eignet sich deshalb besonders für bildlastige Websites, Onlineshops, Magazine und Landingpages.
Wie funktioniert AVIF?
AVIF entfernt bei der verlustbehafteten Kompression Bildinformationen, die für das menschliche Auge weniger auffällig sind. Die verlustfreie Variante erhält dagegen sämtliche Bildinformationen, erzeugt aber meist größere Dateien. Welche Einstellung sinnvoll ist, hängt vom Motiv ab: Fotos vertragen häufig eine stärkere Kompression als Logos, Screenshots oder Grafiken mit feinen Linien.
Das Format unterstützt neben gewöhnlichen Farbbildern auch Alphakanäle für transparente Flächen, Animationen, hohe Farbtiefen und HDR-Inhalte. Der korrekte MIME-Typ lautet image/avif. Ein Webserver sollte diesen Typ ausliefern, damit Browser und zwischengeschaltete Systeme die Datei eindeutig als AVIF erkennen.
AVIF verbessert den PageSpeed
Der PageSpeed einer Seite hängt unter anderem davon ab, wie viele Bytes der Browser übertragen, dekodieren und darstellen muss. AVIF kann die Übertragungsmenge großer Fotos deutlich senken, wenn die Ausgangsdatei bisher als wenig komprimiertes JPEG oder PNG vorliegt. Der tatsächliche Vorteil muss für jedes Motiv gemessen werden, weil Format, Encoder, Qualitätsstufe und Bildinhalt das Ergebnis beeinflussen.
Besonders relevant ist AVIF für den Largest Contentful Paint, kurz LCP. Diese Core-Web-Vitals-Kennzahl misst, wann das größte sichtbare Inhaltselement dargestellt wird. Ist dieses Element ein Titelbild, Produktfoto oder Banner, können eine geringere Dateigröße und eine passende Bildabmessung den Ladevorgang verkürzen. AVIF allein löst jedoch keine langsame Serverantwort, blockierendes CSS oder ungünstige Ladeprioritäten.
Messbar ist das zum Beispiel so: Vergleiche vor und nach der Umstellung die übertragenen Bilddaten, den LCP und die gesamte Seitengröße. Der kostenlose Website-Speed-Test prüft die Lade-Performance und zeigt technische Ansatzpunkte zur Optimierung.
Prüfe die Ladezeit deiner Seite direkt nach der AVIF-Umstellung:
AVIF, WebP, JPEG und PNG
Der Unterschied zwischen AVIF und WebP liegt vor allem in der verwendeten Kompression und der technischen Verarbeitung. Beide Formate unterstützen verlustbehaftete und verlustfreie Kompression sowie Transparenz. WebP lässt sich häufig schneller erzeugen und dekodieren, während AVIF bei geeigneten Fotos eine kleinere Datei bei vergleichbarer visueller Qualität liefern kann.
| Format | Typische Verwendung | Transparenz | Animation |
|---|---|---|---|
| AVIF | Fotos, Banner, Produktbilder, anspruchsvolle Farbdarstellung | Ja | Ja |
| WebP | Fotos, Grafiken und breit kompatible Webbilder | Ja | Ja |
| JPEG | Fotos und Motive ohne Transparenz | Nein | Nein |
| PNG | Logos, Screenshots und Grafiken mit Transparenz | Ja | Nein |
AVIF sollte JPEG oder PNG nicht pauschal ersetzen. Ein kleines Logo kann als optimiertes SVG oder PNG effizienter und einfacher zu verarbeiten sein. Bei einem großen Produktfoto lohnt sich dagegen ein Qualitätsvergleich zwischen AVIF und WebP. Entscheidend ist die kleinste Datei, die bei der benötigten Darstellung keine störenden Qualitätsverluste zeigt.
AVIF mit Fallback einbinden
Moderne Browser unterstützen AVIF weitgehend. Ein Fallback bleibt trotzdem sinnvoll, wenn eine Website ältere Browser, eingebettete Webansichten, E-Mail-Systeme oder spezielle Bildverarbeitungsdienste bedienen muss. Das HTML-Element picture erlaubt dem Browser, das erste unterstützte Format auszuwählen.
Eine robuste Einbindung kann so aufgebaut sein: <picture><source srcset='bild.avif' type='image/avif'><source srcset='bild.webp' type='image/webp'><img src='bild.jpg' width='800' height='600' alt='Produktbeschreibung'></picture>. Unterstützt der Browser AVIF nicht, prüft er WebP und lädt anschließend bei Bedarf das JPEG.
Ein häufiger Fehler besteht darin, lediglich die Dateiendung auszutauschen. Eine Datei wird erst durch eine korrekte Konvertierung zu AVIF. Zusätzlich müssen Content-Management-System, CDN, Cache, Bildoptimierungsdienst und Serverkonfiguration das Format verarbeiten und mit dem richtigen MIME-Typ ausliefern.
AVIF für SEO und GEO
AVIF erzeugt keinen direkten Rankingbonus. Der SEO-Nutzen entsteht über technische Faktoren wie eine geringere Datenmenge, schnellere Darstellung und eine bessere mobile Nutzung. Bilder benötigen weiterhin aussagekräftige Alt-Texte, passende Dateinamen, korrekte Abmessungen und einen inhaltlichen Bezug zur Seite. Das Dateiformat ersetzt keine saubere Onpage-Optimierung.
Für GEO, also Generative Engine Optimization, liefert AVIF ebenfalls keinen eigenständigen Sichtbarkeitsvorteil. KI-Systeme benötigen verständliche Texte, strukturierte Informationen und zugängliche Bildkontexte. Ein präziser Alt-Text und eine passende Bildunterschrift helfen Suchmaschinen und KI-Systemen stärker bei der Einordnung als die Dateiendung allein.
AVIF richtig einsetzen
Beginne mit den größten sichtbaren Fotos und Produktbildern, weil dort meist das höchste Einsparpotenzial liegt. Erzeuge AVIF-Dateien automatisiert aus einer hochwertigen Originaldatei und bewahre diese Originale getrennt auf. Eine bereits stark komprimierte JPEG-Datei sollte nicht als alleinige Quelle dienen, da jede weitere verlustbehaftete Umwandlung sichtbare Fehler verstärken kann.
Ein technisches SEO-Audit sollte außerdem prüfen, ob übergroße Originalbilder, falsche Formate oder unnötige Bildvarianten geladen werden. Als interner Prüfwert können Dateien über 1 MB markiert werden. Dieser Wert ist eine Warnschwelle, kein allgemeines Qualitätsziel, denn ein kleines Vorschaubild benötigt ein deutlich niedrigeres Budget als ein großflächiges Titelmotiv.
Häufige Fragen zu AVIF
Ist AVIF besser als WebP?
AVIF kann bei Fotos eine kleinere Datei bei vergleichbarer sichtbarer Qualität erzeugen. WebP lässt sich je nach System schneller verarbeiten und ist eine bewährte Alternative. Vergleiche beide Formate mit demselben Originalbild und derselben Ausgabegröße.
Unterstützen alle Browser AVIF?
Moderne Browser unterstützen AVIF weitgehend. Für ältere Browser, eingebettete Webansichten und spezielle Systeme ist ein Fallback über das picture-Element sinnvoll.
Kann AVIF transparente Bilder speichern?
Ja, AVIF unterstützt einen Alphakanal und damit transparente oder halbtransparente Bereiche. Ob AVIF für ein Logo oder eine einfache Grafik die kleinste Datei erzeugt, sollte mit WebP, PNG und SVG verglichen werden.
Kann Google AVIF-Bilder indexieren?
AVIF-Bilder können von Google verarbeitet werden, wenn sie crawlbar sind und korrekt ausgeliefert werden. Für die Bildersuche bleiben der Seitenkontext, der Alt-Text, die interne Einbindung und eine zugängliche Bild-URL relevant.
Sollte jedes Bild in AVIF umgewandelt werden?
Nein, das geeignete Format hängt vom Motiv und vom technischen Umfeld ab. AVIF eignet sich häufig für Fotos und große Bildflächen, während SVG für Vektorgrafiken und PNG für bestimmte Screenshots oder Grafiken sinnvoll bleiben kann.
Warum wird eine AVIF-Datei nicht angezeigt?
Häufige Ursachen sind ein fehlender MIME-Typ, eine fehlerhafte Konvertierung, ein veralteter Browser oder ein CDN, das das Format nicht korrekt ausliefert. Prüfe die Serverantwort, die Datei selbst und die Fallback-Konfiguration.
Du möchtest die technische Ausgangslage deiner Website prüfen und konkrete Optimierungsschritte ableitet bekommen? Der kostenlose Check liefert einen ersten Überblick, unverbindlich und ohne Verkaufsdruck.
Sie haben noch Fragen?
