AVIF vs PNG
Beide speichern Fotos, gehen dabei aber unterschiedliche Kompromisse ein. Hier liegen die echten Unterschiede — und die Entscheidungshilfe.
Short answer
Bei fotografischen Inhalten gewinnt AVIF deutlich, und einen verlustfreien Modus hat es auch. Bei kleinen Flächenfarb-Assets, also Symbolen, Sprites und einfachen Strichzeichnungen, ist PNG oft noch kleiner und immer einfacher.
Why this comes up
Meist landet man in einer von zwei Lagen hier: Man hat übergroße PNG-Fotos und will die größtmögliche Ersparnis, oder man baut eine Asset-Pipeline neu und fragt sich, ob AVIF PNG überall ersetzen kann. Die Antwort fällt in beiden Fällen sehr verschieden aus, und im zweiten geht die pauschale Empfehlung meistens schief.
Direkter Vergleich
| Eigenschaft | AVIF | PNG |
|---|---|---|
| Komprimierung | Verlustbehaftet | Verlustfrei |
| Transparenz | Ja | Ja |
| Typische Dateigröße | 40-55% eines vergleichbaren JPEGs | 300-500% eines vergleichbaren JPEGs |
| Kompatibilität | Alle aktuellen Browser; manche ältere Desktop-Programme hinken hinterher | Lässt sich überall öffnen, auch mit jahrzehntealter Software |
| Stammt meist von | Websites, die ihr Ladegewicht optimieren | Screenshots, Logos und Grafiken |
What actually differs
AVIF hat einen verlustfreien Modus, den alle vergessen
Vergleiche stellen meist verlustbehaftetes AVIF gegen verlustfreies PNG, und das misst nicht dasselbe. Verlustfreies AVIF gibt es, und bei fotografischen Inhalten schlägt es PNG üblicherweise mit gutem Abstand, bei byteweiser Genauigkeit. Wenn Ihre Anforderung wirklich „kein Verlust" lautet, müssen Sie nicht bei PNG bleiben. Sie müssen nur sagen, welchen AVIF-Modus Sie meinen.
Bei winzigen flächigen Assets verliert AVIF häufig
AVIF bringt Container-Overhead mit, den ein 32×32-Symbol nicht amortisieren kann, und seine Codierwerkzeuge sind auf fotografische Textur ausgelegt, die einfache Grafiken nicht haben. Ein kleines PNG eines flächigen Symbols fällt häufig kleiner aus als das AVIF desselben Bildes, manchmal deutlich. Messen Sie nach, bevor Sie einen Symbolsatz umwandeln: Die Pauschalregel „AVIF ist kleiner" ist eine Regel aus der Fotografie.
Bei PNG stellt sich die Kompatibilitätsfrage gar nicht
PNG öffnet sich überall, und zwar seit den Neunzigern, und braucht keinen Fallback, kein picture-Element und keine Content Negotiation. AVIF braucht alle drei, sobald ein Teil Ihres Publikums auf älterem Safari sitzt. Bei einem großen Hero-Bild kauft Ihnen dieser Aufwand echte Bytes; bei einem 2-KB-Symbol kauft er Ihnen nichts und kostet einen Build-Schritt.
Which to use
Use AVIF for
Fotos und große, detailreiche Bilder im Web, wo eine Halbierung oder mehr drin ist und ein Fallback ohnehin schon Teil Ihres Aufbaus ist.
Use PNG for
Symbole, Sprites, Logos, Text-Screenshots und alles Kleine und Flächige, wo AVIFs Vorsprung verschwindet und universelle Unterstützung weiterhin zählt.