Notizen vom Team zu Handwerk, Formaten und den kleinen Entscheidungen hinter einem guten Ergebnis.
Warum AVIF bei Fotos WebP schlägt
Der Kompressionsvorteil von AVIF gegenüber WebP kommt vom zugrunde liegenden formato. WebP nutzt die -Intra-Frame-Maschine, für Video gedacht, aber seit 2010 für Einzelbilder verwendet. ein modernes Format, der formato hinter AVIF, erschien 2018 nach Jahren der Forschung, die direkt auf die Grenzen von und zielten. ein modernes Format wendet aggressivere an, feinere bis hinunter zu 4 mal 4 Pixeln und einen wirksameren. Das praktische Ergebnis, bestätigt durch -Analyse auf großen Foto-Testsätzen, ist, dass AVIF bei Fotos meist 20 bis 30 Prozent kleiner ist als WebP bei gleicher wahrgenommener Qualität. Bei computererzeugten Grafiken mit flächiger Farbe und harten Kanten schrumpft der Abstand, weil der einfachere Algorithmus von WebP solche Muster effizient handhabt. Für jede Seite, deren schwerste Inhalte Fotos sind, hat das AVIF-Upgrade messbare Bandbreitenwirkung.
Der zweite verlustbehaftete Durchgang in der Praxis
Wenn du ein WebP zu AVIF umwandelst, sind Quelle und Ausgabe verlustbehaftet. Das WebP hatte bei seiner ersten Erstellung schon entschieden, welche Farbinformation verworfen wird, und diese Entscheidungen sind endgültig: die Umwandlung zu AVIF kann nichts davon zurückholen. Die AVIF-Umwandlung trifft dann ihre eigenen Entscheidungen über die empfangenen Pixeldaten, bei Qualität 85. Bei Fotos ist die Gesamtwirkung zweier verlustbehafteter Durchgänge bei üblichen Anzeigegrößen noch visuell nahezu verlustfrei und misst auf echtem Fotomaterial. Bei Grafiken, die ihre WebP-Speicherung schon beeinträchtigt hatte, kann der zweite Durchgang sichtbare Artefakte verstärken. Die praktische Regel: sieht das Quell-WebP in der geplanten Anzeigegröße sauber aus, sieht das AVIF auch so aus. Zeigt das WebP schon Kompressionsrauschen, prüfe das AVIF genau, bevor du es ausspielst.
Wie der Transparenzebene hindurchfließt
Sowohl WebP als auch AVIF speichern Transparenz als separate Alpha-Ebene neben den Farbdaten. Die Umwandlung liest den Transparenzebene des WebP, setzt ihn bei voller Transparenz zusammen und übergibt ihn dann der AVIF-Umwandlung, die ihre eigene Alpha-Spur mit ein modernes Format bei Qualität 85 schreibt. Weiche Transparenzverläufe, ausgefranste Kanten und teildurchsichtige Bereiche überstehen diesen Hin- und Rückweg. Die AVIF-Alpha-Ebene ist bei Qualität 85 selbst verlustbehaftet, was bei extremem Zoom an harten Kanten ein kaum wahrnehmbares Säumen erzeugen kann. Bei normalen Anzeigegrößen im Web ist der Unterschied zur Quelle nicht sichtbar. Für pixelgenaue Arbeit an kleinen Symbolen, wo die Alpha-Kante exakt sein muss, behalte die WebP-Quelle und prüfe die Ausgabe bei voller Vergrößerung, bevor du sie ausspielst.
Tempo-Erwartungen über Browser und Geräte
Die AVIF-Vorbereitung läuft einmal pro Browser-Sitzung an und fügt der ersten Umwandlung etwa eine Sekunde hinzu. Danach liefert Chromium den besten Durchsatz: rund schnell für ein Vorschaubild mit 0,12 Megapixeln, schnell für ein Foto mit 1 Megapixel, 2,8 Sekunden für ein 4K-Foto und 25 Sekunden für ein volles 48-Megapixel-Bild im schlimmsten beobachteten Fall. Firefox ist der auffällige Ausreißer und läuft mit demselben Verfahren etwa viermal langsamer, was den 4K-Fall an 31 Sekunden bringt und große Dateien über zwei Minuten. WebKit liegt zwischen beiden, näher an Chromium. Mobile Hardware läuft über alle Maschinen hinweg 3 bis 5 mal langsamer als der Desktop. Für routinemäßige Umwandlung Datei für Datei ist Chrome auf einem Laptop oder Desktop das praktische Werkzeug. Für Firefox-Nutzer mit großen Bildern ist der ehrliche Rat, den Browser zu wechseln oder bei WebP zu bleiben.
Core Web Vitals und das AVIF-Upgrade
Seiten, die Fotos ausliefern, zahlen für jedes geladene Bild Bandbreite. Sind diese Bilder derzeit WebP, schneidet die Umwandlung zu AVIF die Übertragung pro Bild bei Fotos um rund 20 bis 30 Prozent. Auf einer Seite mit einem WebP-Heldenbild von bringt AVIF das auf rund noticeably smaller. Auf einem Produktraster mit zwölf WebP-Vorschaubildern zu je spart AVIF rund noticeably smaller Gesamtgewicht. Diese Ersparnisse wirken sich direkt auf Largest Contentful Paint aus, wenn das LCP-Element ein Bild ist. Bei rund 94 Prozent weltweiter Browserunterstützung für AVIF deckt ein picture-Element, das zuerst AVIF mit einem WebP-Rückfall ausliefert, im Grunde den gesamten Verkehr ab. Der Aufwand im Markup fällt einmal pro Bildkomponente an, und die Bandbreitenersparnis wiederholt sich danach bei jedem Seitenaufruf.
Warum die AVIF-Umwandlung auf einen Server setzt
AVIF baut auf dem ein modernes Format auf, derselben Familie wie modernes Video, und ist bewusst aufwendig zu erzeugen im Tausch gegen kompakte Dateien. Diese Arbeit gut zu erledigen, gerade bei großen Fotos, ist auf einem echten Server weit schneller und zuverlässiger als im Browser eines Handys, daher schickt dieses Paar das Bild an unseren Server, um das bestmögliche AVIF zu erzeugen. Die Datei wird verarbeitet und das Ergebnis kommt zu dir zurück, und der Download wird nach etwa 2 Stunden entfernt, ohne persönliche Daten und ohne Langzeitspeicher. Mehrere Bilder auf einmal umzuwandeln läuft immer auf dem Server, der den fertigen Satz zu einem Download zusammenstellt, im selben kurzen Zeitfenster gelöscht. Ist unser Server nicht erreichbar, wird eine einzelne Umwandlung stattdessen im Browser erzeugt, diese Datei bleibt lokal, und nimmt der Bequemlichkeit halber eine langsamere Erzeugung in Kauf. Der Tausch ist klar: Der Server bringt Qualität und Tempo bei dem Format, das es am meisten braucht, und deine Datei wird nie über das kurze Fenster der Umwandlung hinaus aufbewahrt.
