PNG in AVIF umwandeln

PNG ist genau und teuer. Es verwirft nie einen Bildpunkt, was es zur richtigen Wahl für ein Logo oder einen Screenshot macht — und der Grund, warum eine Seite mit zwanzig davon schwer genug ist, dass ein Performance-Bericht sich meldet.

AVIF greift das von der anderen Seite an. Es stammt von einem modernen Video-Codec ab und wendet dessen Maschinerie auf ein einzelnes Bild an — deshalb landet es bei einem Foto häufig bei der Hälfte der PNG-Größe oder darunter, behält einen echten Alphakanal und sieht bei normaler Ansichtsgröße identisch aus. Bei einer Seite voller Produktbilder ist das der Unterschied zwischen einem langsamen und einem schnellen ersten Eindruck.

Ein deutscher Web-Auftritt, der über AVIF nachdenkt, tut das meist aus zwei Gründen gleichzeitig: Core Web Vitals als Rankingfaktor bei Google und der einfache Fakt, dass jedes übertragene Byte irgendwo Strom kostet — Ladezeit einer Website und ihr Energieverbrauch hängen direkt zusammen, ein Thema, das in deutschen Agenturen inzwischen genauso besprochen wird wie die Ladezeit selbst.

AVIF verschiebt beide Zahlen in dieselbe Richtung: weniger Bytes bedeuten schnelleres Laden und weniger übertragene Daten je Seitenaufruf. Bei einem Shop mit hunderten Produktbildern summiert sich das über den Tag zu einer Menge, die sich sowohl in der Ladezeit als auch in der Traffic-Rechnung bemerkbar macht.

Die meisten, die hier landen, sind schon bei WebP und fragen sich, ob sich der nächste Schritt lohnt. Bei Fotos meistens ja: Bei vergleichbarer Qualität liegt AVIF üblicherweise noch einmal zwanzig bis dreißig Prozent unter WebP und zeigt bei Verläufen und Himmel deutlich weniger Banding.

Auf der anderen Hälfte des Webs dreht sich das Bild. Flache Oberflächengrafiken, Icons, Diagramme und Screenshots — genau das, wofür PNG eigentlich gebaut wurde — komprimieren schon so gut, dass AVIF manchmal größer ausfällt als WebP. Fünf typische eigene Bilder umwandeln und die Bytezahlen vergleichen dauert zehn Minuten und schlägt jede allgemeine Regel, auch diese hier.

AVIF-Kodierung leistet weit mehr Arbeit als PNG oder WebP. Sie sucht viel gründlicher nach Struktur, die sich kompakt beschreiben lässt, und diese Suche kostet Zeit — auf ein großes Foto ein paar Sekunden, selbst auf einem schnellen Rechner.

Diese Kosten fallen einmal an, auf dem eigenen Computer, im Moment der Umwandlung. Jeder Besucher danach lädt eine kleinere Datei. Für Website-Assets ist das ein guter Tausch, für etwas, das sofort gebraucht wird, weniger — wer zweihundert Dateien ablegt und dann Kaffee holt, plant das ein.

AVIF trägt einen echten Alphakanal, sodass die Transparenz, die das Bild überhaupt erst zu einem PNG gemacht hat, kein Grund mehr ist, dabei zu bleiben. Ein freigestelltes Produktfoto, ein Icon mit runden Ecken, ein Logo, das auf jeder Hintergrundfarbe sitzen muss — alles kommt ohne Füllfarbe zum Auswählen und ohne Rand an den Kanten an.

Das ist der wesentliche Unterschied zur Umwandlung nach JPG, wo Transparenz verworfen und durch etwas ersetzt werden muss. Deshalb kann AVIF einen ganzen Grafikordner ersetzen, nicht nur den fotografischen Teil davon.

Die Voreinstellung liegt an einem Punkt, an dem der Unterschied zum PNG bei normaler Ansichtsgröße unsichtbar bleibt, während die Datei nur einen Bruchteil der Größe hat. Für Fotos, Screenshots und übliche Website-Bilder dort belassen.

Höher stellen bei Bildern, in die hineingezoomt wird, oder mit feiner Schrift und ein Pixel breiten Linien, wo aggressive Kompression zuerst auffällt. Niedriger bei großen dekorativen Hintergründen, die niemand genau betrachtet. Das PNG dabei behalten — einmal aufgegebene Qualität kommt durch erneutes Umwandeln nicht zurück.

Browserunterstützung ist seit Jahren kein Problem mehr: Chrome, Edge, Firefox, Safari und die mobilen Browser zeigen AVIF alle an. Geht das Bild auf eine Webseite, wird es gesehen.

Die Ausfälle liegen woanders. Desktop-Bildbetrachter, ältere Handy-Galerien, Chat-Programme, E-Mail-Clients und viele Upload-Formulare von Redaktionssystemen kennen das Format noch nicht. Kein AVIF per E-Mail verschicken und keins als Download-Datei für Kunden verwenden — dafür JPG oder PNG nehmen. AVIF ist ein Auslieferungsformat für Webseiten, kein Allzweckformat.

Das übliche Muster ist ein `picture`-Element mit mehreren Quellen: AVIF zuerst, WebP zweitens, das ursprüngliche PNG oder JPG als Fallback im `img`. Jeder Browser nimmt das erste Format, das er versteht, und niemand bleibt ohne Bild zurück.

Das funktioniert nur, wenn die Originale erhalten bleiben. Eine Kopie des Bilderordners umwandeln statt das Original zu ersetzen, und die PNGs in der Versionsverwaltung behalten — sie sind die Quelle, aus der auch das nächste Format erzeugt wird, wenn es kommt.

Das gesamte Verzeichnis ablegen. Jede Datei wird nacheinander auf dem eigenen Rechner umgewandelt, mit eigenem Fortschritt, behält den Dateinamen mit ausgetauschter Endung, und alles kommt als ein ZIP zurück, bereit für den Build.

Weil nichts hochgeladen wird, gibt es keine Warteschlange, keine Wartezeit je Datei und keine Tagesgrenze — was hier mehr zählt als bei den meisten Umwandlungen, weil die AVIF-Kodierung der langsame Teil ist und ein gehosteter Dienst diese Zeit auf einem fremden Prozessor in Rechnung stellen würde.

Ein PNG kann EXIF, XMP und ein ICC-Farbprofil tragen, gerade wenn es aus einem farbverwalteten Programm exportiert wurde. Nichts davon reist mit hinüber: Jede Bildumwandlung hier dekodiert zu reinen Pixeln und kodiert neu, also fällt der ganze Metadatenblock weg, ohne dass eine Einstellung daran etwas ändern könnte.

Für ein Website-Bild ist das meist erwünscht — Aufnahmedaten oder ein interner Dateipfad haben in einem öffentlichen Asset nichts verloren. Trägt das PNG dagegen ein bewusst gesetztes Farbprofil, etwa Display P3 für ein Produktfoto, wird das AVIF danach als sRGB gelesen, und gesättigte Farben können leicht abflachen. Für diesen Fall das PNG als Referenz behalten.