Bildformat AVIF für Websites boostet SEO, PageSpeed & User Experience

Weniger als 0,1 Prozent aller Websites setzen das AVIF-Format ein und nutzen die für Bildformate beste Möglichkeit auf eine messbare Verbesserung der Websitegeschwindigkeit, der User Experience und der Online-Sichtbarkeit bei Google. Alle anderen Websitebetreiber nutzen noch nicht das Potenzial, das AVIF als Bildformat bietet. Dieser Artikel soll Abhilfe schaffen und dich ermuntern, dich einmal ernsthaft mit dem AVIF-Format zu beschäftigen und bestenfalls auch für deine Bilder auf der Website einzusetzen.

Hast du einmal die URL deiner Website bei Google PageSpeed Insights getestet, wie es um deine Performance bestellt ist? Wenn nicht, mach es einmal direkt mit deiner eigenen Website.

Lass mich raten, diesen Wert bekommst du leider aktuell noch nicht bei deiner Website angezeigt, oder?

Je tiefer dein Wert ist, desto mehr Optimierungsbedarf steckt in deiner Website, um deinen PageSpeed zu verbessern. Wenn du einmal weiter unten auf der Testtoolseite die Empfehlungen zur Verbesserung deines PageSpeeds von Google aufklappst, kann es gut sein, dass ein Punkt moderne Bildformate beinhaltet – und zwar dann, wenn du noch immer JPG- oder PNG-Dateiformate für deine Bilder nutzt.

Das ist dann einer von mehreren Gründen, warum du bei den PageSpeed Insights noch keine Höchstwerte mit deiner Website erzielst und vermutlich auch die Core Web Vitals nicht bestehst.

Sowohl die Bilder auf unserer Agenturwebsite 4eck-media.de als auch hier auf TutKit.com selbst werden geladen im Dateiformat AVIF – ultraschnell, ultraklein in einer überzeugenden Qualität. Und AVIF unterstützt uns dabei, eine möglichst hohen PageSpeed zu erreichen.

Das relativ neue Dateiformat für Webbilder kennt nur kaum jemand, weswegen es Zeit wird, hier einmal das moderne Bildformat AVIF für Websites mit all seinen Vorteilen für SEO, PageSpeed und User Experience vorzustellen.

Das Inhaltsverzeichnis zum AVIF-Artikel:

Was ist das AVIF-Bildformat?

AVIF ist ein neues Bildformat, das im Jahr 2020 von der Alliance for Open Media (AOMedia) veröffentlicht wurde. Das Format basiert auf dem verlustfreien Kompressionsalgorithmus AV1 und bietet eine Reihe von Vorteilen gegenüber anderen gängigen Bildformaten wie JPEG und PNG sowie dem Webformat WebP.

AVIF-Bilder sind deutlich kleiner als JPEG-Bilder bei gleicher Bildqualität. Dies liegt daran, dass AV1 eine deutlich effizientere Kompression bietet. So kann ein AVIF-Bild mit der gleichen Bildqualität wie ein JPEG-Bild oft bis zu 50 % kleiner sein.

AVIF-Bilder bieten auch eine höhere Farbtiefe als JPEG-Bilder. So können AVIF-Bilder bis zu 12 Bit Farbtiefe speichern, während JPEG-Bilder nur 8 Bit Farbtiefe unterstützen. Dies führt zu einem größeren Farbumfang und realistischeren Farben in AVIF-Bildern.

Darüber hinaus sind AVIF-Bilder in der Lage, Alphakanäle zu speichern. Alphakanäle werden verwendet, um die Transparenz von Bildern zu definieren. Dies macht AVIF-Bilder ideal für die Verwendung in Grafikanwendungen, in denen Transparenz erforderlich ist.

AVIF ist ein Open-Source-Format und wird von einer Vielzahl von Software- und Hardwareanbietern unterstützt. Die meisten gängigen Bildbearbeitungsprogramme und Browser unterstützen bereits AVIF-Bilder. Gerade darum wird es Zeit, dass sich diese moderne Bildformat durchsetzt!

Die folgenden sind einige der Vorteile von AVIF gegenüber anderen gängigen Bildformaten:

• Bessere Kompressionsraten: AVIF-Bilder sind deutlich kleiner als JPEG- und PNG-Bilder bei gleicher Bildqualität.
• Höhere Farbtiefe: AVIF-Bilder unterstützen bis zu 12 Bit Farbtiefe, während JPEG- und PNG-Bilder nur 8 Bit Farbtiefe unterstützen.
• Unterstützung für Alphakanäle: AVIF-Bilder können Transparenz speichern, ersetzen damit also auch den Grund, warum heute noch PNG- oder auch WebP-Bilder in Websites eingesetzt werden.
• Open-Source-Format: AVIF ist ein Open-Source-Format und wird von einer Vielzahl von Software- und Hardwareanbietern unterstützt.
• AVIF ist ein überzeugendes Bildformat für Websites, das viele Vorteile gegenüber anderen gängigen Formaten (inkl. WEBP) bietet.

Es ist abzusehen, dass AVIF in Zukunft eine immer größere Rolle bei der Speicherung und Anzeige von Bildern in Websites spielen wird – gerade auch, weil Google den Einsatz direkt in den Empfehlungen bei den Ergebnissen der PageSpeed Insights platziert hat und mittlerweile alle gängigen Browser in den neueren Versionen AVIF unterstützen. 

Daher lohnt es sich, auch früh dran zu sein bei der Einbettung in die eigene Website, um schon jetzt die Vorteile für SEO, PageSpeed und User Experience zu nutzen.

Warum bringt AVIF Vorteile für SEO, PageSpeed und User Experience?

Am sichtbarsten wird der größte Vorteil, wenn wir einmal die Bilder vergleichen in der Ansicht. Als Beispiel habe ich ein Bild über Midjourney von einem Schwarm Clownfische generiert in der Auflösung 1024x1024 im PNG-Format.

• Original-PNG: 1,43 MB
• Über TinyPNG optimiert: 393 KB - 73 % gespart

Die ursprüngliche PNG-Datei habe ich dann konvertieren lassen über squoosh.app mit dem Ergebnis:

• Über Squoosh optimiert als WebP: 84 kb - 94 Prozent gespart
• Über Squoosh optimiert als AVIF: 42 kb - 97 Prozent gespart

Im Ergebnis ist das AVIF-Bild bei gleicher optischer Qualität nur halb so groß wie das WebP-Bild. In vielen anderen Tests hat sich gezeigt, dass Kompressionsartefakte, wie sie bei zu hoher Kompression bei JPG-Dateien auftreten, erst dann leicht sichtbar werden, wenn die Qualität unter 30 in Richtung 20 oder tiefer geregelt wird. Bei Qualität 30 bleiben selbst Textbestandteile in Pixelgrafiken immer noch schön scharf ohne Kompressionsartefakte.

Solche Ersparnisse bei bildlastigen Websites können gar nicht hoch genug gewürdigt werden.

AVIF für bessere SEO-Werte, PageSpeed und User Experience

Google hat bereits 2021 die vitalen Kernwerte (Core Web Vitals) einer Website zum Rankingfaktor erhoben. Dazu gehören beispielsweise die Ladegeschwindigkeit, also der Wert, wie schnell sich für deinen Nutzer der Hauptinhalt aufbaut. Google gibt Zeiten bis 2,5 Sekunden als guten Wert an, die Websitebetreiber für ihre Nutzer anstreben sollte.

Größere Bilddaten verursachen längere Ladezeiten. Die Core Web Vitals gelten dann als nicht bestanden.

Zudem gibt es einen zweiten Problemfall. Wenn größere Bilddaten, die beispielsweise auf PNG oder JPEG basieren, in der Website platziert sind, kann es sein, dass Textinhalt bereits geladen ist, während sich ein Bild langsamer aufbaut. Dadurch kann es zu sog. kumulativen Layoutwechseln kommen, also kleine Verschiebungen, die mit der Darstellung eines Bildes die unteren Websitebereiche nach unten drückt, wo sie ja auch hingehören. Solche kumulativen Layoutwechsel mag Google nicht und gibt sie als CLS-Fehler aus, die dazu führen, dass die Core Web Vitals auch nicht bestanden werden.

Außerdem fühlt es sich für jeden Websitebesucher einfach großartig an, wenn die Seiten rennen und die Inhalte mit Klick sofort da sind. Außerdem kannst du Bilder in einer besseren Qualität auf der Website platzieren, ohne die Kompression so weit zu fassen, dass schon Kompressionsartefakte zu sehen sind. Die Dateigröße bleibt auch bei verlustfreier Konvertierung oder normaler Kompression schön klein im Vergleich zu PNG oder JPEG. Das AVIF-Format erhöht somit aus mehreren Aspekten die User Experience für jeden User. Google zwingt uns also mit dem Bestehen der Core Web Vitals, etwas für unsere Besucher zu tun, damit diese nicht frustriert werden beim Besuch unserer Website.

Somit kannst du etwas für die Verbesserung der User Experience, des PageSpeeds und der technischen Qualität deiner Website machen, was sich alle drei positiv auf deine Online-Sichtbarkeit auswirken wird.

Browser-Support von AVIF-Bildern

Gerade wenn es um brandneue Techniken geht, ist jeder Websitebetreiber etwas zögerlich und wartet gern noch ein paar Monate. Einerseits möchte man nicht zum Betatester irgendwelcher Major-Releases etwa von Shop-Systemen oder CMS werden, andererseits ist nie ganz gegeben, dass es keine Probleme mit bestimmten Browsern oder Devices gibt.

Beim AVIF-Bildformat ist tatsächlich ausschlaggebend, ob die gängigen Browser das Format mittlerweile unterstützen. Die Website caniuse.com gibt dir darüber Auskunft: https://caniuse.com/avif

Knapp 85 Prozent in der globalen Browsernutzung wird AVIF bereits unterstützt. In Deutschland sind es mit Stand 2. September immer 80,33 % … naja Deutschland halt, wo noch immer Lücken beim Handynetz zum Alltag gehören und so manche Region weiterhin unter lahmem Internet leidet (meine Region eingeschlossen: während ich im Büro mit Gigabit unterwegs bin, kommen im Home Office gerade mal 9 MBit/sec an).

Du siehst also, dass AVIF in den wichtigsten Browsern schon seit einiger Zeit unterstützt wird.

Wie viele Websites nutzen bereits das AVIF-Format?

Ähnlich wie caniuse.com gibt dir w3tech.com statistische Auskunft über die Nutzung bestimmter Technologien. So auch für eingesetzte Bildformate in Websites.

So viel Prozent aller Websites nutzen (mit Stand September 2023): 

• PNG: 82,1%
• JPEG: 78 %
• SVG: 55,2 %
• GIF: 21,7 %
• WebP: 9,2 %
• ICO und BMP: jeweils 0,2 %
• AVIF: 0,1 % (aufgerundet)
  

Aktuell nutzen also weniger als 0,07 Prozent aller Websites das AVIF-Format. Whaaat? Das ist ja noch lächerlich wenig. Aber hey, es ist eine Chance für dich, zur technologischen Speerspitze beim Einsatz moderner Bildformate zu werden. An der Kurve im rechten Bild wird schon mal deutlich, dass die Nutzung Monat für Monat zunimmt … noch im Promillebereich. Das wird sich sicherlich bald beschleunigen.

Interessant ist, dass nicht mal 10 Prozent aller Websites der Empfehlung von Google für moderne Webformate folgen. Alle anderen machen Abstriche bei PageSpeed und User Experience und bestehen vermutlich auch die Core Web Vitals, was sich als Rankingfaktor negativ auf die Online-Sichtbarkeit auswirkt.

AVIF vs. WebP - was ist besser für deine Website?

Machen wir noch einmal einen direkten Test zur Veranschaulichung. Das Bild rechts aus dem Head-Bereich von TutKit.com hatte vor der Konvertierung zu AVIF als PNG-Datei wegen der Transparenzen über 600 KB.

Es wird nun systemseitig ausgegeben als WebP-Datei mit 159 KB (unsere Fallbacklösung!). Selbst wenn dieses nun über ein Tool wie TINYPNG, was auch WebP-Dateien reduzieren kann, optimiert wird, bleiben wir bei 128 KB. Immerhin noch 20 Prozent reduziert.

Als AVIF-Datei, welches standardmäßig bei uns dargestellt wird, weist das Bild nur noch 94 KB auf, also gerade mal 59 Prozent der Größe von der Fallback-WebP. In allen Tests konnte AVIF das WebP-Format schlagen bei der Dateigröße unter gleicher optischer Qualität.

Welche Gründe sprechen für AVIF statt WebP?

• AVIF kann Transparenzen und bewahrt sich bei höherer Kompression und niedriger Dateigröße dennoch eine bessere Bildqualität.
• Der Support ist mit knapp 85 % für AVIF bereits bei allen gängigen Browsern gegeben. Tendenz weiter steigend.
• Deine Website wird noch schneller laden dank AVIF im Vergleich zu WebP. Gerade bei bildlastigen Websites wie Online-Shops mit Kategorienseiten, wo sehr viele Produktbilder platziert sind, ist das ein Vorteil. Ebenso bei Websites, wo die Bilder hochqualitativ dargestellt werden müssen (Portfolio-Websites, Referenzen etc.), stellst du eine hohe optische Qualität bei niedriger Dateigröße sicher.

Auch ist ein Wink, was caniuse.com direkt auf der WebP-Seite schreibt: „AVIF and JPEG XL are designed to supersede WebP.“ AVIF und JPEG XL sollen WebP ersetzen. 

Bevor du dich fragst, ob du mit AVIF aufs falsche Pferd setzen könntest, weil JPEG XL wohl auch am Rennen teilnimmt, kann ich dich gleich beruhigen. Die Browserkompatibilität mit JPEG XL ist mit 0,08 Prozent quasi nicht existent.

In Squoosh kannst du bereits Bilder in JPEG XL konvertieren und es weist “nur” ähnliche Werte auf wie WebP (siehe Bild weiter unten). 

AVIF ist und bleibt der Formatsieger. Setze zeitnah darauf und nutze alle Vorteile auch für deine Websites!

Squoosh.app - das beste Tool zur Konvertierung von JPG, PNG, WebP zu AVIF

Während wir früher im Team TinyJPG bzw. TinyPNG als Online-Tool genutzt haben, um JPG-, PNG- oder auch WebP-Dateien für die Nutzung in Websites zu optimieren, bin ich nun großer Fan von Squoosh aus dem Hause von Google. 

Squoosh ist ein kostenloser Bildkonverter, der von Google entwickelt wurde. Das Tool funktioniert als Online-Dienst, aber auch lokal auf deinem Rechner oder Server (node.js!). Er kann Bilder in verschiedene Formate konvertieren, darunter JPEG, PNG, GIF und WebP. Und das Beste: Er konvertiert deine Bilder auch ins AVIF-Format.

Der Bildkonvertierer Squoosh verwendet eine Vielzahl von Techniken zur Reduzierung der Bildgröße, ohne die Qualität zu beeinträchtigen. Dazu gehören die Komprimierung von Farbinformationen, die Reduzierung der Auflösung und das Entfernen von redundanten Daten.

Einfach Bild hineinziehen und das gewünschte Format einstellen. Wenige Klicks und dein Bild ist fertig konvertiert und optimiert.

So sieht es dann aus, wenn du ein WebP-Bild einfügst und es einmal als AVIF (links) und als JPEG XL (rechts) für die Konvertierung und Kompression anlegst. Mit dem Schieberegler kannst du auch vergleichen, welche Qualitätsstufe die richtige ist, damit die sichtbare Qualität erhalten bleibt. In der Standardeinstellung ist dann eine Seite immer die Ausgangsdatei zum Vergleich. Also volle Kontrolle für dich über das Ergebnis.

Nutze auch du Squoosh für deine Contentpflege und Webentwicklung, um die Größe deiner Bilder zu reduzieren dank moderner Webformate wie WebP oder AVIF und um die Ladezeiten deiner Websites zu verbessern. Du kannst auch deine JPG-Dateien - ähnlich wie bei TinyJPG - in der Dateigröße reduzieren, wenn du sie beispielsweise in den soziale Medien uploaden möchtest. Der Vorteil gegenüber TinyJPG besteht darin, dass du volle Kontrolle über die Kompression hast und mit verschiedenen Optimierungseinstellungen experimentieren kannst, um die beste Qualität bei der kleinstmöglichen Größe zu erzielen.

Hier sind einige Vorteile von Squoosh:

• Unterstützt eine Vielzahl von Bildformaten, in die konvertiert werden kann 
• Verwendet eine Vielzahl von Techniken zur Reduzierung der Bildgröße.
• Ermöglicht die Vorschau der komprimierten Bilder
• Bietet eine Reihe von Optimierungseinstellungen
• Das Tool ist kostenlos und einfach zu bedienen.

Ein Wermutstropfen besteht bei allen positiven Merkmalen: Aktuell kann Squoosh immer nur ein Bild bearbeiten und keine Stapelverarbeitung. Da hoffe ich, dass diese Funktion noch kommt.

Serverseitige Batch-Konvertierung in PHP-Frameworks von Bildern in JPG und PNG zu AVIF und WebP

Wir selbst haben hier auf TutKit.com unsere Bilder, die als JPG- und PNG-Dateien im Portal eingebunden waren – immerhin mehr als 14.000 einzelne Dateien – serverseitig konvertiert in AVIF-Format und als Fallback für ältere Browser auch ins WebP-Format. Ebenso haben wir es technisch so gelöst, dass unsere Bearbeiter Bilder weiterhin in JPG oder PNG, so wie es unsere Designer gewohnt sind, ins Portal hochzuladen und dort mit Meta-Daten vertaggen. Das System gibt dann bei der Ausgabe automatisch die Einbettung in AVIF und als Fallback für alle älteren (oder nicht unterstützenden) Browser die Ansicht in WebP.

Damit es serverseitig klappt, setze auf neueste Softwareversionen. Die neuen Funktionen imagecreatefromavif und imageavif für da AVIF-Format sind nur unter PHP 8.1+ verfügbar, und wenn die GD-Erweiterung mit AVIF-Unterstützung gebaut wurde. Sie erfordert libavif Version 0.8.2 oder höher.

Ebenso achte auf die Kompatibilität bei den Betriebssystemen. AVIF wird mit den libavif-dev/libavif-devel-Pakete in den Repositories bereitstellt:

• ab Ubuntu 21.04  
• ab Debian 11 
• ab Alpine 3.13 
• ab Fedora 34

Hier ist einmal die PageSpeed-Auswertung für die mobile Ansicht von TutKit.com. Während man bei Desktop doch noch relativ einfach einen Wert über 90 hinbekommt, ist es für mobile Ansichten wirklich herausfordernd. Wir arbeiten noch dran, diesen Wert weiter in Richtung 100 zu verbessern, weil wir wissen: PageSpeed ist gut für die User Experience und zahlt damit auch auf unsere SEO-Erfolge ein.

Was hier so locker-flockig klingt mit der Einbindung von AVIF hier in unserem PHP-Framework Laravel, summierte sich am Ende aber auf über 60 Tickets in unserem JIRA-Tool, die mit der Konvertierung und Einbindung (inkl. Research, Development, Bugfixing, Testing) in Zusammenhang standen. Während also Plugins die Arbeit in einem klassischen CMS wie WordPress erheblich reduzieren, kann es bei einer umfangreichen Individualentwicklung auch mal gern – wie bei uns – drei Wochen Zeit benötigen. Die Vorteile der Nutzung von AVIF sind es definitiv wert! 

By the way: Vielleicht schreibe ich demnächst auch einmal einen Artikel, warum wir bei Portalen wie TutKit.com lieber auf ein PHP-Framework setzen anstelle von WordPress oder anderen CMS.

Plugins zur Nutzung von AVIF in WordPress

Das CMS WordPress unterstützt den Upload von AVIF-Bildern von Haus aus mit Stand September 2023 nicht – anders etwa als das CMS Contao, das seit der Version 5.0.0 AVIF supported. Daher benötigst du aktuell noch zwei Schritte beim Einsatz von WordPress, um deine Bilder in AVIF ausgeben zu können.

1. AVIF-Support für WordPress herstellen
2. Konvertierung der Bilder von JPG/PNG/WEBP zu AVIF

Es gibt eine Reihe von WordPress-Plugins, die die Verwendung von AVIF-Bildern auf WordPress-Websites ermöglichen. Hier sind drei Plugins, die du dir anschauen kannst: 

• AVIF Support: Dieses Plugin ermöglicht dir den Upload und die Anzeige von AVIF-Bildern in WordPress-Websites. Es unterstützt auch die automatische Konvertierung von JPEG- und PNG-Bildern in AVIF-Bilder.
• Converter for Media: Dieses Plugin konvertiert alle Bilder in deiner WordPress-Mediathek in AVIF-Bilder. Es bietet auch eine Reihe von Optionen zur Anpassung der Bildqualität und Kompressionsrate.
• ShortPixel Image Optimizer: Dieses Plugin optimiert Bilder in deiner WordPress-Mediathek, einschließlich der Konvertierung in AVIF-Bilder. Es bietet auch eine Reihe von anderen Funktionen zur Verbesserung der Bildqualität und -leistung.

Diese Plugins sind eine gute Möglichkeit, die Vorteile von AVIF-Bildern auf WordPress-Websites zu nutzen.

Hier geht es zum AVIF-Support-Plugin – mit Stand jetzt hat es allerdings erst 1.956 Downloads und weniger als 800 Installationen – man sieht, AVIF ist für WordPress-Nutzer noch völlig unbekannt.

UPDATE 05.04.2024: Mit WordPress 6.5 unterstützt WordPress endlich auch AVIF! Somit werden Support-Plugins nur noch für ältere Versionen von WordPress benötigt. Umso mehr lohnt das Update auf WordPress 6.5 und höher.

Das Plugin Local Image Sharp für Strapi-Websites

Wir selbst nutzen AVIF ebenso bei unserer Agenturwebsite 4eck-media.de, die node.js-basiert das Strapi CMS einsetzt. Das Local Image Sharp Plugin für Strapi ermöglicht die Verwendung von AVIF-Bildern auf Strapi-Websites. Das Plugin nutzt das sharp-Image-Processing-Toolkit, um Bilder in AVIF-Bilder zu konvertieren.

Das Plugin Local Image Sharp bietet dir eine Reihe von Funktionen, darunter:

• Automatische Konvertierung von Bildern in AVIF-Bilder
• Anpassung der Bildqualität und Kompressionsrate
• Unterstützung für verschiedene Bildformate

Um das Plugin zu installieren, lade es aus dem Strapi Plugin Store herunter und installiere es wie jedes andere Strapi-Plugin.

Wir haben es bei uns so eingerichtet, dass wir die Bilder weiterhin als JPG oder PNG ins Strapi-System hochladen. Das System konvertiert die Bilder in AVIF und WEBP in sechs verschiedene Auflösungen, um je nach Device (Desktop, Tablet, Mobil) die richtig dimensionierten Bilder im Browser als AVIF anzuzeigen. Bei älteren Browsern haben wir auch hier eine Fallback-Lösung mit WebP-Bildern, die dann dargestellt werden. 

Nutze am besten das <picture>-Tag, dass dann ein <source>- und <img>-Tag enthält, um deine Bilder in der jeweiligen richtigen Dimension und den beiden Formaten AVIF und WebP mit Quelle der JPEG oder PNG anzuzeigen.

Die Bilder im modernen Webformat waren neben Caching eines der wichtigsten Booster für eine großartige Performance unserer Agenturwebsite:

Hinweis zu Meta-Thumbnails und strukturierte Daten

Da bis heute Google Bilder das AVIF-Format nicht unterstützt, geben wir als Schema-Markup "image": immer noch das zugehörige JPG-File an. Ebenso das Meta-Thumbnail, welches wir zu jeder Produktseite angeben, um Google auch ein Vorschaubild für das Search-Snippet anzubieten, enthält noch das JPG-Format.

Sicher ist sicher. In den Foren wurde schon berichtet von jemandem, dass die komplette Online-Sichtbarkeit der Bilder nach dem Wechsel auf AVIF verschwunden ist. Diese Erfahrung können wir nicht bestätigen. Die Online-Sichtbarkeit ist bei uns konstant geblieben, aber die Crawling-Anfragen des Googlebots für Bilder sind gestiegen. Interessanterweise sehen wir, dass sich der Googlebot durch die WebP-Bilder crawlt, die im Quellcode als Fallback bereitstehen für ältere Browser. Google scheint die WebP-Bilder dann wohl aktuell für den Index zu crawlen.

Daher wäre meine Empfehlung, auch noch die JPG-Quelle in den Meta-Daten für die Thumbnails und auch für die strukturierten Daten zu verwenden.

Tools und Software zur Bildbearbeitung von AVIF-Bildern

Bilder werden oft und gern bearbeitet, weswegen eine Kompatibilität mit dem AVIF-Format natürlich wünschenswert ist bei den gängigen Bildbearbeitungsprogrammen. Manchmal lädt man sich ein bestehendes Bild von der Website herunter, um eine Änderung vorzunehmen. Da ist es gut, wenn dein favorisiertes Bildprogramm es auch öffnen kann, was die wichtigste Funktion bei der AVIF-Kompatibilität bedeutet. Auch wenn es dann in einem anderen Format gespeichert wird, lässt es sich via Squoosh oder anderen Tools wieder ins AVIF-Format konvertieren.

Hier ist eine Liste von Bildbearbeitungssoftware zur AVIF-Kompatibilität (mit Stand September 2023):

• Gimp: Kann AVIF importieren, bearbeiten und exportieren seit Version 2.10.22.
• Photopea: kann AVIF importieren und bearbeiten, aber nicht exportieren. Speicherung dann in einem anderen Dateiformat möglich.
• Affinity Photo: kein Support für AVIF
• Photoshop: kein Support, aber ein Plugin hilft, womit dann die Kompatibilität hergestellt wird.

AVIF-Plugin für Photoshop

Hier findest du ein Plugin, womit du Photoshop befähigst, auch AVIF-Dateien zu öffnen.
https://github.com/0xC0000054/avif-format

Der Download ist im Releases-Tab der Seite möglich.

Wenn du die ZIP heruntergeladen hast, füge die Av1Image.8bi in dem Ordner ab, in dem Photoshop nach Plug-ins sucht. Das ist bei Standardinstallationen dieser Ordner:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Oder dieser Ordner: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

Photoshop muss geschlossen. Starte dann Photoshop, damit das Plug-in laden kann. Danach kannst du AVIF-Dateien direkt via Drag & Drop oder dem Öffnen-Dialog in Photoshop öffnen.

AVIF-Bilder anzeigen in Windows

Wenn ich mir Bilder von der Website runterlade, weil ich sie bearbeiten möchte oder anderweitig benötige, möchte ich natürlich, dass auch der Dateibrowser diese öffnen und anzeigen kann.

Ab Windows 10 geht es, allerdings wird dafür eine Extension benötigt. Klickst du auf eine AVIF-Datei, bekommst du erstmal eine Fehlermeldung. 

In der Fehlermeldung ist ein Link. Wenn du diesen klickst, geht es zum Microsoft Store zur AVIF-Extension. Lade diese herunter. Es sind nur 1,61 MB.

Im Anschluss lassen sich Bilder im AVIF-Format auch unter Windows in deinem Dateibrowser öffnen und anzeigen.

Statt GIF-Animationen lieber AVIF-Animationen auf Websites einbinden

Hier gibt es einen Online-Converter, um GIF-Animationen in AVIF-Animationen zu konvertieren. https://mconverter.eu/convert/gif/avif/

Während meine Test-GIF 787 KB groß ist, reduziert sich die Animation als AVIF auf 411 KB.

Mein persönliches Fazit

AVIF ist nach meiner Meinung die beste Option, um aktuell moderne Bildformate in Websites zu integrieren. Die Vorteile in Kompression und Bildqualität sind überzeugend. Kein anderes Bildformat vereint diese Eigenschaften und boostet so sehr die Ladezeiten. Aktuell nutzen noch viel zu wenige Websitebetreiber das AVIF-Format, obwohl der Browser-Support zu mehr als 85 % gegeben ist und es technisch keine Hürde ist, als Fallback weiterhin WebP zu nutzen. SEO ist im Wandel. AVIF allein genügt natürlich nicht, um Top-Werte bei den PageSpeed-Insights zu erzielen; dazu gehören noch weitere technische Faktoren. Geht um um die Einbindung moderner Bildformate, wirst du mit AVIF im Vergleich zu WebP bessere Werte erzielen können.

Keywordoptimierter Content allein wird nicht mehr reichen, weil durch KI das Internet geradezu geflutet wird mit Inhalten, wodurch viele Websites mit einem hochgerüsteten, inhaltlichen Gleichstand mit ihren Mitbewerbern um Online-Sichtbarkeit buhlen. Technical SEO und gerade das Bestehen der Core Web Vitals werden gerade deswegen zunehmend ein stärkerer Rankingfaktor und damit ein Tie Breaker, weil Google den Nutzern die größtmögliche Nutzererfahrung bieten möchte. AVIF ist – neben weiteren Faktoren – ein Teil der Lösung, um deine Ladezeiten zu beschleunigen, die User Experience zu erhöhen und perspektiv die Online-Sichtbarkeit zu verbessern.

Mehr erfahren rund um SEO, User Experience, Design und technische Trends

Falls grundsätzlich diese Themen rund um SEO, User Experience, KI-Tools und neue Webtechnologien interessant sind, erfährst du mehr in unseren Trainings und in weiteren Artikeln hier im Blog.

Jetzt bist du dran

Wenn dieser Beitrag für dich lohnenswert war, schreib uns doch gern eine Rezension auf Google. Jede Rezension unterstützt uns. Falls du Hilfe benötigst bei dem Einsatz von AVIF in deinem Webprojekt, kannst du uns gern über unsere Agenturseite kontaktieren.