Kein Bild? Dann unterstützt Dein Browser noch nicht AVIF

Das AVIF-Bildformat
Format der Zukunft

Das AVIF-Bildformat gehört zu den fortschrittlichsten Bilddateiformaten.

AVIF (Kurzversin von AV1 Image File Format) ist ein Grafikformat, das auf dem Videokompressionverfahren AOMedia Video 1 (AV1) basiert 1. AVIF ist zwar noch sehr jung, aber es wird von der Alliance for Open Media vorangetrieben wird. Zu diesem gemeinnützigen Industriekonsortium gehören Megafirmen wie Amazon, Cisco, Google, Intel, Microsoft, Adobe, ARM, Nvidia und weitere Firmen

In einer Reihe von Tests, die Netflix im Jahr 2020 durchführte, zeigte AVIF eine bessere Komprimierungseffizienz als JPEG sowie eine bessere Detailerhaltung, weniger Blocking-Artefakte und ein geringeres Ausbluten der Farben um harte Kanten in Kompositionen aus natürlichen Bildern, Text und Grafiken.2

Darum gehört die Zukunft sicherlich AVIF, denn es besticht durch großartige Eigenschaften, die die anderen Bildformate aussticht.

Vergleiche mal diese beiden Bilder im Chrome-Browser: AVIF-Version des Hundes und JPG-Version des Hundes. Siehst Du einen Unterschied? Während die AVIF-Datei 43.121 Byte (45 KB) groß ist, ist die JPG-Datei 76.281 Byte (78 KB) groß.

Die Vorteile von AVIF

AVIF kombiniert die effizienten Kompressionsalgorithmen des AV1-Videocodecs mit der Containertechnik des HEIF-Formats. Und das bietet AVIF:

  • hochqualitative Kompression
  • funktionale Vielfalt
  • verlustfreie (lossless) und …
  • … verlustbehaftete (lossy) Kompression
  • Speicherung transparenter Bildbereiche in einem Alpha-Kanal
  • Funktionen wie Körnigkeit, Farbunterabtastung und HDR (High Dynamic Range)
  • ermöglicht animierte Sequenzen – ähnlich den GIF-Animationen
  • unterstützt erweiterte Farbräume (Wide Color Gamut, WCG)

Die HDR-Technologie ist die Basis für Hochkontrastbilder, die eine besonders gleichmäßige Helligkeit sowie starke Farben und Kontraste ermöglichen. Über Metadaten können nicht nur HDR-Informationen, sondern auch Angaben zum Farbumfang weitergegeben werden.

Die Unterstützung für AVIF wächst kontinuierlich

Schaut man sich die Unterstützung von AVIF auf CanIuse.com an, so siehst Du, dass das noch sehr junge Dateiformat bereits gut von modernen Browsern unterstützt wird.

Mit einer einfachen Suche nach einer Eigenschaft, einem Parameter oder einer Funktion erfährst Du auf caniuse.com genau, welche Browser und Versionen diese Technologie unterstützen.

Mittlerweile unterstützen auch schon zahlreiche Programme das AVIF-Format. Dazu gehören unter anderem der Video-Player VLC media player, die Browser Opera, Mozilla Firefox und Google Chrome, die kostenlose Bildbearbeitungssoftware GIMP, Paint.NET oder die Konvertiersoftware FFmpeg.

Bilder ins AVIF-Format konvertieren

Um Bilder ins AVIF-Format zu konvertieren, gibt es bereits einige Lösungen. Aber noch keine kostenlose Desktop-Lösung. Die beste Lösung ist das Kommandozeilenwerkzeug ImageMagick.

Online-Konverter
avif.io
squoosh.app
Desktop-Programme
Gimp
Kommandozeile
ImageMagick
Englischsprachige Anleitung für ImageMagick

AVIF-Bilder einbauen mit dem <picture>-Tag

AVIF-Bilder kannst Du direkt mit dem <img>-Tag einbauen. Ähnlich wie bei WebP-Bildern entsteht ein Problem, wenn der Browser des Nutzers AVIF nicht unterstützt. Dann sieht er kein Bild.

Dieses Problem umgehst Du aber einfach, indem Du das <picture>-Tag nutzt. Mit dem <picture>-Tag überlässt Du dem Browser die Wahl. Unterstützt der Browser AVIF-Bilder – z.B. Chrome – dann wählt und lädt Chrome das AVIF-Bild. Kennt der Browser das Bildformat nicht, greift dieser dann wiederum auf das »normale« JPG-Bild zurück.

Das sieht dann so aus:

<picture>
  <source srcset="images/meinbild.AVIF" type="image/AVIF">
  <source srcset="images/meinbild.webp" type="image/webp">
  <img src="images/meinbild.jpg" alt="Beschreibung des Fotos">
</picture>