PNG in AVIF umwandeln — Transparenz behalten, Gewicht sparen
PNG in AVIF umwandeln: Transparenz behalten, ohne die Seite auszubremsen
Es gibt eine Situation, in der Webentwickler jahrelang festsaßen: Ein Bild braucht einen transparenten Hintergrund, also muss es PNG sein — und PNG-Dateien sind groß. Ein freigestelltes Produktfoto in Bildschirmbreite kommt schnell auf 2 MB. Bei acht solchen Bildern ist die Seite verloren.
JPG war keine Lösung, weil es keine Transparenz kann. Damit war man gefangen.
AVIF löst genau diesen Konflikt
AVIF unterstützt einen vollständigen Alphakanal — und komprimiert zugleich verlustbehaftet. Aus einer 2 MB großen PNG wird damit häufig eine AVIF-Datei von 150 bis 300 KB. Eine Ersparnis von 85 bis 92 Prozent bei erhaltener Transparenz.
Für freigestellte Produktbilder, Illustrationen mit weichen Schatten und großflächige Grafiken mit Verläufen ist das der größte Gewinn, der bei Bildern überhaupt zu holen ist.
Wann Sie bei PNG bleiben sollten
Nicht jede PNG profitiert. Bei einer schlichten Grafik mit wenigen Flächenfarben — einem Symbol, einem einfachen Logo, einem Diagramm — arbeitet PNG bereits sehr effizient. Dort kann eine AVIF-Datei sogar größer ausfallen, und die verlustbehaftete Kompression kann an harten Kanten leichte Unschärfen erzeugen.
Ebenfalls bei PNG bleiben sollten Sie, wenn es sich um Ihre Arbeitsdatei handelt. AVIF ist ein Auslieferungsformat für das Web, kein Format zum wiederholten Bearbeiten und Zwischenspeichern.
Die Faustregel
Freigestellte Fotos, Illustrationen mit Verläufen, große Flächen mit Transparenz: nach AVIF umwandeln. Symbole, Strichgrafiken, Screenshots mit Text, Arbeitsdateien: bei PNG bleiben.
Rückfallebene nicht vergessen
Sehr alte Geräte kennen AVIF nicht. Für den produktiven Einsatz hinterlegen Sie AVIF im picture-Element als erste Quelle und die ursprüngliche PNG als zweite. Moderne Browser nehmen die kleine Datei, ältere greifen auf das Original zurück.
Verarbeitung ohne Upload
Freigestellte Produktaufnahmen sind oft das Wertvollste, was eine Marke besitzt — besonders vor der Veröffentlichung. ImageXpo überträgt nichts. Die Kodierung läuft per WebAssembly in Ihrem Browser, auch bei mehreren hundert Dateien.
Häufige Fragen
Bleibt der transparente Hintergrund erhalten?
Ja, vollständig. AVIF unterstützt einen kompletten Alphakanal. Das ist der entscheidende Vorteil gegenüber JPG und der Grund, warum dieser Weg für freigestellte Bilder so nützlich ist.
Meine AVIF-Datei ist größer als die PNG. Wie kann das sein?
Das passiert bei Grafiken mit wenigen Flächenfarben, etwa Symbolen oder einfachen Logos. PNG speichert solche Inhalte bereits sehr effizient. AVIF spielt seine Stärke bei Fotos und weichen Verläufen aus — bleiben Sie in diesen Fällen bei PNG.
Kann ich AVIF als Arbeitsdatei verwenden?
Besser nicht. AVIF komprimiert verlustbehaftet, sodass bei jedem erneuten Speichern Qualität verloren geht. Bewahren Sie die PNG als Arbeitsdatei auf und erzeugen Sie AVIF nur für die Auslieferung im Web.
Was ist mit älteren Browsern?
Alle aktuellen Browser zeigen AVIF an, sehr alte Geräte nicht. Binden Sie AVIF über ein picture-Element mit der PNG als zweiter Quelle ein, dann erhält jedes Gerät eine darstellbare Fassung.