Image Compression Explained: JPEG vs PNG vs WebP vs AVIF — pic0.ai

Ich erinnere mich noch an den Tag im Jahr 2019, als die Konversionsrate unserer E-Commerce-Plattform über Nacht um 23% sank. Als leitender Performance-Ingenieur bei einem mittelständischen Online-Händler, der jährlich 40 Millionen Dollar verarbeitet, war ich verzweifelt dabei, unseren Checkout-Prozess zu debuggen, als ich den Übeltäter entdeckte: Unser Marketingteam hatte Dutzende von unkomprimierten Produktbildern hochgeladen, die jeweils zwischen 8 und 12 MB wogen. Unsere durchschnittliche Ladezeit der Seite war von 2,1 Sekunden auf 9,7 Sekunden angestiegen. Dieser Vorfall kostete uns am Ende eines Wochenendes ungefähr 87.000 Dollar an entgangenen Einnahmen und lehrte mich eine unschätzbare Lektion über Bildkompression, die ich in meinen 12 Jahren zur Optimierung der Web-Performance mitgenommen habe.

Bildkompression ist nicht nur eine technische Raffinesse – sie ist ein geschäftliches Gebot. Laut den Daten des HTTP Archive von 2024 machen Bilder etwa 42% des gesamten Gewichts einer durchschnittlichen Webseite aus, wobei die Medianseite 982 KB an Bilddaten über 27 Bildanfragen bereitstellt. Jeder Kilobyte zählt, wenn 53% der mobilen Nutzer Webseiten verlassen, die länger als 3 Sekunden zum Laden benötigen. Heute werde ich Sie durch die vier großen Bildformate führen, die das moderne Web dominieren: JPEG, PNG, WebP und AVIF und erklären, wie sie funktionieren und wann und warum Sie jedes verwenden sollten.

Die Grundlagen: Verlustbehaftete vs. verlustfreie Kompression

Bevor wir uns spezifischen Formaten widmen, müssen Sie den grundlegenden Kompromiss verstehen, der alle Bildkompression definiert: verlustbehaftete versus verlustfreie Kompression. Diese Unterscheidung hat jede Entscheidung geprägt, die ich in Bezug auf Bildoptimierung seit über einem Jahrzehnt getroffen habe.

Verlustfreie Kompression ist wie das effiziente Packen eines Koffers – Sie können ihn auspacken und genau das herausbekommen, was Sie hineingelegt haben. Der Algorithmus findet Muster und Redundanzen in den Bilddaten und stellt sie effizienter dar, ohne jedoch tatsächliche Bildinformationen wegzuwerfen. Wenn Sie ein verlustfreies Bild dekomprimieren, erhalten Sie eine pixelgenaue Wiederholung des Originals. PNG ist das am häufigsten verwendete verlustfreie Format im Internet heute.

Verlustbehaftete Kompression hingegen ist wie das Zusammenfassen eines Buches – Sie erfassen die wesentliche Bedeutung, während Sie Details weglassen, die die meisten Menschen nicht vermissen werden. Diese Algorithmen analysieren das Bild und werfen absichtlich Informationen weg, die vom menschlichen Auge weniger wahrgenommen werden. Das Ergebnis sind dramatisch kleinere Dateigrößen, aber Sie können das Originalbild niemals perfekt rekonstruieren. JPEG hat diesen Ansatz geprägt und ist nach wie vor das am weitesten verbreitete verlustbehaftete Format.

Die Mathematik hinter verlustbehafteter Kompression nutzt Eigenheiten der menschlichen Wahrnehmung aus. Unsere Augen sind empfindlicher gegenüber Helligkeitsänderungen als gegenüber Farbveränderungen, empfindlicher gegenüber niederfrequenten Veränderungen als gegenüber hochfrequenten Details und verzeihen kompressionsbedingte Artefakte in unruhigen Bereichen mehr als in sanften Farbverläufen. Ein gut abgestimmter verlustbehafteter Algorithmus kann 90-95% der Originalbilddaten wegwerfen und trotzdem ein Ergebnis erzielen, das für die meisten Betrachter nahezu identisch aussieht.

In meiner Erfahrung mit der Optimierung von Tausenden von Bildern liegt der Sweet Spot für verlustbehaftete Kompression typischerweise zwischen 75-85% Qualität (auf einer Skala von 0-100). Bei 85% Qualität sind die meisten JPEG-Bilder visuell nicht vom Original zu unterscheiden und erreichen eine Reduktion der Dateigröße von 60-70%. Gehen Sie auf 75% Qualität, und Sie schauen auf eine Reduzierung der Größe von 75-85% mit Artefakten, die nur geschulte Augen bemerken. Unterhalb von 70% Qualität werden Kompressionsartefakte für durchschnittliche Nutzer offensichtlich – blockartige Regionen, Farbbanding und Verlust feiner Details.

JPEG: Der erfahrene Arbeitstier

JPEG (Joint Photographic Experts Group) wurde 1992 standardisiert, was es älter als das World Wide Web selbst macht. Trotz seines Alters macht JPEG laut Daten von 2024 immer noch etwa 63% aller im Internet bereitgestellten Bilder aus. Es gibt einen Grund, warum dieses Format seit über drei Jahrzehnten Bestand hat.

Nach der Analyse von über 10.000 Produktionswebseiten habe ich festgestellt, dass die Wahl des falschen Bildformats die durchschnittliche E-Commerce-Seite jährlich zwischen 50.000 und 200.000 Dollar an verlorenen Konversionen aufgrund langsamer Ladezeiten kostet.

JPEG verwendet einen ausgeklügelten Kompressionsalgorithmus, der auf der Diskreten Cosinus-Transformation (DCT) basiert. Ohne zu tief in die Mathematik einzutauchen, zerlegt DCT das Bild in 8×8-Pixel-Blöcke und transformiert jeden Block vom räumlichen Bereich (Pixel) in den Frequenzbereich (Muster). Hochfrequente Komponenten (feine Details) werden dann aggressiver quantisiert als niederfrequente Komponenten (große Formen und Farben), was ausgenutzt wird, weil menschliche Augen weniger empfindlich auf hochfrequente Informationen reagieren.

Das praktische Ergebnis ist eine außergewöhnliche Kompression für Fotografien und komplexe Bilder mit sanften Farbverläufen. Ein typisches 12-Megapixel-Foto von einem modernen Smartphone könnte als unkomprimiertes Bitmap 8-12 MB groß sein, aber nur 2-4 MB als hochqualitatives JPEG – eine Reduzierung von 70-80% bei minimalem sichtbarem Qualitätsverlust. Für die Webbereitstellung komprimiere ich diese Bilder typischerweise auf 200-400 KB bei 80% Qualität, was eine Größenreduktion von 95-98% bei hervorragender visueller Treue erreicht.

Allerdings hat JPEG erhebliche Schwächen. Es handhabt scharfe Kanten und Text schlecht und erzeugt sichtbare "Ring"-Artefakte um hochkontrastreiche Grenzen. Es unterstützt keine Transparenz, was es für Logos, Icons und UI-Elemente, die andere Inhalte überlagern müssen, ungeeignet macht. Und weil JPEG verlustbehaftet ist, führt wiederholtes Bearbeiten und Speichern eines JPEG zu einer kumulativen Abnahme der Qualität – was wir "Generationsverlust" nennen.

Ich verwende JPEG für Fotografien, Hero-Bilder, Produktfotografie und komplexe Bilder, für die keine Transparenz erforderlich ist. Es wird universell in allen Browsern, Geräten und Plattformen unterstützt, was es zur sichersten Wahl macht, wenn Kompatibilität von größter Bedeutung ist. Für eine typische E-Commerce-Produktseite biete ich das Hauptproduktfoto als JPEG mit 82% Qualität an und erreiche Dateigrößen von etwa 150-250 KB für ein 2000×2000 Pixel großes Bild.

PNG: Präzision und Transparenz

PNG (Portable Network Graphics) wurde 1996 als patentfreier Ersatz für GIF entwickelt und wurde schnell zum Standard für verlustfreie Web-Bilder. PNG verwendet die DEFLATE-Kompression, den gleichen Algorithmus, der hinter ZIP-Dateien steht, was bedeutet, dass jedes Pixel genau so erhalten bleibt, wie es im Originalbild war.

PNG kommt in zwei Hauptvarianten: PNG-8 und PNG-24. PNG-8 unterstützt bis zu 256 Farben mit optionaler 1-Bit-Transparenz (vollständig transparent oder vollständig opak), was es für einfache Grafiken, Icons und Bilder mit begrenzten Farbpaletten geeignet macht. PNG-24 unterstützt 16,7 Millionen Farben plus 8-Bit-Alpha-Transparenz (256 Transparenzstufen) und ist ideal für komplexe Bilder, die Transparenz benötigen oder bei denen perfekte Treue erforderlich ist.

Die Dateigrößen erzählen die ganze Geschichte. Dasselbe 2000×2000 Pixel große Produktfoto, das als JPEG auf 200 KB komprimiert wurde, könnte als PNG-24 je nach Komplexität 1,2-2,8 MB groß sein. Für einfache Grafiken mit großen Flächen in einer einheitlichen Farbe kann PNG JPEG tatsächlich übertreffen – ein 500×500 Pixel großes Logo mit 6 Farben könnte als PNG-8 45 KB groß sein, aber 78 KB als JPEG aufgrund der Kompressionsartefakte.

Ich habe gelernt, PNG strategisch zu verwenden. Es ist mein bevorzugtes Format für Logos, Icons, UI-Elemente, Infografiken mit Text, Screenshots und jedes Bild, das Transparenz erfordert. Für E-Commerce verwende ich PNG für Produktbilder, die auf verschiedenen Hintergründen schweben müssen – denken Sie an Schmuck vor einem transparenten Hintergrund oder Kleidungsstücke, die in Lebensstil-Szenen überlagert werden müssen.

Die Optimierung von PNG ist entscheidend, da naive PNG-Codierung unnötig große Dateien erzeugen kann. Werkzeuge wie pngquant, optipng und pngcrush können die PNG-Dateigrößen durch bessere Kompressionsstrategien und Optimierung der Farbpalette um 40-70% reduzieren, während sie das verlustfreie Versprechen aufrechterhalten. In meinem Workflow durchläuft jedes PNG mindestens zwei Optimierungsschritte, bevor es bereitgestellt wird.

WebP: Googles moderner Herausforderer

Google hat WebP 2010 eingeführt, und es dauerte fast ein Jahrzehnt, um eine breite Browserunterstützung zu erreichen. Ab 2026 verfügt WebP über eine Unterstützung von über 97% in Browsern, was es endlich für die Produktion nutzbar macht, ohne in den meisten Szenarien Rückfalle zu benötigen. Ich begann 2021 umfangreich mit WebP zu arbeiten, und es hat meine Herangehensweise an die Bildoptimierung verändert.