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.
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.
