Soll ich alle Bilder meiner Website in AVIF umwandeln?

Alles umzuwandeln und die JPGs zu löschen ist ein riskanter Ansatz. Die richtige Strategie besteht darin, AVIF-Fassungen zu erzeugen, die JPGs als Rückfalloption zu behalten und den Browser das laden zu lassen, was er unterstützt. So profitieren Besucher mit AVIF-Unterstützung vom Geschwindigkeitsgewinn, während die übrigen ohne jede Auffälligkeit das JPG sehen. Außerdem bleibt Ihnen eine saubere Quelle erhalten, falls Sie später auf ein anderes Format wechseln müssen.

Wirkt sich der Wechsel zu AVIF wirklich auf meine Seitengeschwindigkeit aus?

Auf bildlastigen Seiten ist der Effekt handfest, denn Bilder machen meist den größten Teil des Seitengewichts aus, und weniger heruntergeladene Daten bedeuten unmittelbar eine kürzere Ladezeit. Besonders deutlich wird der Effekt bei langsamen Mobilverbindungen und auf Seiten mit großen Hero-Bildern oder langen Galerien. Ist Ihre Seite dagegen ohnehin leicht oder liegt Ihr Engpass nicht bei den Bildern, sondern bei der Antwortzeit des Servers oder der Skriptlast, bleibt der Gewinn begrenzt. Vor und nach der Änderung zu messen ist die einzige verlässliche Methode.

Gilt JPG inzwischen als veraltetes Format?

Es ist nicht veraltet, nur ineffizient. JPG ist nach wie vor das weltweit am breitesten unterstützte Bildformat, und das allein macht es wertvoll; kein modernes Format kommt dieser Universalität nahe. Bei fotografischen Inhalten bietet es zudem ein vernünftiges Verhältnis von Qualität und Größe. AVIF übertrifft es in der Effizienz deutlich, kommt bei der Kompatibilität aber nicht einmal in seine Nähe. Deshalb lautet die richtige Frage nicht, welches besser ist, sondern wie Sie beide gemeinsam einsetzen.

Wie viel Mehraufwand bringt die AVIF-Erzeugung in meinen Workflow?

Es gibt zwei Arten von Aufwand. Erstens müssen Sie für jedes Bild eine zweite Fassung erzeugen und vorhalten; das bedeutet Speicherplatz und Dateiverwaltung. Zweitens ist die AVIF-Codierung rechenintensiv, und die Umwandlung eines großen Archivs dauert deutlich länger als bei JPG. Außerdem müssen Sie das HTML Ihrer Seiten so anpassen, dass es mit Rückfalloption ausliefert. Bei einer kleinen Website ist das eine einmalige Arbeit; bei einer großen Website, der laufend Bilder hinzugefügt werden, ist es ohne Automatisierung nicht durchzuhalten.

JPG oder AVIF für die Bilder Ihrer Website?

Eine falsch gestellte Frage

Die Frage "JPG oder AVIF" setzt voraus, dass die beiden Formate einander ersetzen. Im Web-Kontext ist diese Voraussetzung falsch.

AVIF übertrifft JPG in der Effizienz deutlich. JPG wiederum steht bei der Kompatibilität an einem Ort, den AVIF nicht erreichen kann. Die professionelle Webentwicklungspraxis wählt nicht zwischen beiden — sie liefert beide aus und lässt den Browser wählen.

Um diese Entscheidung bewusst zu treffen, muss man dennoch klar sehen, was die beiden Formate bieten. In diesem Beitrag ziehen wir den Vergleich ehrlich.

Effizienz: AVIF liegt deutlich vorn

Bei gleicher visueller Qualität erzeugt AVIF gegenüber JPG in der Regel deutlich kleinere Dateien. Das häufig genannte Verhältnis von grob der Hälfte ist eine Näherung, und der tatsächliche Gewinn schwankt von Bild zu Bild erheblich.

Die Größe des Gewinns hängt vom Inhalt ab. Bei Bildern mit einfarbigen Flächen, weichen Verläufen und weiten einfarbigen Bereichen fällt der Unterschied sehr deutlich aus. Bei Fotos mit starkem Rauschen und feiner, zufälliger Textur schrumpft der Abstand dagegen.

Im Web-Kontext ist dieser Unterschied nicht belanglos. Bilder sind auf den meisten Seiten der größte Posten der insgesamt heruntergeladenen Daten. Weniger Daten bedeuten gerade auf langsamen Mobilverbindungen unmittelbar eine schnellere Seite.

AVIF transportiert außerdem Dinge, die JPG nicht tragen kann: Alphakanal, 10 bis 12 Bit Farbtiefe, weiten Farbumfang und HDR. Ein Element mit Transparenzbedarf können Sie nicht als JPG ausliefern — Sie müssten auf PNG ausweichen und bei der Größe einen hohen Preis zahlen. AVIF erledigt das in einer einzigen Datei.

Kompatibilität: JPG hat keinen Konkurrenten

Aktuelle Mainstream-Browser unterstützen AVIF. Das ist eine wichtige Schwelle für Ihre Website und der Hauptgrund, AVIF ernst zu nehmen.

Doch damit ist das Bild noch nicht vollständig:

Alte Geräte und Betriebssysteme. Telefone und Computer, die lange keine Aktualisierung erhalten haben, können die Datei nicht darstellen.
Alte Browserversionen. In Unternehmensumgebungen und einkommensschwachen Märkten ist die Nutzung nicht aktueller Browser eine reale Erscheinung.
Die vom Nutzer heruntergeladene Datei. Wenn ein Besucher mit der rechten Maustaste auf das Bild klickt und es speichert, hat er ein AVIF in der Hand und kann es in seinem Desktop-Programm womöglich nicht öffnen.
Systeme außerhalb Ihres Einflusses. Wer Ihr Bild auf eine andere Plattform lädt, an eine E-Mail anhängt oder in ein Dokument einfügt, kann auf Probleme stoßen.

Bei JPG tritt keines dieser Probleme auf. Es funktioniert seit über dreißig Jahren überall, und das wird sich in absehbarer Zeit nicht ändern.

Qualität: Die Umwandlung bringt nichts hinzu

Räumen wir mit einem häufigen Irrtum auf. Ihre vorhandenen JPGs in AVIF umzuwandeln verbessert das Bild nicht.

Die Details, die JPG bei der Kompression verworfen hat, sind in der Datei nicht vorhanden; AVIF verpackt lediglich den Rest effizienter. Enthält das Bild Blockartefakte, Banding oder Unschärfe, wird es sie auch im AVIF enthalten.

Wichtiger noch: Wenn Sie die Qualitätseinstellung zu niedrig wählen, stapeln sich zwei Schichten verlustbehafteter Kompression übereinander, und das Ergebnis wird gegenüber der Quelle sichtbar schlechter. Verwenden Sie bei der Umwandlung einen vernünftigen Qualitätswert; da AVIF ohnehin effizient ist, erzielen Sie auch dort noch einen erheblichen Größengewinn.

Haben Sie eine sauberere Quelle als das JPG — das Originalfoto, die PNG-Fassung, die Rohdatei — liefert es immer ein besseres Ergebnis, das AVIF daraus zu erzeugen.

Arbeitsaufwand: bleiben wir realistisch

Die übersehenen Kosten des Wechsels zu AVIF sind operativer Natur.

Sie müssen für jedes Bild eine zweite Fassung erzeugen und vorhalten. Sie müssen Ihre Seitenvorlagen so anpassen, dass sie mit Rückfalloption ausliefern. Sie müssen diesen Vorgang für jedes neu hinzugefügte Bild wiederholen.

Bei einer kleinen, statischen Website ist das eine einmalige Arbeit. Bei einer Website, der laufend Inhalte hinzugefügt werden, ist es ohne Automatisierung nicht durchzuhalten. Kann Ihr Content-Management-System Bildvarianten automatisch erzeugen, ist die Sache einfach; kann es das nicht, müssen Sie einen Prozess entwerfen.

Rechnen Sie außerdem damit, dass die AVIF-Codierung rechenintensiv ist. Ein großes Archiv umzuwandeln dauert deutlich länger, als es als JPG zu speichern.

Die professionelle Antwort: beide zugleich

Die wirkliche Lösung dieser Debatte besteht darin, nicht zu wählen.

Das picture-Element von HTML erlaubt es, für dasselbe Bild mehrere Quellen anzugeben. Der Browser liest die Liste von oben nach unten und lädt die erste, die er unterstützt. Ein Browser mit AVIF-Unterstützung nimmt das AVIF und profitiert von der Geschwindigkeit; ein Browser ohne fällt still auf das JPG zurück, und der Besucher merkt nichts davon.

Das Schöne an diesem Ansatz ist, dass er das Risiko vollständig ausräumt. Kein Besucher sieht ein kaputtes Bild, und wer es unterstützt, wird belohnt.

Praktische Konsequenz: Erzeugen Sie AVIF, löschen Sie die JPGs nicht. Die Originale sind ab jetzt Ihre Rückfallebene.

Wo sollte man was verwenden?

Konkrete Empfehlungen:

Hero-Bilder, große Banner, Galerien: Sie gewinnen am meisten durch AVIF, weil sie groß sind. Liefern Sie sie mit Rückfalloption aus.
Kleine Icons und einfache Grafiken: Da sie ohnehin klein sind, ist der Gewinn bescheiden; der Mehraufwand lohnt sich womöglich nicht. Wenn Vektor (SVG) infrage kommt, ist das meist die bessere Antwort.
Bilder, die der Nutzer herunterladen soll: Produktkatalog, Pressemappe, herunterladbares Foto. Liefern Sie hier JPG aus; dass der Nutzer die Datei öffnen kann, ist wichtiger als Geschwindigkeit.
Elemente mit Transparenzbedarf: AVIF bietet hier gegenüber PNG einen erheblichen Größenvorteil, aber die Rückfalloption muss ein PNG sein.

Kurz gefasst

AVIF gewinnt bei der Effizienz, JPG bei der Kompatibilität. Diese beiden Tatsachen widersprechen einander nicht; sie ergänzen sich. Auf einer bildlastigen Website bringt der Wechsel zu AVIF einen echten Geschwindigkeitsgewinn, doch statt JPG abzuschaffen, sollte man es als Rückfallebene positionieren. Vergessen Sie nicht, dass die Umwandlung keine Qualität hinzufügt und bei niedrigen Einstellungen sogar Qualität kostet. Und unterschätzen Sie den Arbeitsaufwand nicht — eine Optimierung, die sich nicht durchhalten lässt, richtet mehr Schaden an als eine unterlassene Optimierung.