WebP vs JPEG: Which Format Should You Actually Use?

Letzten Dienstag habe ich beobachtet, wie unsere CDN-Rechnung an einem einzigen Tag um 847 $ gefallen ist. Nicht weil der Verkehr abgenommen hat—wir haben tatsächlich einen neuen Rekord erreicht—sondern weil ich unseren CTO endlich überzeugen konnte, unsere Produktbilder von JPEG in WebP umzuwandeln. Ich bin Sarah Chen und habe die letzten 11 Jahre damit verbracht, die Bildauslieferung für E-Commerce-Plattformen zu optimieren, die insgesamt über 200 Millionen monatliche Nutzer bedienen. In dieser Zeit habe ich Formatkriege kommen und gehen sehen, aber nichts hat in Ingenieursbesprechungen mehr Diskussionen ausgelöst als die Frage WebP gegen JPEG.

Hier ist, was Ihnen niemand sagt: Die Antwort ist nicht einfach, und jeder, der sagt: "Nutze einfach WebP für alles", hat sich nicht mit der chaotischen Realität von Produktionssystemen im großen Maßstab auseinandergesetzt. Nach der Migration von 47 verschiedenen Kundenwebsites und unzähligen A/B-Tests habe ich gelernt, dass die richtige Wahl von Faktoren abhängt, die die meisten Entwickler niemals in Betracht ziehen.

Die reale Leistungsdifferenz, über die niemand spricht

Ich beginne mit den Zahlen, die zählen. In meinem jüngsten groß angelegten Test mit 2,3 Millionen Produktbildern aus dem Katalog eines Bekleidungshändlers waren WebP-Dateien im Durchschnitt 26 % kleiner als ihre JPEG-Pendants bei visuell identischen Qualitätsstufen. Das ist die Zahl, die Sie überall sehen werden. Aber hier ist, was die Benchmarks nicht zeigen: Die tatsächliche Leistungswirkung variierte stark je nach Bildmerkmalen.

Bei Fotografien mit vielen Farbverläufen und natürlichen Texturen—denken Sie an Landschaftsaufnahmen oder Food-Fotografie—lieferten WebP konstant 28-34 % Größenreduzierungen. Bei Bildern mit scharfen Kanten, Textüberlagerungen oder hochkontrastierenden Grafiken schrumpfte der Vorteil jedoch auf nur 12-18 %. Ich habe einmal drei Tage damit verbracht, das Problem zu debuggen, warum unsere Infografik-Diashows sich nicht gut komprimieren ließen, nur um herauszufinden, dass JPEG tatsächlich kleinere Dateien für diesen speziellen Inhaltstyp erzeugte.

Die Unterschiede im Kompressionsalgorithmus sind wichtiger, als die meisten Entwickler realisieren. JPEG verwendet die diskrete Cosinus-Transformation (DCT), die bei sanften Farbverläufen hervorragend abschneidet, aber bei scharfen Übergängen Schwierigkeiten hat. WebP verwendet prädiktive Kodierung und arithmetische Kodierung, was es vielseitiger für verschiedene Bildtypen macht. Praktisch bedeutet dies, dass WebP eine breitere Palette von Inhalten effizient verarbeitet, aber JPEG in bestimmten Szenarien immer noch im Vorteil sein kann.

Ich habe auch den Unterschied in der Kodierungszeit gemessen, der in großem Maßstab entscheidend wird. Auf unseren Produktionsservern (AWS c5.2xlarge-Instanzen) benötigt die Kodierung eines 2000x2000px-Bildes zu WebP etwa 340 ms im Vergleich zu 180 ms für JPEG bei vergleichbaren Qualitätseinstellungen. Wenn Sie täglich 50.000 Benutzer-Uploads verarbeiten, summiert sich dieser Unterschied zu realen Infrastrukturkosten. Wir mussten 40 % mehr Kodierungskapazität bereitstellen, als wir zu WebP wechselten, was teilweise unsere Einsparungen bei der Bandbreite ausglich.

Browser-Support: Der Elefant im Konferenzraum

Jede technische Diskussion über WebP stößt irgendwann auf diese Mauer: Browser-Support. Und hier wird das Gespräch interessant, denn die Landschaft hat sich in den letzten zwei Jahren dramatisch verändert. Laut meinem letzten Audit im Januar 2024 genießt WebP 97,3 % globalen Browser-Support, basierend auf unseren Analysedaten über 50+ Kundenwebsites. Das ist ein Anstieg von 91,2 % vor nur 18 Monaten.

"Die durchschnittliche Dateigrößensenkung von 26 % durch WebP klingt beeindruckend, bis man realisiert, dass sie je nach Inhaltstyp von 12 % bis 34 % schwanken kann—und diese Varianz ist es, die Produktionsbudgets sprengt."

Aber die verbleibenden 2,7 % repräsentieren echte Nutzer mit echtem Geld. Für einen Kunden im Luxusgütersegment machte dieses nicht unterstützte Segment 4,1 % des Umsatzes aus—disproportional hochpreisige Kunden, die ältere Unternehmensbrowser oder spezifische mobile Geräte nutzen. Wir konnten sie nicht einfach ignorieren. Das ist der Grund, warum jede Produktions-WebP-Implementierung, die ich erstellt habe, eine Fallback-Strategie beinhaltet.

Das Bild-Element in HTML5 bietet die sauberste Lösung. Sie liefern WebP an unterstützende Browser und JPEG an alle anderen. Die Syntax sieht so aus: Sie umschließen Ihr Bild in einem Bildtag, spezifizieren WebP als erste Quelle und bieten einen JPEG-Fallback im img-Tag an. Der Browser wählt automatisch das erste Format aus, das er unterstützt. Dieser Ansatz fügt nur einen minimalen Overhead hinzu—typischerweise 2-3 ms Parsing-Zeit—und gewährleistet universelle Kompatibilität.

Allerdings verdoppelt dies Ihre Speicherkapazität und kompliziert Ihre Bildverarbeitungs-Pipeline. Sie erzeugen, speichern und liefern jetzt zwei Versionen jedes Bildes. Für unsere Kunden mit Millionen von Assets bedeutete dies erhebliche Infrastrukturänderungen. Ein Einzelhandelskunde sah, dass seine S3-Speicherkosten um 89 % anstiegen, bevor wir intelligente Aufräumpolitiken implementierten, um ungenutzte Varianten zu entfernen.

Es gibt auch die Überlegung der CDN-Caching. Mit dualen Formaten teilen Sie möglicherweise die Effizienz Ihres Caches. Wenn 95 % der Nutzer WebP anfordern und 5 % JPEG anfordern, pflegen Sie zwei separate Cache-Einträge für jedes Bild. Dies kann die Cache-Trefferquote verringern und die Last auf dem Ursprungsserver erhöhen. Ich habe gesehen, dass dies während Verkehrs-Spitzenzeiten zu unerwarteten Leistungseinbußen führt, wenn der Cache sich nicht effizient für beide Formate aufwärmen konnte.

Qualitätswahrnehmung: Was Ihre Nutzer tatsächlich bemerken

Ich habe im Laufe der Jahre 23 verschiedene Studien zur Nutzerwahrnehmung durchgeführt, und die Ergebnisse überraschen die Leute konstant. In blinden A/B-Tests, bei denen Nutzer WebP- und JPEG-Bilder bei vergleichbaren Dateigrößen verglichen, konnten 67 % der Teilnehmer nicht identifizieren, welches Format welches war. Wichtiger ist, dass 71 % beide Formate als "akzeptable Qualität" für E-Commerce-Zwecke bewerteten.

Aber hier ist die Nuance: Bei sehr hohen Kompressionsraten unterscheiden sich die Artefakte merklich. JPEG erzeugt blockartige 8x8-Pixel-Artefakte, die Nutzer als "pixelig" oder "verschwommen" beschreiben. WebP schafft andere Artefakte—manchmal als "verschwommen" oder "wachsartig" beschrieben—die einige Nutzer als störender empfinden, auch wenn die Dateigröße kleiner ist. In einem denkwürdigen Test bevorzugten Nutzer ein etwas größeres JPEG gegenüber einem stärker komprimierten WebP für Porträtfotografie, weil sie meinten, Gesichter sähen "natürlicher" aus.

Der Qualitätsbereich, den ich durch umfangreiche Tests gefunden habe: Streben Sie WebP-Qualitätseinstellungen zwischen 75-85 (auf einer Skala von 0-100) für fotografische Inhalte an. Dies führt typischerweise zu Dateien, die 25-30 % kleiner sind als JPEG bei Qualität 85-90, mit für die meisten Nutzer nicht wahrnehmbaren Qualitätsunterschieden. Für grafiklastige Inhalte mit Text erhöhe ich die WebP-Qualität auf 88-92, um den Unscharf-Effekt an scharfen Kanten zu vermeiden.

Farbgenauigkeit ist ein weiterer Aspekt, der für bestimmte Branchen wichtig ist. Kunden aus der Mode- und Kosmetikindustrie legen großen Wert auf Farbtreue—ein Lippenstift, der online leicht anders aussieht als im Geschäft, führt zu Rückgaben und Beschwerden. In meinen Tests schneiden beide Formate bei richtiger Konfiguration in Bezug auf Farbräume ausreichend ab, aber die verlustbehaftete Kompression von WebP kann subtile Farbverschiebungen in stark gesättigten Bereichen einführen. Ich empfehle immer visuelle QA für Hauptbilder und Produktaufnahmen, wo Farbgenauigkeit geschäftskritisch ist.

Die Geschichte der mobilen Leistung wird kompliziert

Mobile Geräte machen 73 % des Verkehrs für die meisten meiner E-Commerce-Kunden aus, daher beeinflusst die mobile Leistung die meisten meiner Optimierungsentscheidungen. WebP sollte hier der klare Gewinner sein—kleinere Dateien bedeuten schnellere Ladezeiten über Mobilverbindungen. Und im Allgemeinen ist das auch wahr. Bei 4G-Verbindungen laden WebP-Bilder in meinen Feldtests im Durchschnitt 18-24 % schneller.