WebP vs AVIF vs JPEG: Which Image Format Should You Use? - PIC0.ai

Der $47.000 Fehler, der meine Sichtweise auf Bildformate geändert hat

Ich bin Sarah Chen und arbeite seit acht Jahren als Performance-Ingenieurin bei einer mittelgroßen E-Commerce-Plattform. Letztes Jahr traf ich eine Entscheidung, die meinem Unternehmen im Laufe eines einzigen Quartals 47.000 $ an entgangenen Einnahmen kostete. Ich wechselte unseren gesamten Produktkatalog – über 180.000 Bilder – von JPEG zu WebP, ohne dies ordnungsgemäß bei unserer Nutzerbasis zu testen. Das Ergebnis? Ein Anstieg der Absprungraten um 23 % bei Nutzern älterer iOS-Geräte, die statt unserer Produkte kaputte Bilder sahen.

Diese kostspielige Lektion hat mir etwas Entscheidendes beigebracht: Die Wahl eines Bildformats besteht nicht darin, das „beste“ auszuwählen – es geht darum, die Trade-offs zu verstehen und sie an Ihr spezifisches Publikum und Ihren Anwendungsfall anzupassen. Heute werde ich alles teilen, was ich aus der Verwaltung der Bildauslieferung für eine Plattform gelernt habe, die täglich 2,3 Millionen Bilder an Nutzer in 47 Ländern liefert.

Die Landschaft der Bildformate hat sich dramatisch entwickelt. Als ich in diesem Bereich anfing, war JPEG der unbestrittene König für Fotografien, und PNG übernahm alles andere. Jetzt haben wir WebP, AVIF, JPEG XL und eine Buchstabensuppe anderer Formate, die alle bessere Kompression und Qualität versprechen. Aber hier ist, was die meisten Artikel Ihnen nicht sagen werden: Das „beste“ Format hängt entirely von Ihren spezifischen Einschränkungen ab – den Geräten Ihres Publikums, Ihrer Serverinfrastruktur, Ihren Entwicklungsressourcen und Ihren Leistungszielen.

Ich werde die drei praktischsten Formate für die Webnutzung heute aufschlüsseln: JPEG (der zuverlässige Veteran), WebP (der pragmatische Mittelweg) und AVIF (der neueste Neuling). Ich werde echte Zahlen aus unserer Produktionsumgebung teilen, erklären, wann jedes Format sinnvoll ist, und Ihnen einen Rahmen geben, um diese Entscheidung für Ihre eigenen Projekte zu treffen. Am Ende werden Sie verstehen, nicht nur welches Format Sie wählen sollten, sondern auch warum – und wie Sie es umsetzen können, ohne die gleichen kostspieligen Fehler zu machen, die ich gemacht habe.

Grundlagen verstehen: Wie diese Formate tatsächlich funktionieren

Bevor wir mit den Vergleichen beginnen, lassen Sie uns festlegen, worüber wir tatsächlich sprechen. Bildformate sind nicht nur verschiedene Dateierweiterungen – sie repräsentieren grundsätzlich unterschiedliche Ansätze zur Speicherung und Kompression visueller Informationen. Diese Unterschiede zu verstehen ist entscheidend, da sie direkte Auswirkungen auf die Leistung Ihrer Website, die Benutzererfahrung und sogar Ihre Serverkosten haben.

Die Wahl eines Bildformats besteht nicht darin, das „beste“ auszuwählen – es geht darum, die Trade-offs zu verstehen und sie an Ihr spezifisches Publikum und Ihren Anwendungsfall anzupassen.

JPEG, entwickelt im Jahr 1992, verwendet verlustbehaftete Kompression basierend auf der diskreten Kosinustransformation. In einfacher Sprache analysiert es Bilder in 8x8 Pixel-Blöcken und verwirft Informationen, die menschliche Augen weniger wahrscheinlich bemerken. Deshalb exceliert JPEG bei Fotografien mit sanften Farbverläufen, hat jedoch Schwierigkeiten mit scharfen Kanten und Text. Nach drei Jahrzehnten bleibt JPEG das am weitesten verbreitete unterstützte Format – ich habe noch nie ein Gerät oder einen Browser erlebt, der kein JPEG anzeigen konnte. Diese universelle Kompatibilität ist ihr Gewicht in Gold wert, wenn Sie ein globales Publikum bedienen.

WebP, 2010 von Google eingeführt, wurde speziell für das Web entwickelt. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression, sowie Transparenz und Animation. Die verlustbehaftete Kompression verwendet prädiktive Kodierung – sie betrachtet benachbarte Pixel, um vorherzusagen, was ein Pixel sein sollte, und speichert dann nur die Differenz. In unseren Tests erreicht WebP typischerweise 25-35 % kleinere Dateigrößen als JPEG bei vergleichbarer visueller Qualität. Das Format gewann etwa 2020 ernsthaft an Zugkraft, als Safari endlich Unterstützung hinzufügte, was ihm Deckung in allen wichtigen Browsern gab.

AVIF (AV1 Image File Format) ist der neueste Akteur, standardisiert im Jahr 2019. Es basiert auf dem AV1-Videocodec und verwendet unglaublich ausgeklügelte Kompressionstechniken, einschließlich inhaltsadaptiver Transformationen und fortschrittlicher Vorhersagemethoden. In unseren Benchmarks sind AVIF-Dateien typischerweise 40-50 % kleiner als vergleichbare JPEGs und 20-30 % kleiner als WebP. Der Haken? Es ist rechnerisch kostspielig, zu kodieren und zu dekodieren, und die Browserunterstützung wächst, ist jedoch noch nicht universell.

Hier ist ein konkretes Beispiel aus unserem Produktkatalog: Ein 1200x800 Pixel großes Produktfoto, das als JPEG 245 KB groß ist, wird zu 178 KB als WebP (27 % Reduzierung) und 142 KB als AVIF (42 % Reduzierung). Diese Einsparungen multiplizieren sich über Tausende von Bildern. Für unsere Plattform sparte der Wechsel von JPEG zu WebP etwa 4,2 TB Bandbreite pro Monat. Das führte zu Einsparungen von 1.340 $ bei den CDN-Kosten – nicht lebensverändernd, aber auch nicht trivial.

Browser-Unterstützung: Der Realitätstest, den Sie brauchen

Hier treffen Theorie und Realität aufeinander, und hier machte ich meinen $47.000 Fehler. Die Unterstützung von Browsern ist nicht binär – es ist nicht nur „unterstützt“ oder „nicht unterstützt“. Es ist eine komplexe Landschaft der teilweisen Unterstützung, versionsspezifischen Eigenheiten und Randfällen, die Ihre Website auf subtile Weise zum Absturz bringen können.

Nach meinen neuesten Daten aus unserer Analyse (die 2,1 Millionen Sitzungen im letzten Monat abdeckt) sehen wir Folgendes: JPEG hat 100 % Unterstützung, das ist klar. WebP hat eine Unterstützung von 96,8 % in unserer Nutzerbasis. Die fehlenden 3,2 % entsprechen etwa 67.000 monatlichen Nutzern – hauptsächlich auf älteren iOS-Geräten (vor iOS 14) und in einigen Unternehmensumgebungen mit veralteten Browsern. AVIF hat eine Unterstützung von 73,4 %, was bedeutet, dass mehr als ein Viertel unserer Nutzer AVIF-Bilder nicht nativ sehen kann.

Aber hier ist die Nuance, die mir kostete: selbst wenn ein Browser ein Format „unterstützt“, variiert die Implementierungsqualität. Wir stellten fest, dass einige Android-Geräte, die Chrome 85-89 ausführen, gelegentlich WebP-Bilder über 4 Megapixel nicht dekodieren konnten und stattdessen ein kaputtes Bildsymbol anzeigten. Das betraf weniger als 0,5 % der Nutzer, aber im E-Commerce ist das der Unterschied zwischen einem Verkauf und einem Absprung.

Die Lösung ist fortschrittliche Verbesserung durch die Verwendung des Bild-Elements mit Fallbacks. Hier ist, was wir nach meiner kostspieligen Lektion implementiert haben:

Wir liefern AVIF an Browser, die es unterstützen (maximale Bandbreiteneinsparung), und wechseln zu WebP für Browser, die das unterstützen, und schließlich liefern wir JPEG als universellen Fallback. Dieser Ansatz erhöhte zwar unsere Implementierungskomplexität, jedoch erhielten wir das Beste aus allen Welten. Unser Bildauslieferungscode überprüft jetzt die Unterstützung und gibt das effizienteste Format aus, das jeder Browser verarbeiten kann.

Eine kritische Erkenntnis: Überprüfen Sie nicht nur die globalen Browserstatistiken – analysieren Sie Ihre tatsächliche Nutzerbasis. Unser Publikum ist tendenziell etwas älter und umfasst viele Unternehmensnutzer, was bedeutet, dass wir eine höhere Nutzung von Legacy-Browsern haben als eine Website, die jüngere Demografien anspricht. Eine Gaming-Website oder ein Technikblog könnte 85 % + AVIF-Unterstützung haben, während eine Regierungsseiten möglicherweise nur 60 % haben. Ihre Erfahrung wird absolut variieren.

Ich habe auch gelernt, format-spezifische Fehlerquoten zu überwachen. Wir haben Logging eingerichtet, um Ladefehler von Bildern nach Format zu verfolgen, was das erwähnte Android-WebP-Problem aufdeckte. Ohne diese Überwachung wären wir blind geflogen und hätten Konversionen verloren, ohne zu verstehen warum. Jetzt verfolgen wir nicht nur, ob Bilder laden, sondern auch, wie lange sie zum Dekodieren benötigen – denn ein Format, das technisch unterstützt wird, aber 800 ms zum Dekodieren auf einem Mittelklasse-Handy benötigt, ist nicht wirklich „unterstützt“ im bedeutungsvollen Sinne.

Dateigröße und Qualität: Die Zahlen, die wirklich zählen

Lasst uns über die Metrik sprechen, die jeder interessiert: Wie viel kleiner sind diese Dateien wirklich? Ich habe Tausende von Konvertierungen in unserem Produktkatalog durchgeführt, und ich kann Ihnen echte Zahlen geben – keine theoretischen Benchmarks, sondern echte Ergebnisse aus Produktionsbildern.

Das „beste“ Format hängt entirely von Ihren spezifischen Einschränkungen ab: den Geräten Ihres Publikums, Ihrer Serverinfrastruktur, Ihren Entwicklungsressourcen und Ihren Leistungszielen.

Für fotografische Inhalte (unsere Produktbilder, Lifestyle-Aufnahmen und Hero-Bilder) sehen wir Folgendes: Wenn wir mit einem qualitativ hochwertigen JPEG auf Qualitätsstufe 85 (unserer Basislinie) beginnen, reduziert die Konvertierung in WebP bei gleichwertiger wahrnehmbarer Qualität die Dateigröße um 24-32 %. Die Konvertierung in AVIF reduziert sie um 38-48 %. Das sind keine kleinen Unterschiede – bei unseren 180.000 Produktbildern würde der Wechsel von JPEG zu AVIF etwa