// stack · media
AVIF nimmt die Kompression des AV1-Videocodecs und wendet sie auf Einzelbilder an — bei vergleichbarer Qualität über 50 % kleiner als JPEG. Bei siteway ist AVIF deshalb die erste Quelle in jedem picture-Element: erzeugt beim Build über sharp, in mehreren Breiten, mit WebP und JPG dahinter.
// definition
AVIF (AV1 Image File Format) ist ein offenes Bildformat, das die Kompression des AV1-Videocodecs auf Einzelbilder anwendet und sie in einem HEIF-Container ablegt. Veröffentlicht hat es die Alliance for Open Media im Jahr 2019 — dieselbe Allianz, die auch hinter AV1 steht. Sie beziffert die Ersparnis mit über 50 % gegenüber JPEG und über 30 % gegenüber WebP, jeweils bei vergleichbarer sichtbarer Qualität.
Der Grund ist einfach: Ein Videocodec muss pro Einzelbild extrem effizient arbeiten, sonst wird ein Film unbezahlbar groß. AVIF erbt genau diese Arbeit. Dazu kommen Eigenschaften, die JPEG nie hatte — ein Alpha-Kanal für Transparenz, HDR mit 10- und 12-Bit-Farbtiefe, ein weiter Farbraum, Animation in einer einzigen Datei und wahlweise verlustbehaftete oder verlustfreie Kompression. Lizenzgebühren fallen keine an.
// praxis
im build erzeugt · nicht von hand
Ein Bildformat nützt nur, wenn es zuverlässig entsteht. Deshalb wandeln wir nichts in Photoshop um: Jedes Original läuft beim Build durch sharp, eine schnelle Bildbibliothek für Node.js. Daraus fallen AVIF, WebP und ein JPG- oder PNG-Fallback heraus — in den Breiten 480, 800 und 1.200 Pixel. Ändert sich das Original, wird der ganze Satz neu erzeugt, reproduzierbar und ohne Handarbeit. In TYPO3 oder WordPress übernimmt die Bildverarbeitung des CMS dieselbe Aufgabe im Backend.
Im HTML steht AVIF an erster Stelle: eine source mit
type="image/avif", darunter WebP, darunter das
img mit JPG oder PNG. Der Browser prüft von oben nach unten und lädt genau eine
Datei — das modernste Format, das er kann. Jede Quelle trägt ihr eigenes
srcset mit den Breitenstufen und ein sizes, das zur
echten Layoutbreite passt. Hat das Original einen Alpha-Kanal, wird der Fallback ein PNG statt eines
JPG, weil JPEG keine Transparenz kann.
Bei der Qualitätsstufe fahren wir AVIF bewusst niedriger als das JPG: 60 bis 62 gegenüber 80 bis 82 beim JPEG mit mozjpeg. Die AV1-Kompression bleibt dort noch sauber, wo ein JPG längst Artefakte zeigt. Die Maße jedes Originals schreibt die Pipeline in ein Manifest — daraus kommen die festen width/height-Attribute, die den Layout-Sprung verhindern. Der ganze Satz liegt versioniert im Repository und geht über Git und GitHub Actions live. Jedes Ergebnis sieht sich vorher ein Mensch an.
// datenpunkt · gemessen
bilder dieser website
Statt Prospektzahlen die eigenen Dateien: 15 Case-Motive dieser Website, jedes 1.200 px breit, alle aus demselben Original durch dieselbe Pipeline. Der AVIF-Satz wiegt 654 KB, der WebP-Satz 728 KB, der JPG-Satz 1.195 KB. Macht 45 % weniger als das JPG-Set — und liegt damit in der Größenordnung, die die Alliance for Open Media angibt.
Der Abstand zu WebP fällt bei uns kleiner aus als die dort genannten über 30 %. Das ist kein Widerspruch, sondern eine Einstellung: Wir fahren WebP mit Qualität 76 und AVIF mit 62 — wer beide gleich streng einstellt, sieht mehr Abstand. Weniger Bytes heißt am Ende ein früheres Largest Contentful Paint und weniger mobiles Datenvolumen. Auf unserer Startseite steht dahinter PSI 100/100/100/100 mobil.
// bausteine · 6 details
was das format kann
AVIF ist mehr als „JPEG, aber kleiner". Das sind die Eigenschaften, die in unseren Projekten den Unterschied machen — samt der letzten Karte, die die Grenzen benennt.
// d-01kompression
AVIF nutzt die Intra-Frame-Kodierung von AV1 — die Technik, mit der ein moderner Videocodec ein Einzelbild packt. Genau daher kommen die über 50 % gegenüber JPEG, ohne dass das Bild sichtbar leidet.
zweck: weniger bytes
// d-02transparenz
Freisteller und Logos mit weichen Kanten brauchen kein schweres PNG mehr — AVIF trägt Transparenz mit. Der Fallback bleibt trotzdem ein PNG, weil ein JPG den Freisteller auf falschen Grund setzen würde.
zweck: png ablösen
// d-03farbe
10 und 12 Bit pro Kanal statt 8, dazu ein weiter Farbraum und ICC-Profile. Verläufe bleiben glatt statt zu bänderen — sichtbar vor allem bei Himmel, Schatten und flächigen Markenfarben.
zweck: saubere verläufe
// d-04auslieferung
AVIF steht als erste source mit type="image/avif", WebP als zweite, JPG oder PNG im img. Der Browser nimmt das erste Format, das er versteht, und lädt genau eine Datei — kein JavaScript nötig.
zweck: fallback-kette
// d-05responsive
Jede AVIF-Quelle liegt in 480, 800 und 1.200 px vor. Über srcset und ein sizes, das zur echten Layoutbreite passt, rechnet der Browser selbst aus, welche Datei zu Bildschirm und Pixeldichte gehört.
zweck: passende auflösung
// d-06grenzen
AVIF rendert nicht progressiv: Die Datei muss ganz da sein, bevor etwas erscheint. Dekodieren kostet mehr Rechenzeit als JPEG, Kodieren mehr Build-Zeit. Gegenmittel: passende Breiten statt Riesendateien.
zweck: ehrlich einordnen
// support
breit — aber nicht lückenlos
AVIF ist keine Wette mehr. Chrome liefert es seit Version 85 (2020), Firefox seit 93 (2021), Safari seit 16.1 (2022) und Edge seit 121 (Januar 2024). Mobil ist es ab Android 12 und iOS 16 dabei. Nach den Zahlen von caniuse.com liegt die weltweite Abdeckung damit bei rund 94 bis 95 %.
Die restlichen Prozent sind der Grund, warum bei siteway nie ein AVIF allein steht. Ein Browser ohne AVIF-Unterstützung zeigt kein schlechteres Bild — er zeigt gar keins. Über die Kette AVIF → WebP → JPG kostet der Schutz nichts: Der Browser lädt weiterhin nur eine einzige Datei, und die Redaktion merkt vom Ganzen nichts, weil die Pipeline alle Varianten selbst erzeugt.
// entscheidung
format nach motiv
AVIF ist die beste Kompression, aber nicht für jedes Motiv und jede Umgebung die richtige Antwort. Die Frage lautet nicht „welches Format ist das beste", sondern „welches Format passt zu diesem Bild und zu dieser Auslieferung". So entscheiden wir.
// e-01passt
Hero-Bilder, Referenzmotive, Produktfotos, Galerien: Je größer das Bild und je weicher die Verläufe, desto deutlicher der Vorsprung. Hier holt AVIF die 45 bis 50 % gegenüber JPEG zuverlässig.
avif zuerst
// e-02besser anders
Alles, was aus Linien und Flächen besteht, gehört als SVG ins HTML: beliebig scharf, wenige Kilobyte, per CSS einfärbbar. Ein AVIF davon wäre kleiner als ein PNG — aber immer noch ein Pixelbild.
svg statt raster
// e-03nur ein format
Uploads in ein System ohne picture-Element, ein Newsletter, ein Export für Dritte: Wo keine Fallback-Kette möglich ist, ist WebP die sichere Wahl — kleiner als JPEG und überall verstanden.
webp als allrounder
// faq
AVIF (AV1 Image File Format) ist ein offenes Bildformat, das die Kompression des AV1-Videocodecs auf Einzelbilder anwendet und sie in einem HEIF-Container ablegt. Die Alliance for Open Media hat es 2019 veröffentlicht und gibt über 50 Prozent kleinere Dateien gegenüber JPEG an, bei vergleichbarer sichtbarer Qualität. Dazu kommen Transparenz über einen Alpha-Kanal, HDR mit 10- und 12-Bit-Farbtiefe und Animation in einer einzigen Datei. siteway liefert AVIF als erste Quelle in jedem picture-Element aus.
Alle großen: Chrome seit Version 85 (2020), Firefox seit 93 (2021), Safari seit 16.1 (2022) und Edge seit 121 (Januar 2024). Auf mobilen Geräten ist AVIF ab Android 12 und iOS 16 dabei; die Alliance for Open Media nennt AVIF entsprechend als von allen großen Browsern unterstützt. Nach den Zahlen von caniuse.com liegt die weltweite Abdeckung bei rund 94 bis 95 Prozent. Die verbleibende Lücke ist klein, aber real — deshalb liefert siteway immer WebP und ein JPG oder PNG als Fallback mit. Ohne Fallback sieht ein Browser ohne AVIF-Unterstützung kein Bild, sondern gar nichts.
Wenn du über ein picture-Element ausliefern kannst, nimm beides: AVIF als erste Quelle für die stärkste Kompression, WebP als zweite Quelle für alles, was AVIF nicht darstellt. Der Browser prüft von oben nach unten und lädt genau eine Datei — Mehraufwand entsteht nur im Build, nicht beim Besucher. Nur wenn wirklich ein einziges Format möglich ist, etwa bei Uploads in ein System ohne picture-Unterstützung oder in einer E-Mail, ist WebP die sicherere Wahl, weil es praktisch überall läuft. siteway entscheidet das pro Einbau statt pauschal.
Ja, alle drei. AVIF hat einen Alpha-Kanal wie PNG, kann mehrere Bilder in einer Datei speichern und damit Animation wie ein GIF, und es unterstützt High Dynamic Range mit 10 und 12 Bit Farbtiefe sowie einen weiten Farbraum. Praktisch heißt das: Ein freigestelltes Produktbild oder ein Logo mit weichen Kanten braucht kein schweres PNG mehr. siteway erzeugt für solche Motive trotzdem ein PNG als Fallback statt eines JPG, weil JPEG keine Transparenz kann und der Freisteller sonst auf falschem Grund landet.
Drei, die man kennen sollte. AVIF rendert nicht progressiv: Die Datei muss vollständig geladen sein, bevor das Bild erscheint — ein halb geladenes AVIF zeigt nichts. Das Dekodieren kostet mehr Rechenzeit als bei JPEG, was auf sehr schwachen Geräten spürbar werden kann. Und das Kodieren dauert länger, was allerdings nur die Build-Zeit betrifft und nicht den Besucher. Gegen alle drei hilft dieselbe Disziplin: passende Bildbreiten statt Riesendateien, feste width- und height-Attribute und ein sauberer Fallback.
Über sharp, eine schnelle Bildbibliothek für Node.js, direkt im Build. Aus jedem Original entstehen AVIF, WebP und ein JPG- oder PNG-Fallback in den Breiten 480, 800 und 1.200 Pixel. AVIF läuft dabei auf Qualitätsstufe 60 bis 62 — deutlich niedriger als die Stufe, die ein JPG für dieselbe Optik braucht, weil die AV1-Kompression auch bei niedrigen Stufen sauber bleibt. Zusätzlich schreibt die Pipeline die Originalmaße in ein Manifest, aus dem die width- und height-Attribute im HTML kommen. Jedes Ergebnis sieht sich vor dem Deployment ein Mensch an.
Nein. AVIF ist ein offener Standard der Alliance for Open Media, die Spezifikation ist frei verfügbar und die Referenz-Implementierung libavif quelloffen. Genau das unterscheidet AVIF von HEIC, dem technisch verwandten Format aus der Apple-Welt, das auf dem patentbelasteten HEVC-Codec aufsetzt und sich deshalb nie als Webformat durchgesetzt hat. Für eine Website heißt das: kein rechtliches Kleingedrucktes, sondern eine Encoder-Einstellung im Build.
// womit das zusammenhängt
stack & leistung
// stack · übersicht
Die Kategorie über diesem Format: AVIF, WebP und WebM im Zusammenspiel, srcset, Lazy Loading und width/height gegen Layout-Sprünge.
zum stack →
// stack · schwesterformat
Der breit unterstützte Allrounder und die zweite Quelle in unserer Kette — die richtige Wahl überall dort, wo nur ein einziges Format möglich ist.
weiterlesen →
// leistung · buchen
Diese Technik als fertiger Baustein: eine Galerie, die viele Motive schnell und responsive ausliefert. Der Ort, an dem du das buchst.
zur leistung →
// Bilder, die nicht bremsen?
Projekt anfragen