JPG vs PNG - Bildformate im Vergleich

Bei den zwei Bildformaten JPG und PNG handelt es sich um zwei weit verbreitete Bildformate, die beide sehr gut für den Einsatz auf einer Homepage geeignet sind. Beide Formate funktionieren grundsätzlich unterschiedlich und haben Stärken und Schwächen. Aus dem Grund lassen wir in diesem Artikel JPG gegen PNG antreten und zeigen im Detail auf, unter welchen Bedingungen das Bildformat PNG oder JPG besser geeignet ist. In einem früheren Artikel haben wir bereits die wichtigsten Grundlagen zum Bearbeiten von Bildern erläutert. SEO optimierte Bilder stellen Content dar und sind ein wichtiger Aspekt bei der Suchmaschinenoptimierung.

Die Bildformate können mit verschiedenen Profilen und/oder einer modifizierbaren Quantisierungsmatrix erstellt werden. Demzufolge sind die hier erzielten Werte bei Qualität und Dateigröße und sind nicht mit Ergebnissen in anderen Tests vergleichbar.

PNG

Das PNG Format ist ein Bildformat, mit dem sich verlustfrei Bilder verkleinern lassen. PNG steht für “Portable Network Graphics” und stellt den Nachfolger des GIF Bildformats dar. Es bietet vergleichbar zum GIF Format einen Alphakanal. Mithilfe des Alphakanals lassen sich Hintergründe transparent machen. Ein transparenter Hintergrund wird auch beim Erstellen von Icons benötigt.
Farbverläufe und viele feine Strukturen führen bei der PNG Kompression schnell zu hohen Datenmengen. Im folgenden Beispiel wurde das Webdesign aus Braunschweig Logo im PNG Format jeweils in drei verschiedenen Qualitätsstufen exportiert. Ein Klick darauf öffnet eine höher aufgelöste Version. Das Beispielbild ist zweifarbig, hat keine Farbverläufe und weist kaum Details auf. Um die Grenzen von PNG zu verdeutlichen wird das Beispielbild zusätzlich noch mit einem Farbverlauf eingefärbt.

Bildqualität von png

Da es sich bei PNG um ein verlustfreies Bildformat handelt gibt es beim regulären Exportieren keine Qualitätsverluste. Um die Dateigröße zu reduzieren kann die Bildinformationen quantisiert werden. Zwischen dem zweifarbigen Bild 1 und Bild 2 sind auch bei starker Vergrößerung keine nennenswerten Artefakte erkennbar. Die gute Bildqualität in Bild 2 geht trotz der niedrigen Quantisierung auf die Einfachheit des Motivs bzw. insbesondere auf die Farbarmut zurück.
Bei sehr starker Quantisierung (Bild 3) tritt Aliasing auf.
Bei den Multicolour Motiven fällt der Unterscheid sehr viel deutlicher aus. Bei mittlerer Qualität sind deutliche Rasterpunkte auf den gefärbten Flächen feststellbar. Während das zweifarbige Motiv bei mittlerer Quantisierung überzeugen konnte, fällt das Ergebnis beim vielfarbigen Motiv als ungenügend aus. Bei niedrigster Quantisierung können die Farben gar nicht mehr abgebildet werden und die Flächen weisen Rastermuster auf. Während das Ergebnis bei niedrigster Qualität für zweifarbige Motive noch ausreichend war, fällt die Qualität bei vielfarbigen Motiven komplett durch.

PNG Dateigröße

Die verkleinerte Vorschau von Bild 1 liegt bei 34,3KB. Das Original mit einer mehr als 4,8-fachen Auflösung kommt auf 43,2 KB, was gerade mal einem Zuwachs der Dateigröße von 26% entspricht.
Bild 2 wurde sowohl bei der Vorschau als auch im Originalbild niedrig quantisiert. Durch die geringe Anzahl an Farben ist auch bei Vergrößerung dennoch kein nennenswerter Unterschied feststellbar. Die Bildgröße konnte aber deutlich verkleinert werden und liegt bei 14,3 KB für die Vorschau und bei 21,0 KB für das Bild in originaler Auflösung.
Bild 3 wurde so niedrig wie möglich quantisiert (niedrigste Qualität). Das Bild zeigt deutliches Aliasing (Treppenbildung) an schrägen Kanten. Die Dateigröße für Bild 3 ließ sich auf 11,9 KB für die Vorschau und auf 15,5 KB für die Originalauflösung weiter reduzieren. Die Dateigröße steigt ziemlich linear und steht in seinem sehr guten Verhältnis zur Auflösung.

Die Bildgröße beim multicolour Bild in der höchsten Qualität liegt bei der Vorschau bei bereits 89,1 KB und bei der vollen Auflösung bei stolzen 359 KB.
Bei mittlerer Qualität ist das Bild 25,7 KB bzw. 77,8 KB groß.
Bei niedrigster Qualität sind es 13 KB bzw. 22,3 KB.

Auf die Berechnung des Durchschnittswertes wird aufgrund der mangelhaften Qualität bei mittlerer und niedriger Quantisierung und der damit fehlenden Eignung verzichtet. Zwar lassen sich die Artefakte durch höhere Quantisierungswerte verringern, jedoch verliert die Quantisierung aufgrund der dann deutlichen steigenden Dateigröße auch wieder Ihre Daseinsberechtigung und andere Formate wie das im Folgenden vorgestellte JPG kommen zum Einsatz.

JPG

Das JPG (JPEG) Format ist ein Format zum verlustbehafteten Komprimieren von Bildern. In Digitalkameras ist JPG schon seit Jahren das Standard Kompressionsformat. Nur hochwertigere Geräte bieten zusätzlich auch das Speichern von Fotos ohne Kompression im RAW Bildformat an. Bei der Verwendung der JPG Kompression reduziert die Digitalkamera die Dateigröße eines Fotos um einen erheblichen Wert.
Für die Bild Nachbearbeitung hat die Verwendung des RAW Formats in der Kamera aber deutliche Vorteil im Gegensatz zu JPG, weil die Kamera beim RAW Profil keine Filter wie z.B. Noise Reduction auf das Bild anwendet. Das RAW Format hat auch bei dunklen Flächen den Vorteil, dass in diesen Bildbereichen noch Informationen vorhanden sind. Der Fotograf kann die dunklen Bereiche aufhellen und Details sichtbar machen. Diese Bildinformationen sind bei JPG nicht mehr vorhanden. Für den Fotografen ist die Verwendung des RAW Formats zu empfehlen. Für die Verwendung im Webdesign und Internet ist das JPG Format mit kleinen Dateigrößen aber sehr gut geeignet.

Um die Testergebnisse nicht durch eine erneute Rekompression zu verfälschen, wurden die Ausschnitte ohne Interpolation skaliert und verlustfrei im PNG Format gespeichert.

Bildqualität bei JPG

Eine JPG Kompression mit einem Qualitätswert von 92 erreicht das JPG Bildformat eine gute sichtbare Bildqualität. Bei einem Qualitätswert von q=84, der einen gängigen Wert darstellt, zeigen sich bereits ausgeprägte Artefakte, die sich als Klötzchenbildung im Bereich von Kanten abbilden. Bei q=50 steigt die Anzahl der Artefakte weiter, die auch noch ausgeprägter werden. Bei q=50 ist beim multicolour Beispiel auch eine deutlich erkennbare Abstufung beim Farbverlauf erkennbar. Die Anzahl der Farben wird bei diesem Kompressionsgrad spürbar reduziert.

JPG Dateigröße

Die Dateigröße beim zweifarbigen Motiv von 152,3 KB (877x877px) lässt sich mit einer Kompressionsqualität von q=84 auf 62,5 KB deutlich um 59% verkleinern. Eine weitere Verkleinerung durch stärkere Kompression resultiert bei q=50 in einer Dateigröße von 46,1 KB. Hierbei entstehen jedoch deutliche Einbußen bei der Qualität. Mithilfe einer psychovisuellen Erkennung mit q=84 kann die Dateigröße sogar noch unterhalb des Wertes bei q=50 verkleinert werden und liegt bei nur noch 44,9 KB. Die Qualität mit psychovisueller Erkennung bei q=84 ist entscheidend besser als eine Kompression mit q=50.

Psychovisuelle Erkennung ist analog zu psychoakustischer Kompression wie z.B. bei MP3 Audio, wo nur die für das menschliche Ohr relevanten Informationen in der MP3 Datei gespeichert werden.

Die Dateigröße beim mehrfarbigen Motiv von 315,7 KB (877x877px) lässt sich mit einer Kompressionsqualität von q=84 auf 66,2 KB noch deutlicher als beim zweifarbigen Motiv um satte 79% verkleinern. Eine weitere Verkleinerung durch stärkere Kompression resultiert bei q=50 in einer Dateigröße von 40,8 KB. Hierbei entstehen jedoch ebenfalls deutliche Einbußen bei der Qualität. Mithilfe einer psychovisuellen Erkennung mit q=84 liegt die Dateigröße mit 46,2 KB zwar oberhalb der Dateigröße von q=50 nur 40,8 KB, jedoch weist die Datei mit psychovisueller Erkennung bei q=84 eine bessere Qualität auf. Die Qualität der Kompression mit psychovisueller Erkennung ist aber auch im mehrfarbigen Beispiel schlechter als bei einer Kompression von q=84 ohne psychovisuelle Erkennung.

Direkter Vergleich und Fazit zu PNG oder JPG

Sowohl JPG als auch PNG sind seit vielen Jahren Standard im Webdesign. Mit den zwei Bildformaten lassen sich die meisten Bilder optimal darstellen.

Mit dem PNG Format lassen sich besonders Motive mit wenigen Farben und mit kontrastreichen Kanten wie z.B. bei Typographie, Logos et cetera sehr gute visuelle Ergebnisse bei geringer Dateigröße erzielen. Die Kanten bleiben sauber ohne Kompressionsartefakte. Bilder mit wenig Detailinformationen können mit der PNG Kompression auf eine sehr kleine Bildgröße verkleinert werden.

Mit dem JPG Format lassen sich alle Arten von Bildern stark komprimieren. Die besonderen Stärken vom JPG Format liegen in der guten Komprimierbarkeit von detailreichen Bildern wie bei der Fotografie. In solchen Fällen erzeugt PNG deutlich größere Dateien.

Bemerkenswert ist die Tatsache, dass ein ursprüngliches PNG Bild, dass zwischendurch mit JPG komprimiert wurde und letztlich doch wieder als PNG abgespeichert wird, deutlich größer sein kann als das ursprüngliche Bild. Das liegt häufig darin begründet, dass mithilfe der PNG Kompression besonders bei einfachen Motiven zwar äußerst kleine Bildgrößen erzielbar sind, der Zwischenschritt durch die JPG Kompression aber zusätzliche Kompressionsartefakte hinzufügt. Diese Artefakte beim erneuten Encodieren in das PNG Format vom Renderer als Bildinformationen interpretiert und führen so zu einer entsprechend höheren Bild Dateigröße.

Wir sind für Sie da

Zum Kontaktformular

Categories: