4. Bildformate AVIF – AV1 Image File Format

Das Bildformat AVIF verspricht, im Vergleich zu JPG und WebP, eine bessere Komprimierung und kann bereits heute eingesetzt werden.

Die primären und bekannten pixelbasierten Bildformate sind PNG, JPG und GIF. Je nach Anwendungsfall ist mal das eine, mal das andere Format die bessere Wahl. Das PNG eignet sich besser für Logos und Infogra ken, das JPG für Fotos mit Farbverläufen, das GIF kann dafür animierte Gra ken anzeigen.

Google kündigte 2010 ein neues Gra kformat für verlustbehaftet oder verlustfrei komprimierte statische oder animierte Bilder an: WebP. Das Format bietet insbesondere eine bessere Komprimierung im Vergleich zu JPG. Chrome unterstützt WebP bereits seit Oktober 2010, Opera seit März 2011. Dass das Format auch heutzutage noch eher in Webworker-Kreisen bekannt ist und nicht häu ger zum Einsatz kommt, liegt unter anderem daran, dass andere Browser etwas länger brauchten, um es zu implementieren. Firefox unterstützt das Format erst seit Version 65 (Januar 2019), Safari unterstützt es seit Version 14 (September 2020), ab macOS 11 Big Sur.

Mit AVIF gibt es nun wieder ein neues Bildformat, das auf AOMedia Video 1 (AV1) basiert, einem offenen, lizenzkostenfreien Verfahren zur Videokompression ( bit.ly/388fZqm). Ebenso wie WebP unterstützt das Format Animationen und bietet damit eine weitere Alternative zu GIF.

Daniel Aleksandersen hat die Formate JPG, WebP und AVIF in einem größeren Test mit 600 Fotos in jeweils sechs Größen verglichen. Dabei waren die WebP-Bilder im Durchschnitt 31,5% kleiner als die JPGs. Die AVIF-Bilder waren im Mittel sogar 50,3% kleiner ( bit. ly/35VAfZy). Ein Performance-Boost für jede Webseite. Aktuell unterstützen lediglich Chrome und Opera AVIF-Bilder ( caniuse.com/avif). In Firefox können Sie die Unterstützung in about:con g mit dem Flag image. avif.enabled einschalten. Im Gegensatz zu 2011 müssen Sie aber nicht darauf warten, bis alle Browser ein neues Format unterstützen. Sie können einfach Content Negotiation über das picture-Element nutzen:

Der Browser lädt so das erste Format, das er unterstützt, im Zweifel eben das bekannte JPG.

Wenn Sie die verschiedenen Bildformate selbst ausprobieren möchten, bietet sich das Online-Tool Squoosh an ( squoosh.app). In der App können Sie sowohl für WebP als auch AVIF verschiedene Justierungen vornehmen, und Bildgrößen und -qualität direkt vergleichen. Bei einem einzelnen Bild können Sie so manuell verschiedene Einstellungen durchgehen und die beste Variante aus Bildgröße und Qualität wählen. Für eine Website mit vielen Bildern macht das zuviel Arbeit, sodass auf Dauer nur eine automatische Lösung in Frage kommt, etwa durch entsprechende Plug-ins für die bekannten Content-Management-Systeme. Nicolai Schwarz