Image Formats Explained: JPG vs PNG vs WebP vs SVG — pic0.ai

Der $47.000 Fehler, der änderte, wie ich über Bildformate denke

Drei Jahre nach Beginn meiner Karriere als Web-Performance-Berater sah ich, wie die E-Commerce-Website eines Kunden während des Black Friday-Verkaufs spektakulär abstürzte. Der Übeltäter? Unoptimierte Produktbilder, die ihre Server in die Knie zwangen und ihnen schätzungsweise $47.000 an entgangenem Umsatz über sechs Stunden kosteten. An diesem Tag änderte sich grundlegend, wie ich an die Bildoptimierung herangehe, und deshalb schreibe ich heute diesen Leitfaden.

Ich bin Marcus Chen, und ich habe die letzten zwölf Jahre damit verbracht, die Web-Performance für Unternehmen zu optimieren, die von skrupellosen Startups bis zu Fortune 500-Händlern reichen. In dieser Zeit habe ich über 2.000 Websites analysiert und deren gesamte Bildgröße um geschätzte 340 Terabyte reduziert. Wenn ich eines gelernt habe, dann ist es dies: Die Wahl des richtigen Bildformats ist nicht nur eine technische Entscheidung – es ist eine Geschäftsentscheidung, die sich direkt auf Ihre Bilanz auswirkt.

Die Landschaft der Bildformate hat sich dramatisch weiterentwickelt, seit ich in diesem Bereich anfing. 2012 hatten wir im Wesentlichen zwei Optionen: JPG oder PNG. Heute navigieren wir durch ein komplexes Ökosystem von Formaten, darunter WebP, AVIF, SVG und sogar aufkommende Optionen wie JPEG XL. Jedes Format hat seine Stärken, Schwächen und idealen Anwendungsfälle. Das Verständnis dieser Unterschiede kann den Unterschied zwischen einer Website ausmachen, die in 1,2 Sekunden lädt, und einer, die 8 Sekunden benötigt – und in der Web-Performance könnten diese 6,8 Sekunden ebenso gut eine Ewigkeit sein.

In diesem umfassenden Leitfaden werde ich die vier wichtigsten Bildformate aufschlüsseln, die Sie verstehen müssen: JPG, PNG, WebP und SVG. Ich werde reale Leistungsdaten, praktische Implementierungsratschläge und den Entscheidungsrahmen, den ich mit meinen Kunden verwende, teilen. Egal, ob Sie Entwickler, Designer, Vermarkter oder Unternehmensinhaber sind, am Ende dieses Artikels wissen Sie genau, welches Format Sie für jede Situation verwenden sollten.

JPG: Das Arbeitstier, das immer noch das Web dominiert

Lassen Sie uns mit dem Format beginnen, das nach wie vor für etwa 42 % aller Bilder im Web verantwortlich ist: JPG (oder JPEG, beide Namen beziehen sich auf dasselbe Format). Entwickelt von der Joint Photographic Experts Group im Jahr 1992, ist JPG seit über drei Jahrzehnten bemerkenswert relevant geblieben. Aber warum?

"In der Web-Performance ist eine Verzögerung von 6 Sekunden nicht nur ärgerlich – sie tötet die Konversion. Studien zeigen, dass 53 % der mobilen Nutzer Websites verlassen, die länger als 3 Sekunden zum Laden brauchen, und die Bildoptimierung ist der schnellste Weg, um diese verlorenen Sekunden zurückzugewinnen."

JPG verwendet verlustbehaftete Kompression, was bedeutet, dass es kleinere Dateigrößen erreicht, indem es dauerhaft einige Bilddaten verwirft. Das Geniale an JPG ist, dass es Informationen verwirft, die das menschliche Auge weniger wahrscheinlich bemerkt. Es nutzt die Tatsache aus, dass unsere Augen empfindlicher auf Änderungen der Helligkeit reagieren als auf Änderungen der Farbe, und es verwendet dies, um Farbinformationen aggressiver zu komprimieren als Helligkeitsdaten.

In meinen Tests könnte ein typisches hochauflösendes Foto mit 4000x3000 Pixeln als unkomprimierte Datei 18-25 MB groß sein. Speichern Sie dasselbe Bild als JPG mit Qualitätsstufe 85 (auf einer Skala von 0-100), und Sie erhalten ungefähr 2,1-2,8 MB – eine Reduktion von etwa 88-90 %. Senken Sie die Qualität auf 75, können Sie möglicherweise bis auf 1,2-1,6 MB mit minimalem wahrnehmbarem Qualitätsverlust für die Webansicht gelangen.

Hier wird es interessant: Die Beziehung zwischen Qualitätsstufen und Dateigröße ist nicht linear. Nach meiner Erfahrung liegt der optimale Bereich für die meisten Webbilder zwischen Qualität 75-85. Der Sprung von Qualität 85 auf 95 könnte die visuelle Qualität nur um 3-5 % verbessern, während die Dateigröße um 40-60 % steigt. Umgekehrt kann die Reduzierung von 75 auf 60 die Dateigröße um weitere 30-40 % verringern, aber der Qualitätsverlust wird deutlich wahrnehmbarer, insbesondere in Bereichen mit feinen Details oder Text.

JPG eignet sich hervorragend für Fotos und komplexe Bilder mit vielen Farben und Farbverläufen. Ich habe kürzlich eine Reise-Website optimiert, die 1.200 Zielbilder hatte. Durch die Umwandlung ihrer ursprünglichen PNG-Dateien in JPG mit Qualität 80 konnten wir ihre gesamte Bildgröße von 340 MB auf 87 MB reduzieren – eine Reduktion um 74 % – ohne dass es Beschwerden von Nutzern über die Bildqualität gab.

Allerdings hat JPG erhebliche Einschränkungen. Es unterstützt keine Transparenz, was es sofort für Logos, Symbole oder Bilder, die auf verschiedenen Hintergründen liegen müssen, disqualifiziert. Es hat auch Schwierigkeiten mit scharfen Kanten, Text und Grafiken mit einheitlichen Farben. Ich habe einmal gesehen, wie ein Kunde versuchte, JPG für ihr Logo zu verwenden – die Kompressionsartefakte um den Text herum ließen es aussehen, als wäre es siebzehnmal kopiert worden.

Ein weiterer kritischer Punkt: Die JPG-Kompression ist destruktiv und kumulativ. Jedes Mal, wenn Sie ein JPG öffnen, bearbeiten und erneut speichern, wenden Sie eine weitere Runde verlustbehafteter Kompression an. Ich habe Bilder gesehen, die mehrfach bearbeitet und gespeichert wurden, bis sie unbrauchbar wurden. Meine Regel: Immer eine unkomprimierte Masterdatei aufbewahren und nur als endgültigen Schritt in JPG exportieren.

PNG: Wenn Qualität und Transparenz am wichtigsten sind

PNG (Portable Network Graphics) wurde 1996 als patentfreies Alternativformat zu GIF entwickelt und ist das bevorzugte Format, wann immer Sie verlustfreie Kompression oder Transparenz benötigen. Im Gegensatz zu JPG verwirft PNG keine Bilddaten – das, was Sie hineinfügen, ist genau das, was Sie erhalten.

PNG gibt es in zwei Hauptvarianten: PNG-8 und PNG-24. PNG-8 unterstützt bis zu 256 Farben und ist hervorragend für einfache Grafiken, Symbole und Bilder mit begrenzten Farbpaletten geeignet. PNG-24 unterstützt Millionen von Farben und ist das, was die meisten Leute meinen, wenn sie "PNG" sagen. Es gibt auch PNG-32, das im Wesentlichen PNG-24 mit einem 8-Bit-Alpha-Kanal für Transparenz ist.

Die Unterstützung der Transparenz in PNG ist tatsächlich beeindruckend. Im Gegensatz zur binären Transparenz von GIF (ein Pixel ist entweder vollständig transparent oder vollständig undurchsichtig) unterstützt PNG 256 Transparenzstufen. Dies ermöglicht sanfte Antialiasing- und halbtransparente Effekte. Ich habe kürzlich mit einer Designagentur gearbeitet, die das Logo ihres Kunden auf verschiedenen farbigen Hintergründen überlagern musste. Die Alpha-Transparenz von PNG machte dies trivial – das Logo sah auf jedem Hintergrund perfekt aus, ohne weiße Halos oder gezackte Kanten.

Allerdings hat die verlustfreie Kompression von PNG ihren Preis: die Dateigröße. Das gleiche 4000x3000 Foto, das ich zuvor erwähnt habe? Als PNG-24 könnte es 12-18 MB groß sein – etwa 6-10 Mal größer als ein vergleichbares JPG. Für Fotos und komplexe Bilder ist diese Größenstrafe selten für die Webbenutzung gerechtfertigt.

Wo PNG wirklich glänzt, ist bei Grafiken, Logos, Screenshots und Bildern mit Text. Ich habe einen Vergleichstest mit einem Screenshot eines Code-Editors durchgeführt. Als JPG mit Qualität 85 war die Datei 340 KB groß, aber der Text war leicht verschwommen und es gab sichtbare Kompressionsartefakte um die scharfen Kanten. Als PNG war die Datei 890 KB groß, aber der Text war perfekt scharf und lesbar. Für technische Dokumentationen oder jede Situation, in der Klarheit von größter Bedeutung ist, ist der Unterschied von 550 KB absolut gerechtfertigt.

PNG glänzt auch bei Bildern mit großen Flächen in einer einheitlichen Farbe. Der Kompressionsalgorithmus ist besonders effizient bei wiederholten Mustern und einheitlichen Farben. Ein einfaches Logo mit drei einheitlichen Farben könnte als PNG 15-20 KB wiegen, aber 45-60 KB als JPG, obwohl JPG als das "kleinere" Format gelten soll.

Eine Optimierungstechnik, die ich häufig verwende, ist die PNG-Quantisierung – die Reduzierung der Farbpalette zur Erstellung kleinerer PNG-8-Dateien. Tools wie pngquant können ein PNG-24 intelligent in PNG-8 umwandeln, was häufig 60-80 % Reduktion der Dateigröße bei minimalem wahrnehmbarem Qualitätsverlust erreicht. Ich habe diese Technik bei einem Satz von Symbolen für eine mobile App verwendet und die Gesamtgröße von 2,3 MB auf 580 KB reduziert, während die visuelle Qualität für die Benutzer nicht unterscheidbar blieb.

WebP: Das moderne Format, das Ihr Standard sein sollte

Wenn ich Ihnen nur einen Rat aus diesem gesamten Artikel geben könnte, wäre es dieser: Beginnen Sie, WebP für fast alles zu verwenden.