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 vs PNG antreten und zeigen im Detail auf, unter welchen Bedingungen welches Bildformat besser geeignet ist.

In einem früheren Artikel haben wir die Grundlagen zum Bilder bearbeiten festgehalten, die bei der SEO Optimierung von Bildern für den Einsatz auf einer Webseite helfen sollen.

PNG

Das PNG Bildformat ist ein Bildformat, mit dem sich verlustfrei Bilder verkleinern lassen. Es ist der Nachfolger des GIF Bildformats und bietet ebenso wie GIF einen transparenten Alphakanal. Mit einem Alphakanal lassen sich Hintergründe transparent machen. Das Webdesign Braunschweig Logo wurde ebenfalls mit PNG komprimiert. Dadurch hat es keinen Hintergrund und keinen Rahmen. Bei PNG lässt sich natürlich auch ein eingefärbter Hintergrund verwenden.
Ein transparenter Hintergrund ist neben dem Logo Design auch beim Erstellen von Icons sehr beliebt.
Farbverläufe und viele feine Strukturen führen bei der PNG Kompression schnell zu hohen Bildgrößen.

PNG Performance

1523 kb -> 763 kb

  • Bildqualität 100%
  • Bildgröße 40%

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. In einem kleinen Test wurde ein 6 MP großes Foto im NEF Format (ein RAW Bildformat bei Nikon Kameras) mit einer Bildgröße von 5,4 MB im JPG Format mit einer sehr hohen Qualität von q=95 komprimiert abgespeichert und dadurch um 50% auf 2,7 MB Bildgröße verkleinert. Die Kompression mit dem Wert 95 ist qualitativ so gut, dass zum unkomprimierten Format kaum erkennbare Kompressionsartefakte entstehen. 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. Aus Endprodukt zur Verwendung im Webdesign ist das JPG Format aber sehr gut geeignet.

JPG Performance

1523 kb -> 69 kb

  • Bildqualität 80%
  • Bildgröße 90%

Fazit JPG vs PNG

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 bei Motiven mit wenigen Farben und mit kontrastreichen Kanten wie z.B. bei Typographie sehr gute Ergebnisse erzielen. Die Kanten bleiben sauber ohne Kompressionsartefakte. Bilder mit wenig Informationen können mit der PNG Kompression auf eine geringe Bildgröße verkleinert werden.
Mit dem JPG Format lassen sich Bilder bei Bedarf sehr stark komprimieren.

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 äußerst kleine Bildgrößen erzielbar sind, der Zwischenschritt der JPG Kompression aber zusätzliche Kompressionsartefakte hinzufügt, die beim erneuten Abspeichern im PNG Format vom Renderer als Bildinformationen interpretiert werden und zu einer entsprechend höheren Bildgröße führen.