Neues, vielversprechendes Bildformat AVIF im Anflug

Philipp Zeder
Autor:
Philipp Zeder
Kategorie:
in Entwicklung & Performance
Veröffentlicht am 11. September 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.

Neues, vielversprechendes Bildformat AVIF im Anflug.

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 Dateigrössen JPEG, WEBP und AVIF.

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

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

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

Christian
Christian 15. December 2020 um 00:12

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

Philipp Zeder
Philipp Zeder cyon
15. December 2020 um 17:12

Hi Christian, ich habe Firefox nochmals aktualisiert (neu Version 84.0) und kann das Problem nun auch reproduzieren. Merci für den Hinweis.

Justin Schmitz
Justin Schmitz 17. November 2020 um 23:11

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

Philipp Zeder
Philipp Zeder cyon
24. November 2020 um 16:11

Hey Justin, danke für den Tipp und das coole Tool. Ich habe den Artikel direkt erweitert. ?

Christian
Christian 10. November 2020 um 07:11

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?

Philipp Zeder
Philipp Zeder cyon
24. November 2020 um 16:11

Mir werden transparente .avif-Dateien auch in Firefox korrekt angezeigt. Hilft allenfalls ein Firefox-Update?

Mickael
Mickael 20. October 2020 um 11:10

Eine experimentelle Version ist auf Drupal verfügbar ;)
https://www.drupal.org/project/avif

Philipp Zeder
Philipp Zeder cyon
20. October 2020 um 17:10

Vielen Dank für den Hinweis, Mickael. ?

Lukas Erni
Lukas Erni 29. September 2020 um 11:09

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?

Lukas+Erni
Lukas+Erni 01. February 2021 um 11:02

Imagemagick AVIF Support auf Cloudlinux-Uservoice up-voten:
https://cloudlinux.uservoice.com/forums/269295-general/suggestions/42354850-avif-support

Sam Müller
Sam Müller 13. September 2020 um 19:09

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… ?

NetHawk
NetHawk 21. September 2020 um 14:09

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.

Philipp Zeder
Philipp Zeder cyon
14. September 2020 um 17:09

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.

Norbert
Norbert 11. September 2020 um 17:09

Immer wieder gut, Eure Blog-Beiträge – vielen Dank dafür!

Simon
Simon 11. September 2020 um 11:09

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