Die beiden Bildformate JPG und PNG gehören zu den am häufigsten verwendeten Formaten und sind beide hervorragend für den Einsatz auf Websites geeignet. Beide Formate finden im Webdesign unterschiedliche Anwendungen und haben jeweils ihre eigenen Stärken und Schwächen. In diesem Artikel werden JPG und PNG miteinander verglichen, um zu zeigen, welches Format sich für welchen Zweck am besten eignet. SEO-optimierte Bilder sind ein wesentlicher Bestandteil von Content und spielen eine entscheidende Rolle in der Suchmaschinenoptimierung.
Die Bildformate können mit verschiedenen Profilen und/oder einer modifizierbaren Quantisierungsmatrix erstellt werden. Daher sind die hier erzielten Werte hinsichtlich Qualität und Dateigröße nicht direkt mit Ergebnissen aus anderen Tests vergleichbar.
PNG
Das PNG-Format ist ein verlustfreies Bildformat, das es ermöglicht, Bilder effizient zu verkleinern. PNG steht für ‘Portable Network Graphics’ und ist der Nachfolger des GIF-Formats. Es bietet, ähnlich wie das GIF-Format, einen Alphakanal, mit dem transparente Hintergründe dargestellt werden können. Farbverläufe und feine Strukturen führen bei der PNG-Kompression jedoch schnell zu größeren Dateigrößen.
Bildqualität von PNG
Da PNG ein verlustfreies Format ist, entstehen beim Export keine Qualitätsverluste.
Während Objekte wie Diagramme sauber abgebildet werden und die Dateigröße gering bleibt, verändert sich dies bei detailreicheren Motiven mit vielen Farbtönen.
Um die Dateigröße zu verringern, können die Bildinformationen quantisiert werden. Dies führt jedoch zu Aliasing und Rasterungen, insbesondere bei mehrfarbigen Motiven, bei denen der Unterschied deutlich stärker auffällt. Bei mittlerer Qualität sind bereits deutlich sichtbare Rasterpunkte erkennbar. Während zweifarbige Motive bei mittlerer Quantisierung noch überzeugen können, ist das Ergebnis bei vielfarbigen Motiven ungenügend.
Zwar lassen sich die Artefakte durch höhere Quantisierungswerte verringern, jedoch verliert die Quantisierung aufgrund der dann deutlichen Steigerung der Dateigröße ihre Daseinsberechtigung. In solchen Fällen kommen Formate wie das im Folgenden vorgestellte JPG zum Einsatz, die ihre Vorteile ausspielen.
JPG
Das JPG (JPEG)-Format ist ein verlustbehaftetes Kompressionsformat für Bilder. Seit Jahren ist JPG das Standard-Kompressionsformat in Digitalkameras. Nur hochwertigere Geräte bieten zusätzlich die Möglichkeit, Fotos ohne Kompression im RAW-Format zu speichern. Bei Verwendung der JPG-Kompression wird die Dateigröße eines Fotos erheblich reduziert.
Für die Bildnachbearbeitung bietet das RAW-Format jedoch deutliche Vorteile gegenüber JPG, da im RAW-Profil keine Filter wie etwa die Rauschunterdrückung angewendet werden. Das RAW-Format hat außerdem bei dunklen Bereichen den Vorteil, dass hier noch Bildinformationen vorhanden sind, die der Fotograf nutzen kann, um diese Bereiche aufzuhellen und Details sichtbar zu machen. Diese Bildinformationen fehlen in JPG-Dateien.
Für den Fotografen ist die Verwendung des RAW-Formats daher empfehlenswert. Im Webdesign und für die Verwendung im Internet ist das JPG-Format aufgrund der geringen Dateigrößen jedoch bestens 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 erzielt eine gute 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 mehrfarbigen Beispiel auch eine deutlich erkennbare Abstufung beim Farbverlauf zu sehen. Die Anzahl der Farben wird bei diesem Kompressionsgrad spürbar reduziert.
JPG Dateigröße
Die Dateigröße eines zweifarbigen Motivs mit 152,3 KB (877x877px) ließ sich im Test mit einer Kompressionsqualität von q=84 auf 62,5 KB um deutliche 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 der regulären Kompressionsqualität von q=50 verkleinert werden und liegt dann bei nur noch 44,9 KB.
Psychovisuelle Erkennung ist analog zu psychoakustischer Kompression wie z.B. bei MP3-Audio, bei der nur die für das menschliche Ohr relevanten Informationen in der MP3-Datei gespeichert werden.
Eine Verringerung der Auflösung mit verbundener Kompression bei q=84 verringert die Dateigröße deutlich und bietet immer noch ein gutes, für das WWW geeignetes Ergebnis.
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 Typografie, 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 des JPG-Formats liegen in der guten Komprimierbarkeit von detailreichen Bildern aus der Fotografie. In solchen Fällen würde PNG deutlich größere Dateien erzeugen.
Bemerkenswert ist die Tatsache, dass ein ursprüngliches PNG-Bild, das 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 daran, dass mithilfe der PNG-Kompression besonders bei einfachen Motiven sehr kleine Bildgrößen erzielbar sind. Der Zwischenschritt durch die JPG-Kompression fügt jedoch zusätzliche Kompressionsartefakte hinzu. Diese Artefakte werden beim erneuten Encodieren in das PNG-Format vom Renderer als Bildinformationen interpretiert und führen so zu einer entsprechend höheren Bild-Dateigröße.