Neues, vielversprechendes Bildformat AVIF im Anflug

← zurück zum Blog

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.

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.

8 Kommentare

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

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

  3. 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… 🙂

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

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

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

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

Kommentar hinzufügen

Ihre E-Mail-Adresse wird nicht veröffentlicht.
Auszufüllende Felder sind mit einem * gekennzeichnet.

*
*
*
Einfache HTML Anweisungen wie a, strong, blockquote etc. sind möglich.

Hinweis

Wir behalten uns vor, Spam-, beleidigende oder anderweitig unpassende Kommentare zu entfernen.

← zurück zum Blog