JPG und PNG zählen seit Jahr­zehn­ten zu den wich­tigs­ten Gra­fik­for­ma­ten (ins­be­son­de­re im Web). Beide haben ver­schie­de­ne Vor- und Nachteile. Neuere Formate wie HEIF oder WebP werden zwar immer beliebter, kommen aber noch lange nicht an die Ver­brei­tung von JPG oder PNG heran.

Profi-Website in Sekunden dank KI.
  • Profi-Website in Sekunden dank KI
  • Aus tausenden Vorlagen auswählen
  • 30 Tage kostenlos testen

Was ist JPG oder JPEG?

JPEG ist das gängigste Gra­fik­for­mat für Fotos. Die von diesem Format ver­wen­de­te Bild­kom­pri­mie­rung wurde bereits 1992 in der Norm ISO/IEC 10918-1 definiert. Die Be­zeich­nung JPEG geht auf die Joint Pho­to­gra­phic Experts Group zurück, die diesen Standard ent­wi­ckel­te. Da man üb­li­cher­wei­se nur drei Zeichen für Da­tei­endun­gen verwendet, einigte man sich auf JPG als Endung für die Bild­da­tei­en.

Was ist PNG?

PNG ist ein Gra­fik­for­mat, das sich besonders für Pi­xel­gra­fi­ken, Screen­shots und Logos eignet. Das PNG-Format, dessen Abkürzung für Portable Network Graphics steht, wurde von einer Ar­beits­grup­pe des World Wide Web Con­sor­ti­um (W3C) ab 1994 ent­wi­ckelt und später im ISO-Standard ISO/IEC 15948:2003 fest­ge­hal­ten.

PNG arbeitet ver­lust­frei und bietet die Mög­lich­keit, un­ter­schied­li­che Farb­tie­fen und flexibel de­fi­nier­ba­re Farb­pa­let­ten fest­zu­le­gen. PNG wurde auch mit der Absicht ent­wi­ckelt, eine moderne, frei ver­füg­ba­re Al­ter­na­ti­ve zum li­zenz­pflich­ti­gen GIF-Format zu schaffen. Wie GIF enthält nämlich auch PNG einen Al­pha­ka­nal, um im Bild trans­pa­ren­te Bereiche fest­zu­le­gen, 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 trans­pa­rent sein kann, bietet PNG einen echten Al­pha­ka­nal, der auch teil­trans­pa­ren­te Bereiche – z. B. bei Über­blen­dun­gen – er­mög­licht.

JPG: Wie wirkt sich die Kom­pres­si­on auf die Qualität aus?

Als einfache Regel gilt: Je höher die Kom­pres­si­ons­ra­te eines JPG-Fotos, desto schlech­ter die Qualität. Die Kom­pres­si­on wird dabei in den Bild­be­ar­bei­tungs­pro­gram­men als Qua­li­täts­wert angegeben: Ein Wert von 100 ent­spricht demnach hun­dert­pro­zen­ti­ger Qualität ohne Kom­pres­si­on. Dabei verhalten sich die Kom­pres­si­ons­stu­fe und die Da­tei­grö­ße nicht linear zu­ein­an­der. Bereits geringe Kom­pres­sio­nen, bei denen die Qualität noch sehr hoch ist, können die Da­tei­grö­ße deutlich ver­klei­nern.

Das ab­ge­bil­de­te Foto hat bei­spiels­wei­se eine un­kom­pri­mier­te Größe von 22,16 MB bei einer Auflösung von 4.000 x 1.936 Pixeln. Bereits in der ab­ge­bil­de­ten Qua­li­täts­stu­fe 95 ver­rin­gert sich die Da­tei­grö­ße durch die JPEG-Kom­pres­si­on auf 1,25 MB. Bei den meisten Kameras und Smart­phones ist 95 die Grund­ein­stel­lung für die Qualität beim Speichern von Fotos im JPG-Format.

Bild: Das Originalfoto der Kamera mit einer JPG-Qualität von 95
Das Ori­gi­nal­fo­to der Kamera mit einer JPG-Qualität von 95.

Eine Kom­pres­si­on auf die Qua­li­täts­stu­fe 60 ver­rin­gert die Da­tei­grö­ße auf 194 KB, also um etwa 15 Prozent ver­gli­chen mit der Qua­li­täts­stu­fe 95. Der Un­ter­schied ist im Bei­spiel­bild kaum zu sehen:

Bild: Das komprimierte Foto mit einer JPG-Qualität von 60
Das Foto mit höherer Kom­pres­si­on bei einer JPG-Qualität von 60 wird im Browser immer noch pro­blem­los dar­ge­stellt, dank ge­rin­ge­rer Da­tei­grö­ße aber deutlich schneller über­tra­gen.

Bei stärkerer Kom­pres­si­on lässt die Bild­qua­li­tät deutlich nach, während sich die Da­tei­grö­ße nur noch ge­ring­fü­gig ver­klei­nert. Im blauen Himmel des Bei­spiel­bilds sind in der Qua­li­täts­stu­fe 25 bei­spiels­wei­se deutliche Artefakte in Form von Farb­rin­gen erkennbar und der Farb­ver­lauf ist nicht mehr gleich­mä­ßig:

Bild: Das komprimierte Foto mit einer JPG-Qualität von 25
Bei zu starker JPG-Kom­pres­si­on (hier Qua­li­täts­stu­fe 25) treten deutliche Artefakte auf.

Bei starker Ver­grö­ße­rung sind die Artefakte der JPEG-Kom­pres­si­on auch schon bei mittleren Qua­li­täts­stu­fen sichtbar, wie das folgende Beispiel zeigt. Daher sollte die JPG-Qualität bei Fotos, die man über On­line­fo­to­diens­te oder in Dro­ge­rie­märk­ten mit sehr hoher Auflösung auf Papier drucken möchte, un­ver­än­dert bleiben.

Bild: Zoom in ein JPG-Bild der Qualitätsstufe 60
Bei starker Ver­grö­ße­rung sind Un­ter­schie­de der JPG-Qualität deutlich zu sehen.

Das ver­grö­ßer­te Bild zeigt, dass Kom­pres­si­ons­ar­te­fak­te besonders auf ein­far­bi­gen Flächen und an kon­trast­star­ken Kanten auftreten. Deshalb ist das JPG-Format für Flä­chen­gra­fi­ken, Screen­shots und Icons nicht geeignet.

Pro­gres­si­ves JPEG für schnel­le­re Dar­stel­lung

Die Dar­stel­lung eines sehr großen Fotos kann – bedingt durch die Leis­tungs­fä­hig­keit des Systems und die Über­tra­gungs­ra­te – einige Zeit dauern. JPG-Fotos sind aus so­ge­nann­ten Ko­ef­fi­zi­en­ten, Blöcken von 8 x 8 Pixeln zu­sam­men­ge­setzt, die stan­dard­mä­ßig hin­ter­ein­an­der ge­spei­chert sind. So baut sich das Bild zei­len­wei­se auf.

Beim pro­gres­si­ven JPEG wird zuerst ein mittlerer Farbwert jedes Ko­ef­fi­zi­en­ten ge­spei­chert. So kann schon nach sehr kurzer Zeit ein un­schar­fes Bild mit groben Pixeln dar­ge­stellt werden. Danach folgen Farb­infor­ma­tio­nen für ein Viertel und ein Sech­zehn­tel jedes Ko­ef­fi­zi­en­ten. Mit der Zeit wird die Dar­stel­lungs­qua­li­tät immer besser. Die Be­trach­ten­den können aber von Anfang an etwas erahnen und müssen nicht auf den zei­len­wei­sen Bild­auf­bau warten.

Bild: Erste Stufe des progressiven JPG
In der 1. Stufe erkennt man bei einem pro­gres­si­ven JPEG-Foto nur grobe Farbpixel.
Bild: Dritte Stufe des progressiven JPG
Mit der Zeit wird ein pro­gres­si­ves JPEG-Foto immer hoch­auf­lö­sen­der dar­ge­stellt.

Kom­pres­si­ons­ver­lus­te durch Bild­be­ar­bei­tung

Bild­be­ar­bei­tungs­pro­gram­me ver­ar­bei­ten jeden Pixel eines Bilds, wie er in der Datei vorliegt, also auch Pixel, deren Farbe durch Kom­pres­si­on ver­fälscht wurde. Legt man einen Farb- oder Ef­fekt­fil­ter über ein Bild oder skaliert es, wird es beim nächsten Speichern neu kom­pri­miert, was die Qualität ver­schlech­tert. Einmal verlorene Kan­ten­kon­tras­te oder Farben lassen sich nicht mehr retten. Besonders beim Versuch, ein Bild im Nach­hin­ein zu schärfen, werden Kom­pres­si­ons­ar­te­fak­te verstärkt. Je geringer die Qua­li­täts­stu­fe eines Fotos, desto stärker wirken sich Nach­be­ar­bei­tun­gen auf die Qualität aus. Hier bringt es nichts, die Qua­li­täts­stu­fe nach­träg­lich wieder zu erhöhen.

Tipp

Das JPG-Format erlaubt die ver­lust­freie Rotation des Bildes in 90°-Schritten. Al­ler­dings muss das Bild­be­ar­bei­tungs­pro­gramm dies un­ter­stüt­zen. An­dern­falls treten Verluste durch Neu­kom­pri­mie­rung auf. Manche Programme er­mög­li­chen auch recht­ecki­ge Aus­schnit­te, ohne dass der aus­ge­schnit­te­ne Bereich beim Speichern neu kom­pri­miert wird.

JPG vs. PNG – Screen­shots

In Pro­gramm­do­ku­men­ta­tio­nen aller Art braucht man immer wieder Screen­shots von Windows-Fenstern oder Smart­phone-Apps. Diese sollte man bevorzugt im PNG-Format erstellen, was bei fast allen Screen­shot-Tools auch vor­ein­ge­stellt ist. Auch Android-Smart­phones speichern Screen­shots bei­spiels­wei­se au­to­ma­tisch im PNG-Format.

Screen­shots enthalten exakte, gerade Linien mit klaren Kon­tras­ten und ein­far­bi­ge Flächen ohne Farb­ver­lauf. Beides sind große Schwach­punk­te im JPG-Format. Die folgenden Screen­shots eines Dia­log­felds von Windows 10 zeigen den Un­ter­schied zwischen dem JPG- und PNG-Format.

Bild: Windows-Screenshot als PNG
Im PNG-Format wird der Screen­shot genauso ab­ge­bil­det, wie das Fenster auf dem Bild­schirm zu sehen ist.
Bild: Windows Screenshot als JPG
Im JPG-Format er­schei­nen auf ein­far­bi­gen Flächen sowie im Schrift­be­reich deutliche Artefakte.

Besonders deutlich wird der Qua­li­täts­un­ter­schied zwischen JPG und PNG bei Bild­ver­grö­ße­run­gen. Der folgende Screen­shot zeigt die JPG-Artefakte im Bereich der Farb­pa­let­te und rund um die schwarzen Buch­sta­ben auf weißem Grund.

Bild: Artefakte im gezoomten Ausschnitt des JPG-Formats
Bei starker Ver­grö­ße­rung sind die JPG-Artefakte auf dem Screen­shot deutlich zu sehen.

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

Zwischen den Formaten JPG und PNG gibt es viele Un­ter­schie­de. Beide Bild­for­ma­te haben Vor- und Nachteile, die in der Tabelle zu­sam­men­ge­fasst sind.

JPEG PNG
Kom­pres­si­on Ver­lust­be­haf­tet, ein­stell­bar Ver­lust­frei
Da­tei­grö­ße Je nach Kom­pres­si­on sehr gering Deutlich größer als JPG
Farben 16,7 Millionen Bis zu 16,7 Millionen; auch geringere Farb­tie­fen möglich, was Da­tei­grö­ße spart.
Pro­gres­si­ve Dar­stel­lung Ja Nein
Trans­pa­renz Nein Ja mit Al­pha­ka­nal
Ver­lust­freie Be­ar­bei­tung 90°-Drehung und Aus­schnit­te, wenn vom Programm un­ter­stützt Ja
Metadaten im Bild EXIF- und IPTC-Standard Möglich, aber nicht stan­dar­di­siert (nicht von allen Pro­gram­men lesbar)
GPS-Position im Bild Möglich, je nach Ka­me­ra­funk­tio­nen Nein
Au­to­ma­ti­sches Speichern auf dem Smart­phone Fotos Screen­shots
Maximale Bildgröße Längere Seite: 65.535 Pixel Sys­tem­ab­hän­gig, theo­re­tisch un­be­grenzt

JPG oder PNG? – Er­wei­te­run­gen und neue Formate

Neben neueren Formaten wie HEIF für Fotos oder WebP für Grafiken gab es immer wieder Versuche, die beiden bekannten Bild­for­ma­te JPG und PNG zu erweitern. Bis jetzt konnte aber keines dieser Formate auch nur annähernd den Ver­brei­tungs­grad von JPG oder PNG erreichen.

JPEG 2000

Das mit JPEG in­kom­pa­ti­ble Format JPEG 2000 er­mög­licht eine bessere Kom­pri­mie­rung bei gleicher Qualität oder ver­lust­freie Kom­pres­si­on. Bestimmte de­tail­rei­che Bild­re­gio­nen lassen sich in besserer Qualität dar­stel­len als weniger wichtige Bereiche. Es sind mehr als 8 Bits pro Farbkanal und we­sent­lich größere Bild­ab­mes­sun­gen möglich. Zur Dar­stel­lung sind ver­schie­de­ne Pro­gres­si­ons­mo­di wählbar und die Metadaten können beliebige In­for­ma­tio­nen im XML-Format enthalten. Mögliche Da­tei­endun­gen sind: .jp2, .j2k, .jpf, .jpg2, .jpx, .jpm. Trotz zahl­rei­cher Vorteile konnte JPEG 2000 das klas­si­sche JPG bis jetzt nicht ersetzen.

JNG

JPEG Network Graphics (JNG) erweitert das JPEG-Format um einen Al­pha­ka­nal, der sich ver­lust­frei in Form eines PNG-Da­ten­stroms in­te­grie­ren lässt. Das Format hat keinen eigenen re­gis­trier­ten MIME-Typ.

APNG

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

PNG+

Er­wei­te­rung des PNG-Formats um Bild­ebe­nen (Layer) und Mehr­sei­ten-Layouts. Dieses Format wurde nur vom mitt­ler­wei­le ein­ge­stell­ten Programm Microsoft Picture It! verwendet und konnte sich nicht durch­set­zen.

Hinweis

Weder JNG noch APNG oder PNG+ sind W3C-Emp­feh­lun­gen, was ihre geringe Ver­brei­tung erklärt.

WebP

Das Bild­for­mat WebP wurde von Google ent­wi­ckelt und 2010 ver­öf­fent­licht, um JPEG, PNG und GIF in einem einzigen modernen Format zu vereinen. Es un­ter­stützt sowohl ver­lust­be­haf­te­te als auch ver­lust­freie Kom­pres­si­on, ein­schließ­lich Trans­pa­renz (Alpha-Kanal) und Ani­ma­tio­nen. WebP liefert bei ver­gleich­ba­rer Bild­qua­li­tät deutlich kleinere Da­tei­grö­ßen als JPG oder PNG. Der Standard wird heute von allen großen Browsern (Chrome, Firefox, Edge, Safari) un­ter­stützt und ist besonders für den Einsatz im Web optimiert. Die Da­tei­endung lautet .webp.

AVIF

AVIF (AV1 Image File Format) basiert auf dem modernen AV1-Vi­deo­co­dec und bietet eine sehr ef­fi­zi­en­te Bild­kom­pri­mie­rung bei gleich­zei­tig hoher Bild­qua­li­tät. Es un­ter­stützt ver­lust­freie und ver­lust­be­haf­te­te Kom­pres­si­on, hohe Farbtiefe, HDR, Trans­pa­renz und Ani­ma­tio­nen. Im Vergleich zu WebP erzielt AVIF meist kleinere Da­tei­grö­ßen bei gleicher Qualität, benötigt aber mehr Re­chen­leis­tung bei der Kodierung und De­ko­die­rung. Es wird zunehmend von modernen Browsern und Platt­for­men un­ter­stützt. Die Da­tei­endung ist .avif.

JPEG XL

Auch JPEG XL wurde als moderner Nach­fol­ger klas­si­scher Formate wie JPEG, PNG und GIF kon­zi­piert und bietet sowohl ver­lust­freie als auch ver­lust­be­haf­te­te Kom­pres­si­on. Es un­ter­stützt hohe Farb­tie­fen, große Bild­ab­mes­sun­gen, Ani­ma­tio­nen, Trans­pa­renz und ist zudem ab­wärts­kom­pa­ti­bel zu JPEG; be­stehen­de JPGs lassen sich daher ohne Qua­li­täts­ver­lust kon­ver­tie­ren. Die Akzeptanz ist derzeit noch begrenzt, da wichtige Platt­for­men wie Google Chrome die Un­ter­stüt­zung vorerst ein­ge­stellt haben. Die Da­tei­endung lautet .jxl.

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

Das JPG-Format wurde für Fotos ent­wi­ckelt und eignet sich dafür auch am besten. Besonders bei Aufnahmen von Land­schaf­ten oder Personen fallen die Kom­pres­si­ons­ar­te­fak­te kaum auf. Dank der geringen Da­tei­grö­ße lassen sich Websites gut mit JPG-Dateien il­lus­trie­ren. Nur bei Pro­dukt­fo­tos mit Details und exakten Kanten können Artefakte sichtbar werden. Auch das Frei­stel­len von Objekten in Pro­dukt­fo­tos wird durch die Kom­pres­si­on erschwert.

PNG eignet sich optimal für alle Arten von Grafiken, in denen exakte Kanten und ein­far­bi­ge Flächen vorkommen. Das gilt auch für Screen­shots sowie für die Umsetzung von Vek­tor­gra­fi­ken in Ras­ter­for­ma­te bei Systemen, die keine Vek­tor­gra­fik dar­stel­len können. Der Al­pha­ka­nal er­mög­licht trans­pa­ren­te Bild­be­rei­che, was besonders bei Icons für Apps und Websites wichtig ist.

Für eine schnelle Ent­schei­dungs­fin­dung, welches Bild­for­mat für Ihren An­wen­dungs­fall geeignet ist, kann ein Blick auf unseren Ent­schei­dungs­baum helfen:

Bild: Entscheidungsbaum zum passenden Bildformat
Unser Ent­schei­dungs­baum hilft Ihnen bei der Wahl eines passenden Bild­for­mats.
Website mit eigener Domain – MyWebsite Now
Erstellen Sie Ihre eigene Website in wenigen Minuten
  • Pro­fes­sio­nel­le Templates
  • Än­de­run­gen am Design mit nur einem Klick
  • Domain, SSL und E-Mail-Postfach inklusive
Zum Hauptmenü