JPG vs. PNG: Vergleich der beiden Bildformate

JPG und PNG zählen seit Jahrzehnten zu den wichtigsten Grafikformaten (insbesondere im Web). Beide haben verschiedene Vor- und Nachteile. Neuere Formate wie HEIF oder WebP werden zwar immer beliebter, kommen aber noch lange nicht an die Verbreitung von JPG oder PNG heran.

Was ist JPG oder JPEG?

JPEG ist das gängigste Grafikformat für Fotos. Die von diesem Format verwendete Bildkomprimierung wurde bereits 1992 in der Norm ISO/IEC 10918-1 definiert. Die Bezeichnung JPEG geht auf die Joint Photographic Experts Group zurück, die diesen Standard entwickelte. Da man üblicherweise nur drei Zeichen für Dateiendungen verwendet, einigte man sich auf JPG als Endung für die Bilddateien.

Was ist PNG?

PNG ist ein Grafikformat, das sich besonders für Pixelgrafiken, Screenshots und Logos eignet. Das PNG-Format, dessen Abkürzung für Portable Network Graphics steht, wurde von einer Arbeitsgruppe des World Wide Web Consortium (W3C) ab 1994 entwickelt und später im ISO-Standard ISO/IEC 15948:2003 festgehalten.

PNG arbeitet verlustfrei und bietet die Möglichkeit, unterschiedliche Farbtiefen und flexibel definierbare Farbpaletten festzulegen. PNG wurde auch mit der Absicht entwickelt, eine moderne, frei verfügbare Alternative zum lizenzpflichtigen GIF-Format zu schaffen. Wie GIF enthält nämlich auch PNG einen Alphakanal, um im Bild transparente Bereiche festzulegen, die u. a. beim Erstellen von Logos und Icons für Websites und Apps nötig sind. Im Gegensatz zum GIF-Format, bei dem nur eine der maximal 256 möglichen Farben transparent sein kann, bietet PNG einen echten Alphakanal, der auch teiltransparente Bereiche – z. B. bei Überblendungen – ermöglicht.

JPG: Wie wirkt sich die Kompression auf die Qualität aus?

Als einfache Regel gilt: Je höher die Kompressionsrate eines JPG-Fotos, desto schlechter die Qualität. Die Kompression wird dabei in den Bildbearbeitungsprogrammen als Qualitätswert angegeben: Ein Wert von 100 entspricht demnach hundertprozentiger Qualität ohne Kompression. Dabei verhalten sich die Kompressionsstufe und die Dateigröße nicht linear zueinander. Bereits geringe Kompressionen, bei denen die Qualität noch sehr hoch ist, können die Dateigröße deutlich verkleinern.

Das abgebildete Foto hat beispielsweise eine unkomprimierte Größe von 22,16 MB bei einer Auflösung von 4.000 x 1.936 Pixeln. Bereits in der abgebildeten Qualitätsstufe 95 verringert sich die Dateigröße durch die JPEG-Kompression auf 1,25 MB. Bei den meisten Kameras und Smartphones ist 95 die Grundeinstellung für die Qualität beim Speichern von Fotos im JPG-Format.

Eine Kompression auf die Qualitätsstufe 60 verringert die Dateigröße auf 194 KB, also um etwa 15 Prozent verglichen mit der Qualitätsstufe 95. Der Unterschied ist im Beispielbild kaum zu sehen:

Bei stärkerer Kompression lässt die Bildqualität deutlich nach, während sich die Dateigröße nur noch geringfügig verkleinert. Im blauen Himmel des Beispielbilds sind in der Qualitätsstufe 25 beispielsweise deutliche Artefakte in Form von Farbringen erkennbar und der Farbverlauf ist nicht mehr gleichmäßig:

Bei starker Vergrößerung sind die Artefakte der JPEG-Kompression auch schon bei mittleren Qualitätsstufen sichtbar, wie das folgende Beispiel zeigt. Daher sollte die JPG-Qualität bei Fotos, die man über Onlinefotodienste oder in Drogeriemärkten mit sehr hoher Auflösung auf Papier drucken möchte, unverändert bleiben.

Das vergrößerte Bild zeigt, dass Kompressionsartefakte besonders auf einfarbigen Flächen und an kontraststarken Kanten auftreten. Deshalb ist das JPG-Format für Flächengrafiken, Screenshots und Icons nicht geeignet.

Progressives JPEG für schnellere Darstellung

Die Darstellung eines sehr großen Fotos kann – bedingt durch die Leistungsfähigkeit des Systems und die Übertragungsrate – einige Zeit dauern. JPG-Fotos sind aus sogenannten Koeffizienten, Blöcken von 8 x 8 Pixeln zusammengesetzt, die standardmäßig hintereinander gespeichert sind. So baut sich das Bild zeilenweise auf.

Beim progressiven JPEG wird zuerst ein mittlerer Farbwert jedes Koeffizienten gespeichert. So kann schon nach sehr kurzer Zeit ein unscharfes Bild mit groben Pixeln dargestellt werden. Danach folgen Farbinformationen für ein Viertel und ein Sechzehntel jedes Koeffizienten. Mit der Zeit wird die Darstellungsqualität immer besser. Die Betrachtenden können aber von Anfang an etwas erahnen und müssen nicht auf den zeilenweisen Bildaufbau warten.

Kompressionsverluste durch Bildbearbeitung

Bildbearbeitungsprogramme verarbeiten jeden Pixel eines Bilds, wie er in der Datei vorliegt, also auch Pixel, deren Farbe durch Kompression verfälscht wurde. Legt man einen Farb- oder Effektfilter über ein Bild oder skaliert es, wird es beim nächsten Speichern neu komprimiert, was die Qualität verschlechtert. Einmal verlorene Kantenkontraste oder Farben lassen sich nicht mehr retten. Besonders beim Versuch, ein Bild im Nachhinein zu schärfen, werden Kompressionsartefakte verstärkt. Je geringer die Qualitätsstufe eines Fotos, desto stärker wirken sich Nachbearbeitungen auf die Qualität aus. Hier bringt es nichts, die Qualitätsstufe nachträglich wieder zu erhöhen.

JPG vs. PNG – Screenshots

In Programmdokumentationen aller Art braucht man immer wieder Screenshots von Windows-Fenstern oder Smartphone-Apps. Diese sollte man bevorzugt im PNG-Format erstellen, was bei fast allen Screenshot-Tools auch voreingestellt ist. Auch Android-Smartphones speichern Screenshots beispielsweise automatisch im PNG-Format.

Screenshots enthalten exakte, gerade Linien mit klaren Kontrasten und einfarbige Flächen ohne Farbverlauf. Beides sind große Schwachpunkte im JPG-Format. Die folgenden Screenshots eines Dialogfelds von Windows 10 zeigen den Unterschied zwischen dem JPG- und PNG-Format.

Besonders deutlich wird der Qualitätsunterschied zwischen JPG und PNG bei Bildvergrößerungen. Der folgende Screenshot zeigt die JPG-Artefakte im Bereich der Farbpalette und rund um die schwarzen Buchstaben auf weißem Grund.

JPG vs. PNG: Vor- und Nachteile im Überblick

Zwischen den Formaten JPG und PNG gibt es viele Unterschiede. Beide Bildformate haben Vor- und Nachteile, die in der Tabelle zusammengefasst sind.

JPG oder PNG? – Erweiterungen und neue Formate

Neben neueren Formaten wie HEIF für Fotos oder WebP für Grafiken gab es immer wieder Versuche, die beiden bekannten Bildformate JPG und PNG zu erweitern. Bis jetzt konnte aber keines dieser Formate auch nur annähernd den Verbreitungsgrad von JPG oder PNG erreichen.

JPEG 2000

Das mit JPEG inkompatible Format JPEG 2000 ermöglicht eine bessere Komprimierung bei gleicher Qualität oder verlustfreie Kompression. Bestimmte detailreiche Bildregionen lassen sich in besserer Qualität darstellen als weniger wichtige Bereiche. Es sind mehr als 8 Bits pro Farbkanal und wesentlich größere Bildabmessungen möglich. Zur Darstellung sind verschiedene Progressionsmodi wählbar und die Metadaten können beliebige Informationen im XML-Format enthalten. Mögliche Dateiendungen sind: .jp2, .j2k, .jpf, .jpg2, .jpx, .jpm. Trotz zahlreicher Vorteile konnte JPEG 2000 das klassische JPG bis jetzt nicht ersetzen.

JNG

JPEG Network Graphics (JNG) erweitert das JPEG-Format um einen Alphakanal, der sich verlustfrei in Form eines PNG-Datenstroms integrieren lässt. Das Format hat keinen eigenen registrierten MIME-Typ.

APNG

Animated Portable Network Graphics (APNG) fügt dem PNG-Format Animationen hinzu, wie es auch im GIF-Format möglich ist.

PNG+

Erweiterung des PNG-Formats um Bildebenen (Layer) und Mehrseiten-Layouts. Dieses Format wurde nur vom mittlerweile eingestellten Programm Microsoft Picture It! verwendet und konnte sich nicht durchsetzen.

WebP

Das Bildformat WebP wurde von Google entwickelt und 2010 veröffentlicht, um JPEG, PNG und GIF in einem einzigen modernen Format zu vereinen. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression, einschließlich Transparenz (Alpha-Kanal) und Animationen. WebP liefert bei vergleichbarer Bildqualität deutlich kleinere Dateigrößen als JPG oder PNG. Der Standard wird heute von allen großen Browsern (Chrome, Firefox, Edge, Safari) unterstützt und ist besonders für den Einsatz im Web optimiert. Die Dateiendung lautet .webp.

AVIF

AVIF (AV1 Image File Format) basiert auf dem modernen AV1-Videocodec und bietet eine sehr effiziente Bildkomprimierung bei gleichzeitig hoher Bildqualität. Es unterstützt verlustfreie und verlustbehaftete Kompression, hohe Farbtiefe, HDR, Transparenz und Animationen. Im Vergleich zu WebP erzielt AVIF meist kleinere Dateigrößen bei gleicher Qualität, benötigt aber mehr Rechenleistung bei der Kodierung und Dekodierung. Es wird zunehmend von modernen Browsern und Plattformen unterstützt. Die Dateiendung ist .avif.

JPEG XL

Auch JPEG XL wurde als moderner Nachfolger klassischer Formate wie JPEG, PNG und GIF konzipiert und bietet sowohl verlustfreie als auch verlustbehaftete Kompression. Es unterstützt hohe Farbtiefen, große Bildabmessungen, Animationen, Transparenz und ist zudem abwärtskompatibel zu JPEG; bestehende JPGs lassen sich daher ohne Qualitätsverlust konvertieren. Die Akzeptanz ist derzeit noch begrenzt, da wichtige Plattformen wie Google Chrome die Unterstützung vorerst eingestellt haben. Die Dateiendung lautet .jxl.

JPG oder PNG – wofür eignet sich welches Format?

Das JPG-Format wurde für Fotos entwickelt und eignet sich dafür auch am besten. Besonders bei Aufnahmen von Landschaften oder Personen fallen die Kompressionsartefakte kaum auf. Dank der geringen Dateigröße lassen sich Websites gut mit JPG-Dateien illustrieren. Nur bei Produktfotos mit Details und exakten Kanten können Artefakte sichtbar werden. Auch das Freistellen von Objekten in Produktfotos wird durch die Kompression erschwert.

PNG eignet sich optimal für alle Arten von Grafiken, in denen exakte Kanten und einfarbige Flächen vorkommen. Das gilt auch für Screenshots sowie für die Umsetzung von Vektorgrafiken in Rasterformate bei Systemen, die keine Vektorgrafik darstellen können. Der Alphakanal ermöglicht transparente Bildbereiche, was besonders bei Icons für Apps und Websites wichtig ist.

Für eine schnelle Entscheidungsfindung, welches Bildformat für Ihren Anwendungsfall geeignet ist, kann ein Blick auf unseren Entscheidungsbaum helfen: