Was ist der unterschied zwischen png und jpeg

Unser Fokus liegt auf den drei wichtigsten Dateiformaten, die für das Internet verwendet werden. Zunächst die Faustregeln für den schnellen Überblick:

• JPG für Fotos mit vielen Details und Farben (auch Farbverläufe z.B. im Himmel)
• PNG für Grafiken und Bilder mit wenigen Farben
• GIF für kleine Animationen mit wenigen Farben

JPG Format: Verlustbehaftet

Eigenschaften

JPG ist die Abkürzung für Joint Photographic Experts Group. Dieses Format kann bis zu 16,7 Mio. Farben darstellen und eignet sich daher gut für detaillierte Fotos. Es besteht auch die Möglichkeit der Verringerung des Speicherplatzes durch Dateikompression. Das ist für Bilder im Web oft notwendig, um Ladezeiten zu verringern.

Ein entscheidender Nachteil ist jedoch, dass bei der Kompression Bildinformationen verloren gehen. Je stärker komprimiert wird, desto weniger Bildinformationen enthält später das Bild. Ist es dann so sinnvoll, dieses verlustbehaftete Dateiformat zu wählen? Ja. Wir zeigen Ihnen die Qualitätsunterschiede anhand eines Beispiels und erklären, wie Sie trotzdem mit der Kompression arbeiten können, um Ladezeiten gering zu halten.

Kompression

Die Qualität von JPG Bildern lässt sich prozentual reduzieren – so kann zum Beispiel ein digitales Foto, das im Originalzustand mehrere Megabyte Speicherplatz benötigt, durch die Kompression im JPG-Format mit dem Qualitätsfaktor 80 auf wenige hundert Kilobyte reduziert werden. Der dabei entstehende Qualitätsverlust fällt kaum auf (siehe Grafik, 80%).

Erst bei sehr hoher Kompression, beispielsweise bei einer Qualität von 0% kann es dazu kommen, dass zu viele Bildinformationen verloren gehen. Dadurch entstehen sogenannte Artefakte (siehe vergrößerte Grafik, 0%). Das sind quadratische Treppenabstufungen im Bild, die Bildinformationen zusammenfassen. Ziel sollte es also sein, einen guten Kompromiss zwischen Bildqualität und Dateigröße zu finden. Bei diesem Beispiel kann getrost eine Qualität von 50% gewählt werden, ohne dass der Qualitätsverlust merklich auffällt.

Da wir Anfangs festgestellt haben, wie wichtig es ist, Dateigrößen gering zu halten stellt sich also nun die Frage: Warum überhaupt PNG verwenden?

PNG Format: Transparent und Verlustfrei

Eigenschaften

PNG steht für Portable Network Graphics und kann im Gegensatz zu JPG Transparenzen darstellen (vgl. Bild). Ein Objekt ohne Hintergrund kann einfach auf einem anderen farbigen Hintergrund platziert werden, ohne dass um das Objekt eine sichtbare weiße Fläche zu sehen ist. Zudem kann das PNG Format bis zu 16,7 Millionen Farben darstellen.

Das PNG Bildformat ist verlustfrei. Das ist besonders für Text und Grafiken von Bedeutung. Diese werden klar und detailliert dargestellt. Durch die Tatsache, dass Grafiken üblicherweise nur wenige Farben enthalten, können auch bildschirmfüllende Grafiken mit relativ kleinen Dateigrößen abgespeichert werden.

Vorsicht: Wird PNG stattdessen genutzt um Fotografien zu speichern, dann können diese Dateien aufgrund ihrer Detailfülle schnell relativ viel Speicherplatz verbrauchen. Um z.B. auf Webseiten kurze Ladezeiten zu gewährleisten sollte man dies vermeiden.

Eine kleine Anmerkung an dieser Stelle – Text sollte wenn möglich immer direkt als HTML-Element, nicht als Grafik, auf Webseiten platziert werden, um optimal von Suchmaschinen gelesen und indexiert werden zu können. Logos sind hier aber die Ausnahme.

JPG & PNG: Vergleich

Eigenschaften

Setzt man die Formate JPG und PNG in den Vergleich, so kann das PNG mit einer verlustfreien Kompression punkten. Im Gegensatz dazu ist das JPG bei der Dateikomprimierung verlustbehaftet. Auch die Transparenz ist beim PNG-Format ein Vorteil gegenüber dem JPG, da es sich auf Webseiten mit farbigem Hintergrund harmonischer einfügt und keinen weißen Bildhintergrund zeigt. Allerdings unterscheiden sich auch die Einsatzgebiete der Bildformate. Das PNG Format eignet sich ideal, wenn die Datei trennscharfe Elemente wie Texte, Logos, Grafiken, Diagramme oder Illustrationen enthält, wohingegen das JPG Format besser für Fotografien geeignet ist.

GIF Format: Animationen

Eigenschaften

Die wichtigsten Einsatzbereiche digitaler Bilder sind ja bereits von JPG und PNG abgedeckt. Was hat es also mit dem GIF Dateiformat auf sich? Das GIF, oder auch Graphics Interchange Format, ist ein relativ altes Format, das vor der Einführung von PNG vor allem im grafischen Bereich Einsatz fand – denn es ist ebenfalls in der Lage, Transparenz darzustellen. Das Problem ist allerdings, dass es maximal 256 Farben beinhalten kann. Bei detaillierteren Bildern sieht es deshalb selbst auf seiner höchsten Qualitätsstufe „pixelig“ oder körnig aus. In diesem Bereich wurde es daher von PNG abgelöst, da dieses bis zu 16,7 Mio. verschiedene Farben unterstützt.

Einen Trumpf hat das GIF jedoch noch im Ärmel: Es wird nach wie vor gerne auf Grund seiner Fähigkeit verwendet, Animationen abzuspielen (siehe Beispiel unten). Hierbei handelt es sich im Grunde um eine Abfolge von Einzelbildern. Solche animierten GIFs werden in allen Ecken des Internets immer noch sehr gerne verwendet – jedoch sollte man bei professionellen Webseiten in den meisten Fällen darauf verzichten sie einzusetzen.

Fazit zum Thema Bildformate

Im Grunde genommen ist es also recht einfach – bei Grafiken und Texten, die klar und detailliert dargestellt werden sollen, oder bei denen Transparenz wichtig ist, PNG verwenden. Bei Fotos gerne beherzt zu JPG greifen und eine Qualitätsstufe auswählen, die eine guten Kompromiss zwischen Bilddetail und Dateigröße darstellen.

Ein Tipp zum Schluss: Um Transparenz mit JPG zu simulieren kann ein freigestelltes Element einfach auf einem Hintergrund platziert werden, der die gleiche Farbe aufweist wie die Webseite, auf der es platziert werden soll.

Was ist besser JPEG oder PNG?

Warum PNG statt JPG?

Wann verwendet man PNG?

Welches Format ist das Beste für Bilder?