Neues, vielversprechendes Bildformat AVIF im Anflug
Philipp Zeder
Kategorie:in
Entwicklung & Performance
Veröffentlicht am 11. Sept. 2020
Die Bildformate JPEG und PNG kennst Du. Über das modernere Format WebP haben wir hier im Blog ebenfalls schon berichtet. Mit AVIF wird in den neuesten Versionen von Chrome und Firefox jetzt ein weiteres, modernes Bildformat unterstützt, das noch kleinere Dateigrössen als die älteren Formate verspricht. Selbstverständlich bei gleicher Qualität.
Offener Standard, breit abgestützt
Neue Bildformate können technologisch noch so fortgeschritten sein, ohne breite Unterstützung ist die Etablierung als Standard mehr als schwierig. Mit der «Alliance for Open Media» (AOMedia) steht hinter AVIF ein Zusammenschluss aus Branchengrössen wie Google, Apple, Netflix, Mozilla und vielen anderen. Die Allianz hat sich auf die Fahne geschrieben, Medientechnologien effizienter, mit besserer Qualität und für alle Menschen frei nutzbar zu machen.
AVIF vs WEBP vs JPEG
AVIF glänzt gegenüber den älteren Dateiformaten mit massiv kleineren Dateigrössen. Gegenüber JPEG kannst Du mit ca. 50 % kleineren Dateien rechnen. Und selbst gegenüber WebP liegen die Einsparungen bei ca. 20 %.

Vergleich der Dateigrössen von JPG, WebP und AVIF.
Bild: «AVIF and WebP vs JPEG» von Daniel Aleksandersen, lizenziert unter CC BY-SA 4.0
Neben kleineren Bilddateien bietet AVIF aber noch weitere tolle Features:
- Einen Alpha-Kanal für transparente Bereiche
- Verlustfreie oder verlustbehaftete (lossy) Kompression
- Keine Einschränkung im verwendeten Bild-Codec
- Unterstützung für mehrere Frames, sprich Animation
- Unterstützung für High-Dynamic-Range-Bilder (HDR)
Wann und wie kann ich AVIF nutzen?
AVIF wird ab der Chrome-Version 85 unterstützt, die vor ein paar Tagen erschienen ist. Das Bildformat wird damit in den kommenden Wochen von einem grossen Teil der Internet-Nutzer*innen betrachtet werden können. In der aktuellsten Firefox-Version 80 kann AVIF mithilfe eines Feature-Flags aktiviert werden:

AVIF-Support in Firefox 80 aktivieren.
Obwohl AVIF noch nicht in allen Browsern unterstützt wird, kannst Du das Format schon jetzt Deinen Website-Besucher*innen anbieten. Am einfachsten funktioniert das mit dem HTML-Tag <picture>
:
<picture>
<source type="image/avif" srcset="avif-test.avif">
<source type="image/webp" srcset="avif-test.webp">
<img src="avif-test.png" alt="AVIF-Testbild">
</picture>
Browser laden das erste Format, das sie unterstützen. Du kannst also mit der Reihenfolge der Quellen steuern, welches Bildformat an den Browser geliefert wird. Unterstützt der Browser <picture>
nicht, wird die Quelle des <img>
-Tags geladen. Und so sieht das dann aus:

AVIF generieren
Die bequemste Art, um einzelne Bilder nach AVIF zu konvertieren, bietet Squoosh. Die vom Google-Chrome-Labs-Team entwickelte Web-Applikation bietet Dir eine Vielzahl von Einstellungsmöglichkeiten und neben AVIF noch weitere Formate. Ausserdem lässt sich Squoosh als Chrome-App auf Deinem Rechner installieren.
Wie bei Squoosh kannst Du auch mit avif.io Bilder direkt im Browser nach AVIF konvertieren. Verglichen mit dem Google-Tool sogar noch etwas schneller. Ausserdem kannst Du mehrere Bilder gleichzeitig konvertieren lassen.
Magst Du es lieber etwas technischer, solltest Du Dir die Referenzimplementation libavif oder das Tool cavif vom ImageOptim-Entwickler anschauen. Eine Liste mit Software, die AVIF bereits implementiert, findest Du im GitHub-Repo von AOMedia.
Fazit: AVIF ist vielversprechend
Mit der Unterstützung in Chrome und Firefox sind bereits über 70 % des weltweiten Browser-Markts abgedeckt. Zusammen mit den guten Kompressionsraten, den zusätzlichen Features wie dem HDR-Support und der breiten Abstützung durch die Alliance for Open Media stehen die Zeichen gut, dass sich AVIF als Bildformat im Web durchsetzen wird. Wir schauen gespannt darauf, wie sich die Unterstützung in den Browsern entwickeln wird.
Beteilige dich an der Diskussion
15 Kommentare
Hi Christian, ich habe Firefox nochmals aktualisiert (neu Version 84.0) und kann das Problem nun auch reproduzieren. Merci für den Hinweis.
Hey Philipp, cooler Artikel! Ich hab gesehen, dass du als Möglichkeit zur Konvertierung Squoosh erwähnst. Ich habe die letzten Wochen fleißig an https://avif.io/ gearbeitet. Mit diesem Tool kann man jegliche Bildformate in AVIF konvertieren. Der Vorteil gegenüber Squoosh liegt in einer schnellen Konvertierung und der Möglichkeit, viele Dateien gleichzeitig umzuwandeln. Ist das womöglich eine Erwähnung in deinem Artikel wert? Ich freu mich sehr auf dein Feedback! Liebe Grüße, Justin
Hey Justin, danke für den Tipp und das coole Tool. Ich habe den Artikel direkt erweitert. ?
Danke für den Bericht. Ich habe bei Firefox ein Problem mit transparenten .avif Dateien, die Transparenz funktioniert nicht. Bei webp zeigt Firefox korrekt an. Hat jemand eine Lösung?
Mir werden transparente .avif-Dateien auch in Firefox korrekt angezeigt. Hilft allenfalls ein Firefox-Update?
Eine experimentelle Version ist auf Drupal verfügbar ;)
https://www.drupal.org/project/avif
Vielen Dank für den Hinweis, Mickael. ?
Es macht den Anschein, dass sich bei GD noch nix bewegt – https://bugs.php.net/bug.php?id=78832. Interessant ist, wann AVIF per `imagick` verfügbar sein wird – oder kommen andere Backends in Frage? `identify -list format | grep AVIF` bleibt bis jetzt auf den cyon servern stumm – ist diesbezüglich Support in der Pipeline?
Imagemagick AVIF Support auf Cloudlinux-Uservoice up-voten:
https://cloudlinux.uservoice.com/forums/269295-general/suggestions/42354850-avif-support
Tönt extrem vielversprechend!
Tja dann hoffen wir das auch Microsoft mitzieht. In der Vergangenheit hat das ja immer nicht so ganz funktioniert.
Natürlich kann man ja auch immer verschiedene Formate mitliefern, heisst aber, das die CMS auch selbständig diese Formate konvertieren können.
Mal schauen… ?
Um Microsoft mache ich mir überhaupt keine Sorgen, die haben schon Pläne bekanntgegeben, wie selbst der Windows-Fileexplorer das Format unterstützen wird. Lieber wüsste ich, ob und ab wann Adobe das Format untersützt. Die diversen Tools sind gut und recht, aber um einen reibungslosen Workflow zu unterstützen, müssen Photoshop und Co. damit was anfangen können. In der Vergangenheit war die Unterstüzung von WebP z.B. nur mit unzulänglichen Thirtparty Plugins möglich. Schade ist Adobe kein Gründungsmitglied von AV1.
Da Microsoft ebenfalls Teil der Allianz ist und Edge mittlerweile auf Chromium basiert, bin ich guter Dinge, dass auch Microsoft mitziehen wird. Mit der Verbreitung in den CMS sprichst Du einen wichtigen Punkt an. Ich bin gespannt, ab wann AVIF in WordPress und Co. nativ unterstützt wird.
Immer wieder gut, Eure Blog-Beiträge – vielen Dank dafür!
Lieber Philipp
Danke für den Blogbeitrag. Diese Infos sind doch mal gute Neuigkeiten in der aktuellen Zeit. Vielversprechend um dann auch wieder grössere Bilder zu laden obwohl sie dann weniger kb fressen.
Jetzt können wir einfach hoffen, dass die Verbreitung auch wirklich stattfindet und nicht zwischen die Bänke fällt wie auch schon andere gute Innovationen.
Lieber Gruss
Simon
Möchte darauf hinweisen, dass der Support von Firefox in Bezug auf .avif bislang leider die Transparenz nicht mit einbezieht. Ja da bin ich sicher, das könnt Ihr gleich beim konvertieren auf Sqoosh in einem neuen Firefox verifizieren. Der 85er nightly akzeptiert.avif bereits standardmäßig. Nur eben die Transparenz wird ausgelassen. Da das Problem nicht neu ist, frage ich mich, weshalb das nicht in Ordnung gebracht wird.
Lieber Phillip, ich wüßte gerne, wie Du das hinbekommst, wenn Du ein .png konvertierst mit Transparenz und dann eine korrekte Ausgabe bekommst. Danke.
Christian