Das AV1 Image File Format (AVIF) ist eine Codierung, die auf dem Open-Source-AV1-Videocodec basiert. AVIF ist noch neuer als WebP und wird seit 2020 in Chrome und Opera nur seit 2020, Firefox 2021 und Safari 2022 unterstützt. Wie bei WebP zielt auch AVIF darauf ab, alle denkbaren Anwendungsfälle für Rasterbilder im Web zu berücksichtigen: GIF-ähnliche Animation, PNG-ähnliche Transparenz und verbesserte Wahrnehmungsqualität bei Dateigrößen, die kleiner als JPEG oder WebP sind.
Bisher zeigt sich AVIF vielversprechend. Ein von Netflix entwickeltes Test-Framework – einem Gründungsmitglied der Alliance for Open Media, der Gruppe, die für die Entwicklung des AV1-Codecs verantwortlich ist – zeigt im Vergleich zu JPEG oder WebP deutliche Reduzierung der Dateigrößen. In weiteren Studien von Cloudinary und dem Codecs-Team von Chrome wurden die aktuellen Codierungsstandards positiv bewertet.
Obwohl die Tools relativ begrenzt sind, können und sollten Sie noch heute mit AVIF experimentieren, da eine der Codierungen von Squoosh verfügbar ist:
Unterstützte Browser
Wenn Sie sich nun fragen, warum wir so viel Zeit mit der Diskussion von JPEG verbracht haben, wenn AVIF und WebP uns bessere Ergebnisse und weitaus kleinere Dateigrößen liefern können, liegt dies daran, dass sie – und jede neue Bildcodierung – einen großen Haken haben. Seit Jahrzehnten werden GIF-, PNG- und JPEG-Dateien in allen Browsern unterstützt. Im Vergleich zu diesen Legacy-Bildformaten ist AVIF ganz neu, und obwohl die Unterstützung für WebP in modernen Browsern hervorragend ist, ist sie im gesamten Web keine Selbstverständlichkeit.
Wie Sie sich vorstellen können, wurde viel Zeit und Mühe in die Entwicklung neuer Bildformate gesteckt, die sowohl die Qualität als auch die Übertragungsgröße verbessern sollen. Formate wie WebP, AVIF und JPEG XL (nicht in keinem Browser unterstützt) zielen darauf ab, die einheitliche Lösung für Rasterbilder im Web zu bilden, ebenso wie SVG für Vektoren. Andere, wie JPEG 2000 (nur in Safari unterstützt) sollten dieselben Anwendungsfälle erfüllen wie eine JPEG-Basisdatei, verbesserte aber die Komprimierungsmethoden, um ein optisch ähnliches, aber viel kleineres Bild zu liefern.
Einige dieser neueren Formate tragen zwar den Namen JPEG, ihre Codierung ist jedoch so ähnlich wie die von JavaScript und Java. Ein Browser, der eine bestimmte Codierung nicht unterstützt, kann diese Bilddatei überhaupt nicht parsen. Es ist so, als hätte ich Sie angewiesen, Ihr Millimeterpapier-Pixelraster in einer Sprache auszufüllen, die Sie nicht verstehen. Der Browser fordert die Bilddaten an, versucht, sie zu parsen, und verwirft sie, wenn sie fehlschlagen, ohne dass etwas gerendert wird. Eine Bildquelle, die außerhalb moderner Browser nicht gerendert werden kann, wäre eine riesige Fehlerstelle für unsere Inhalte und für das Web im Allgemeinen – ein defektes Bild und eine große Anzahl von Nutzern auf der ganzen Welt verschwendet Bandbreite. Sie sollten ein robusteres Web nicht nur einem leistungsstärkeren Web zugunsten eines leistungsstärkeren Webs opfern.
Unser zielstrebiger Freund <img> hat es lange Zeit außergewöhnlich schwierig gemacht, ein neues Bildformat zu verwenden, wie vielversprechend es auch erschien. Denken Sie daran, dass <img> nur eine einzelne Quelldatei unterstützt und dafür optimiert war, diese Datei schnell zu übertragen – so schnell, dass wir diese Anfrage nicht über JavaScript abfangen konnten. Bis vor Kurzem war es die einzig mögliche Option, allen Nutzern den brandneuen Bildtyp anzubieten und eines der „alten“ Formate anzufordern, als der Browser einen Fehler auslöste. Dadurch wurde eine zweite Dateiübertragung ausgelöst, nachdem die erste verschwendet wurde.
Aus diesem Grund und vor allem wegen des jahrzehntelangen Bestands von <img> musste sich das Unternehmen ändern. Im nächsten Modul, Responsive Bilder, lernen Sie die in die HTML-Spezifikation eingeführten Funktionen zur Behebung dieser Probleme kennen und erfahren, wie Sie sie in Ihrer täglichen Arbeit verwenden können.