Stillleben im AV1 Image Format (AVIF)

Stillleben im AV1 Image Format (AVIF) sind Bilder, die mit dem Videokompressionsverfahren AOMedia Video 1 (AV1) codiert sind. AVIF ist ein neues Grafikformat, das eine hohe Bildqualität bei geringer Dateigröße bietet. Es unterstützt auch Animationen und Farbtiefen bis 12 Bit. Firefox 113 hat die Unterstützung für AVIF-Bilder hinzugefügt.

Vor diesem Hintergrund beschäftigen wir uns in diesem Blogbeitrag mit dem neuen Grafikformat.

Welche Vorteile hat AVIF gegenüber JPEG?

AVIF hat einige Vorteile gegenüber JPEG, die es zu einem attraktiven Bildformat machen. Zu den wichtigsten Pluspunkten gehören:

• AVIF ist ein Open-Source-Codec, der keine Lizenzkosten verursacht und von vielen großen Unternehmen der digitalen Wirtschaft unterstützt wird.
• AVIF komprimiert Bilder deutlich effizienter als JPEG und bietet eine bessere Bildqualität bei geringerer Dateigröße. Aktuell reduziert AVIF im Vergleich zum etablierten Standardformat JPEG die Bildgröße durchschnittlich um beachtliche 50 Prozent.
• AVIF unterstützt Farbtiefen bis 12 Bit, während JPEG nur 8 Bit unterstützt. Das bedeutet, dass AVIF ein breiteres Spektrum an Farben und Kontrasten darstellen kann.
• AVIF unterstützt auch Animationen und den Alphakanal, was JPEG nicht kann. Das macht AVIF zu einer modernen Alternative zum veralteten GIF-Format.

Welche Nachteile hat AVIF?

AVIF ist ein vielversprechendes Bildformat, aber es hat auch einige Nachteile, die seine Verbreitung behindern könnten. Zu den wichtigsten Nachteilen gehören:

• AVIF ist noch nicht von allen Browsern und Betriebssystemen unterstützt. Zum Beispiel unterstützen Chrome und Firefox AVIF, aber Safari und Internet Explorer nicht. Das bedeutet, dass Webseiten, die AVIF-Bilder verwenden, möglicherweise nicht für alle Nutzer korrekt angezeigt werden.
• AVIF ist ein relativ neues Format, das noch in Entwicklung ist. Das bedeutet, dass es möglicherweise noch Fehler oder Inkompatibilitäten gibt, die die Qualität oder Funktionalität der Bilder beeinträchtigen können. Außerdem gibt es noch nicht viele Tools oder Bibliotheken, die AVIF-Bilder erstellen oder bearbeiten können.
• AVIF erfordert eine höhere Rechenleistung als JPEG, um Bilder zu kodieren und zu dekodieren. Das bedeutet, dass AVIF-Bilder länger brauchen, um verarbeitet zu werden, was die Performance oder den Energieverbrauch der Geräte beeinflussen kann.

WordPress hat sich für WebP entschieden. Welche Vorteile hat AVIF gegenüber WebP?

AVIF hat einige Vorteile gegenüber WebP, die es zu einem fortschrittlicheren Bildformat machen. Zu den wichtigsten Vorteilen gehören:

• AVIF hat eine höhere Kompression als WebP, was bedeutet, dass es die Dateigröße noch mehr reduzieren kann, ohne die Bildqualität zu beeinträchtigen. Zum Beispiel kann AVIF die Dateigröße von JPEG um etwa 50% verbessern, während WebP um etwa 30% verbessern kann.
• AVIF hat eine verbesserte Farbtiefe als WebP, was bedeutet, dass es mehr Farben und Kontraste darstellen kann. WebP arbeitet nur mit einer Tiefe von 8 Bit, während AVIF 8, 10 und 12 Bit unterstützt. Das macht AVIF geeigneter für HDR-Bilder oder Bilder mit hoher Dynamik.
• AVIF basiert auf dem AV1-Codec, der ein Open-Source-Codec ist, der von vielen großen Unternehmen der digitalen Wirtschaft unterstützt wird. WebP basiert auf dem VP8-Codec, der von Google entwickelt wurde und möglicherweise weniger Akzeptanz findet.

Wird AVIF WebP ersetzen?

Das ist eine schwierige Frage, die von vielen Faktoren abhängt. In diesem Kontext könnte man sagen, dass AVIF das Potenzial hat, WebP zu ersetzen, da es technisch überlegen ist und von vielen wichtigen Akteuren der digitalen Branche unterstützt wird. Allerdings hat WebP auch einige Vorteile, wie eine breitere Browser-Unterstützung und eine längere Existenz auf dem Markt. Es ist möglich, dass beide Formate nebeneinander existieren werden, bis sich eines von ihnen als Standard durchsetzt. Das könnte noch einige Jahre dauern.

Wie kann ich AVIF Bilder erstellen?

Es gibt verschiedene Möglichkeiten, AVIF-Bilder zu erstellen. Zum Beispiel können Sie:

• Eine Online-Konvertierungsdienst wie Convertio verwenden, um Ihre JPG-, PNG- oder GIF-Dateien in AVIF umzuwandeln. Sie müssen nur Ihre Dateien hochladen, das Zielformat auswählen und die Konvertierung starten.
• Eine Bildbearbeitungssoftware wie GIMP verwenden, die das AVIF-Format ab Version 2.10.22 unterstützt. Sie können Ihre Bilder öffnen, bearbeiten und im AVIF-Format speichern.
• Eine Kommandozeilen-Tool wie avifenc oder avifdec verwenden, die mit der libavif-Bibliothek geliefert werden. Sie können Ihre Bilder aus den Formaten JPG, PNG oder Y4M in AVIF konvertieren oder umgekehrt.

Wie kann ich mit Photoshop AVIF Bilder erstellen?

Um mit Photoshop AVIF-Bilder zu erstellen, benötigen Sie ein Plugin, das das AVIF-Format unterstützt. Zum Beispiel können Sie das AVIF-Plugin für Photoshop herunterladen und installieren. Das Plugin ist jedoch nur für Windows verfügbar. Nach der Installation des Plugins können Sie Ihre Bilder in Photoshop öffnen, bearbeiten und im AVIF-Format speichern. Sie müssen nur unter „Datei“ > „Speichern unter“ die Option „AVIF“ auswählen und die gewünschten Optionen festlegen.

Wie kann ich AVIF Bilder in WordPress verwenden?

Um AVIF-Bilder in WordPress zu verwenden, gibt es mehrere Möglichkeiten. Zum Beispiel können Sie:

• Ein Plugin wie Converter for Media – Bilder optimieren | Konvertiere WebP & AVIF installieren und aktivieren. Das Plugin konvertiert automatisch Ihre hochgeladenen Bilder in WebP- und AVIF-Formate und liefert sie an die Browser aus, die sie unterstützen.
• Ein Bild-CDN wie Imagekit, Cloudinary oder Cloudimage verwenden, das Ihre Bilder on-the-fly in WebP- und AVIF-Formate konvertiert und optimiert. Sie müssen nur das CDN mit Ihrem WordPress verbinden und die entsprechenden Einstellungen vornehmen.
• Das HTML picture-Tag verwenden, um verschiedene Bildformate anzubieten, die je nach Browserunterstützung ausgewählt werden. Sie müssen Ihre Bilder manuell in AVIF konvertieren und hochladen und dann das picture-Tag in Ihren Beiträgen oder Seiten einfügen.

Weitere Informationen finden Sie in dem Blog von AVIF über WordPress.

Wie kann ich die Bildqualität von AVIF beurteilen?

Die Bildqualität von AVIF hängt von verschiedenen Faktoren ab, wie der Kompressionsrate, der Farbtiefe, dem Kontrast und dem Detailgrad. Um die Bildqualität von AVIF zu beurteilen, können Sie:

• Die Dateigröße von AVIF mit der von anderen Formaten wie JPEG oder WebP vergleichen. Je kleiner die Dateigröße bei gleicher Auflösung ist, desto effizienter ist die Kompression.
• Die Farben und Kontraste von AVIF mit denen von anderen Formaten vergleichen. AVIF unterstützt Farbtiefen bis 12 Bit, während JPEG nur 8 Bit unterstützt. Das bedeutet, dass AVIF ein breiteres Spektrum an Farben und Kontrasten darstellen kann, vor allem bei HDR-Bildern.
• Die Details und Schärfe von AVIF mit denen von anderen Formaten vergleichen. AVIF verwendet einen modernen Videocodec, der feine Strukturen und Texturen besser erhalten kann als JPEG oder WebP. Das bedeutet, dass AVIF weniger Artefakte oder Unschärfen aufweist.

Wie kann man AVIF Animation mit Blender erstellen?

Ja, AVIF soll auch Animationen können und so GIF und APNG ablösen. AVIF verwendet Sequenzierung, um Bewegtbilder zu kodieren, die eine hohe Bildqualität und Auflösung bei geringer Dateigröße bieten. AVIF unterstützt auch Transparenz und Farbtiefen bis 12 Bit. Um eine Animation mit Blender zu erstellen und als AVIF zu exportieren, können Sie folgende Schritte ausführen:

• Erstellen Sie Ihre Animation in Blender wie gewohnt und stellen Sie die gewünschten Einstellungen für die Bildrate, die Auflösung und die Anzahl der Frames ein.
• Wählen Sie unter „Ausgabe“ > „Ausgabe“ einen Ordner aus, in dem Sie Ihre Animation als Bildsequenz speichern möchten. Wählen Sie als Dateiformat „PNG“ oder „JPEG“ aus.
• Klicken Sie auf „Animation rendern“ oder drücken Sie Strg+F12, um Ihre Animation als Bildsequenz zu rendern. Sie sollten nun viele nummerierte Bilder in Ihrem Ausgabeordner haben.

Leider konnten wir mit Blender keine AVIF Animation exportieren. Vor diesem Hintergrund haben wir uns einfach ffmpeg installiert und verwenden folgenden Befehl:

ffmpeg -framerate 30 -i %04d.png -c:v libaom-av1 -crf 10 -b:v 0 -strict experimental output.avif

Um ffmpeg zu verwenden, müssen Sie ihm einige Argumente geben, wie z.B. den Eingabedateinamen, den Ausgabedateinamen und die gewünschten Optionen. Zum Beispiel, um ein Video in avif zu konvertieren, können Sie den folgenden Befehl verwenden:

ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -b:v 0 -strict experimental output.avif

Dieser Befehl nimmt die Datei input.mp4 als Eingabe, kodiert sie mit dem libaom-av1 Codec, setzt die Qualität auf 30 (niedriger ist besser) und schreibt die Ausgabe in die Datei output.avif. Sie können die Optionen nach Ihren Wünschen anpassen.

Sie können mehr über die Verwendung von ffmpeg in der offiziellen Dokumentation oder in verschiedenen Online-Tutorials lernen.

Es gibt einige weitere Lösungen, um eine Sequenz von Bildern in eine AVIF-Animation zu konvertieren. Einige Beispiele sind:

• GIMP: Ein kostenloses und quelloffenes Bildbearbeitungsprogramm, das viele Formate unterstützt. Sie können GIMP verwenden, um Ihre Bilder in eine AVIF-Animation zu konvertieren, indem Sie die folgenden Schritte ausführen:
• Öffnen Sie GIMP und wählen Sie "Datei" > "Als Ebenen öffnen" und wählen Sie Ihre Bilder aus.
• Wählen Sie "Filter" > "Animation" > "Optimieren (für GIF)" und klicken Sie auf "OK".
• Wählen Sie "Datei" > "Exportieren als" und geben Sie einen Dateinamen mit der Endung ".avif" ein.
• Wählen Sie im Dialogfeld "Exportieren als AVIF" die gewünschten Optionen aus und klicken Sie auf "Exportieren". Dabei müssen Sie beachten, dass GIMP nur AVIF-Dateien exportieren kann, wenn Sie ein Plugin wie avif-gimp installiert haben.
• ImageMagick: Ein weiteres Kommandozeilenprogramm, das viele Bildformate verarbeiten kann. Sie können ImageMagick verwenden, um Ihre Bilder in eine AVIF-Animation zu konvertieren, indem Sie einen Befehl wie diesen ausführen: magick convert *.png output.avif Dabei müssen Sie die Parameter wie den Dateinamen und die Qualität entsprechend anpassen. Sie müssen auch sicherstellen, dass Sie die neueste Version von ImageMagick mit AVIF-Unterstützung haben.

Firefox und das AVIF-Format

Firefox unterstützt das AVIF-Format bereits seit Mitte 2020, aber es musste in der Konfiguration zuerst aktiviert werden. Mit der im Februar 2023 erschienenen Version Firefox 86 wird das Format standardmäßig unterstützt, ohne es erst einschalten zu müssen. Das gilt auch für AVIF-Animationen (AVIS), die eine Alternative zu GIF und APNG darstellen sollen. Um Hinweise auf die Verwendung von AVIF-Animationen in Firefox zu finden, können Sie:

• Die offizielle Dokumentation von Mozilla lesen, die das AVIF-Format und seine Vorteile erklärt. Sie finden sie unter https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif
• Die Release Notes von Firefox 86 lesen, die die Unterstützung für AVIF und AVIS erwähnen. Sie finden sie unter https://www.mozilla.org/en-US/firefox/86.0/releasenotes/
• Eine Testseite besuchen, die verschiedene AVIF-Animationen anzeigt. Sie finden sie unter https://jakearchibald.com/2020/avif-has-landed/

Wie kann ich eine AVIF Animation in eine HTML-Seite einbinden?

Um einen AVIF-Film in Ihre HTML-Seite einzubinden, können Sie das HTML5-Element video verwenden, das die Wiedergabe von Videodateien ermöglicht. Sie müssen nur die Quelle Ihres AVIF-Films mit dem Attribut src angeben und den Typ als video/avif deklarieren. Zum Beispiel können Sie folgenden Code verwenden :

<video width="320" height="240" controls>
  <source src="mein_avif_film.avif" type="video/avif">
</video>

Beachten Sie jedoch, dass nicht alle Browser das AVIF-Format unterstützen. Um die Kompatibilität zu erhöhen, können Sie alternative Quellen mit anderen Formaten wie MP4 oder WebM angeben, die der Browser auswählen kann, wenn er AVIF nicht unterstützen kann. Zum Beispiel können Sie folgenden Code verwenden:

<video width="320" height="240" controls>
  <source src="mein_avif_film.avif" type="video/avif">
  <source src="mein_mp4_film.mp4" type="video/mp4">
  <source src="mein_webm_film.webm" type="video/webm">
</video>

Sie können auch das HTML-Element picture verwenden, um mehrere Bildquellen für ein Bild anzugeben, das als Poster für Ihr Video dienen kann. Das Bild wird angezeigt, bis das Video gestartet wird. Sie können auch AVIF-Bilder als Quellen verwenden, die eine bessere Qualität und eine kleinere Dateigröße als JPEG oder PNG bieten. Zum Beispiel können Sie folgenden Code verwenden:

<picture>
  <source srcset="mein_avif_bild.avif" type="image/avif">
  <source srcset="mein_jpeg_bild.jpg" type="image/jpeg">
  <img src="mein_jpeg_bild.jpg" alt="Mein Poster">
</picture>
<video width="320" height="240" controls poster="mein_jpeg_bild.jpg">
  <source src="mein_avif_film.avif" type="video/avif">
  <source src="mein_mp4_film.mp4" type="video/mp4">
  <source src="mein_webm_film.webm" type="video/webm">
</video>

Beispiel: Stillleben im AV1 Image Format (AVIF)

Beispiel: AVIF - Animation

Wird AVIF akzeptiert werden?

AVIF ist ein neues Bildformat, das von der Alliance for Open Media entwickelt wurde und eine bessere Bildqualität bei geringerer Dateigröße als JPEG bietet. Es basiert auf dem AV1-Videocodec und verwendet das HEIF-Containerformat. AVIF unterstützt mehrere Farbräume, HDR, Filmkorn und Bildsequenzen.

Ob AVIF akzeptiert wird oder nicht, hängt von der Unterstützung durch verschiedene Browser, Betriebssysteme und Anwendungen ab. Derzeit unterstützen Chrome, Firefox und Opera AVIF. Windows 10 hat seit Oktober 2020 eine optionale Erweiterung für die Anzeige von AVIF-Bildern. Andere Plattformen wie Safari, iOS, Android und Photoshop haben noch keine offizielle Unterstützung für AVIF angekündigt.

In diesem Kontext könnte man sagen, dass die Akzeptanz von AVIF von der Nachfrage der Nutzer, der Verfügbarkeit von Tools und der Leistung des Formats abhängt. Es ist möglich, dass AVIF in Zukunft ein beliebtes Bildformat wird, aber es ist noch zu früh, um es sicher zu sagen.

Jetzt sind Sie gefragt!

Wie stehen Sie zu dem neuen Bildformat? Wir freuen uns auf Ihre Meinung in den Kommentaren.

Wenn Sie Fragen zur Verwendung von AVIF haben, fragen Sie uns bitte in den Kommentaren unten!

Haben Sie Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf Ihren Kommentar.

Sie können diesen Beitrag natürlich auch weiterempfehlen. Wir sind Ihnen für jede Unterstützung dankbar!

---