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 Fabrverläufe und weist kaum Details auf. Um die Grenzen von PNG zu verdeutlichen wird das Beispielbild zusätzlich noch mit einem Farbverlauf eingefärbt.

PNG Bild in voller QualitätBild 1

Format: PNG
Qualität: hoch
Größe bei 160000px Auflösung (400x400px): 34,3 KB
Größe bei 769129px Auflösung (877x877px): 43,2 KB

PNG Bild in mittlerer Qualität mit Quantisierungswert 10Bild 2

Format: PNG
Qualität: mittel
Größe bei 160000px Auflösung (400x400px): 14,3 KB
Größe bei 769129px Auflösung (877x877px): 21,0 KB

Ausschnitt PNG in voller QualitätBild 1 Ausschnitt

Format: PNG
Qualität: hoch

Ausschnitt PNG in mittlerer QualitätBild 2 Ausschnitt

Format: PNG
Qualität: mittel

PNG Bild in niedriger Qualität mit Quantisierungswert 2Bild 3

Format: PNG
Qualität: niedrig
Größe bei 160000px Auflösung (400x400px): 11,9 KB
Größe bei 769129px Auflösung (877x877px): 15,5 KB

mehrfarbiges PNG Bild in bester QualitätBild 4

Format: PNG
Qualität: hoch
Größe bei 160000px Auflösung (400x400px): 89,1 KB
Größe bei 769129px Auflösung (877x877px): 359,0 KB

Ausschnitt PNG Bild in niedriger QualitätBild 3 Ausschnitt

Format: PNG
Qualität: niedrig

Ausschnitt mehrfarbiges PNG Bild in hoher QualitätBild 4 Ausschnitt

Format: PNG
Qualität: hoch

mehrfarbiges PNG Bild mit Quantisierungswert 10Bild 5

Format: PNG
Qualität: mittel
Größe bei 160000px Auflösung (400x400px): 25,7 KB
Größe bei 769129px Auflösung (877x877px): 77,8 KB

mehrfarbiges PNG Bild mit Quantisierungswert 2Bild 6

Format: PNG
Qualität: niedrig
Größe bei 160000px Auflösung (400x400px): 13,0 KB
Größe bei 769129px Auflösung (877x877px): 22,3 KB

Ausschnitt mehrfarbiges PNG Bild mit Quantisierungswert 10Bild 5 Ausschnitt

Format: PNG
Qualität: mittel

Ausschnitt mehrfarbiges PNG Bild mit Quantisierungswert 2Bild 6 Ausschnitt

Format: PNG
Qualität: niedrig

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. Bei 480% der ursprünglichen Auflösung steigt die Dateigröße bei den drei Beispielen im Durchschnitt um nur 34%.
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.
Bei multicolour Szenarien ist das Verhältnis zwischen Auflösung und Dateigröße exponentiell steigend.

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.

JPG in voller QualitätBild 7

Format: JPG
Qualität: q=100 (maximal)
Größe bei 160000px Auflösung (400x400px): 66,0 KB
Größe bei 769129px Auflösung (877x877px): 152,3 KB

multicolour JPG mit Quantisierungswert 10Bild 8

Format: JPG
Qualität: q=84 (mittel)
Größe bei 160000px Auflösung (400x400px): 28,9 KB
Größe bei 769129px Auflösung (877x877px): 62,5 KB

JPG in voller QualitätBild 7 Ausschnitt

Format: JPG
Qualität: q=100 (maximal)

multicolour JPG mit Quantisierungswert 10Bild 8 Ausschnitt

Format: JPG
Qualität: q=84 (mittel)

multicolour JPG with enabled guetzliBild 9

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung
Größe bei 160000px Auflösung (400x400px): 15,6 KB
Größe bei 769129px Auflösung (877x877px): 44,9 KB

Multicolor JPG in lowest quantiser 2Bild 10

Format: JPG
Qualität: q=50 (niedrig)
Größe bei 160000px Auflösung (400x400px): 22,0 KB
Größe bei 769129px Auflösung (877x877px): 46,1 KB

multicolour JPG with enabled guetzliBild 9 Ausschnitt

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung

Multicolor JPG in lowest quantiser 2Bild 10 Ausschnitt

Format: JPG
Qualität: q=50 (niedrig)

JPG in voller QualitätBild 11

Format: JPG
Qualität: q=100 (hoch)
Größe bei 160000px Auflösung (400x400px): 92,0 KB
Größe bei 769129px Auflösung (877x877px): 315,7 KB

multicolour JPG with quantiser 10Bild 12

Format: JPG
Qualität: q=84 (mittel)
Größe bei 160000px Auflösung (400x400px): 28,5 KB
Größe bei 769129px Auflösung (877x877px): 66,2 KB

JPG in voller QualitätBild 11 Ausschnitt

Format: JPG
Qualität: q=100 (hoch)

multicolour JPG with quantiser 10Bild 12 Ausschnitt

Format: JPG
Qualität: q=84 (mittel)

multicolour JPG with enabled guetzliBild 13

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung
Größe bei 160000px Auflösung (400x400px): 13,8 KB
Größe bei 769129px Auflösung (877x877px): 46,2 KB

Multicolor JPG in lowest quantiser 2Bild 14

Format: JPG
Qualität: q=50 (niedrig)
Größe bei 160000px Auflösung (400x400px): 19,8 KB
Größe bei 769129px Auflösung (877x877px): 40,8 KB

multicolour JPG with enabled guetzliBild 13 Ausschnitt

Format: JPG
Qualität: q=84 (mittel) mit psychovisueller Erkennung

Multicolor JPG in lowest quantiser 2Bild 14 Ausschnitt

Format: JPG
Qualität: q=50 (niedrig)

Bildqualität bei JPG

Eine JPG Kompression verursacht bereits bei voller Qualität 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 40,8, 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 Beispuiel 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.

Categories: