JPG vs. PNG

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Oftmals ist es ein großer Streit, welches der beiden Bildformate nun besser ist. Einerseits wird gesagt, dass Bilder als JPG gespeichert kleiner sind, andererseits wird aber oft genug das Gegenteil bewiesen, indem PNGs erstellt werden, die den selben Inhalt haben und dennoch kleiner sind.

Dieses "Phänomen" kommt durch die verschiedenen Techniken der Komprimierung bei beiden Bildern. Zuerst einmal sei gesagt, dass sie sich in Punkto Qualität eigentlich nicht unterscheiden. Vorteil von PNG ist allerdings, dass es Transparenz darstellen kann und somit für viele Webinhalte unabdingbar ist.
JPG dagegen hat verschiedene Komprimierungsmethoden und kann dabei besser angepasst werden.

Ob nun JPG oder PNG kleiner ist, kann man nicht absolut sagen, da es immer auf den Inhalt des Bildes ankommt.
In meinem Beispiel habe ich ein weißes Bild mit den Maßen 1000x1000px in Adobe Photoshop erstellt, einmal als PNG und einmal als JPG. Außerdem habe ich mir über Google ein Motiv mit derselben Größe gesucht und dieses auch über Adobe Photoshop abgespeichert, wieder als PNG und JPG, sowie einen Verlauf von #ddd nach #fff, ebenfalls als PNG und JPG.

Dabei kamen folgende Dateigrößen zustande:
Weiße Fläche
PNG: 7,86 KB
JPG: 22,7 KB

Motiv
PNG: 247 KB
JPG: 172 KB

Verlauf
PNG: 584 KB
JPG: 85,7 KB

Bei einfarbigen Bildern (ich habe es auch mit schwarz und rot getestet) ist PNG eindeutig überlegen. Sobald jedoch mehrere Farben vorhanden sind, steigt die Dateigröße von PNG exponentiell an. Dagegen kommt JPG gerade bei vielen Farben viel besser klar.
Bei kleinen Dateigrößen, z.B. also 10x10px, hat PNG dann aber wieder seine Vorteile, egal, ob es ein Verlauf, ein Motiv oder eine einfarbige Fläche ist. Größe und Farbenvielfalt müssen also immer beachtet werden.

Da Bilder für Websites also oftmals klein sind, ist hier PNG von Vorteil. Dagegen nimmt man logischerweise bei Hintergrundbildern, welche groß und farbenfroh sind, auf jeden Fall JPG.

Einen eindeutigen Sieger gibt es also nicht und wird es bei diesen Formaten wohl auch nie geben.
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

1.422 mal gelesen

Kommentare 4

  • Black Rider -

    Okay, ich werde bei Zeit nochmals einen neuen Test machen ;)
    Danke für dein Feedback.

  • LoL -

    "Ich habe es mit Speichern unter gemacht,"

    und das ist genau falsch für den web bereich, wenn dan sollte man das richtig sagen, für welchen anwenderbereich das ganze hier sein, man geht nähmlich davon aus das es sich hier im web dreht.

  • Black Rider -

    Ich sage in meinem Artikel nirgends, dass die Qualität des einen schlechter ist als die des anderen.

    Nunja, Photoshop mag nicht ideal sein, doch gehe ich sowieso nicht von einem Profidesigner aus, der meinen Artikel liest, sondern von einem Otto-Normal-Benutzer, der solche Programme zwecks des hohen Preises gar nicht hat. Außerdem ist es egal, mit welchem Programm ich es mache, solange ich beide Formate mit dem gleichen Programm abspeichere.

    Selbst mit 200 KB ist PNG bei größeren farbenfrohen Bildern von der Größe JPG unterlegen und darum ging es mir.

    Ich habe es mit Speichern unter gemacht, wie auch JPG. Und nein, ich habe kein interlaced genutzt und bei JPGs hatte ich die Qualität auf 12 mit dem progressiven Format mit 5 Durchgängen.

    Das sollte deine Fragen beantworten ;)

  • LoL -

    LoL jpg und png haben gleiche Qualität, da war einer wohl schlafen in der schule... den unterschied zwischen verlustfreien Komprimierung und Verlust gebundene Komprimierung kennst du aber.

    abgesehen davon das Photoshop nicht Ideall zum sepichern ist. mit Fireworks gehts kleiner und oder durch online dienste.

    img827.imageshack.us/i/62323087.png/
    img837.imageshack.us/i/26410518.png/

    desweiteren fehlt hier die info wie du gespeichert hast.
    Speichern unter?
    Für Webgespeichert?
    Interlaced genutzt?

    desweiteren hast du auch bei JPGs qualität 10 genommen oder diese runtergeschreibt? (was verlust bewirkt und somit beide formate nicht die gleiche qualitäts stufe aufweisen)

    kurz gesagt sehr wage das ganze hier