Webstandard & Webdesign - CSS, HTML

 

JPG gegen GIF und PNG - Finde das ideale Dateiformat für Bilder

JPG vs. GIF und PNG - Die drei großen Webformate stellen ohne Frage JPG, GIF und PNG da. Doch worin liegen die Unterschiede und welche Vor- und Nachteile bringen die jeweiligen Formate überhaupt mit sich. Eine Frage der man sich spätestens beim Erstellen des Bildmaterials seiner ersten eigenen Internetseite gegenüber steht. In diesem Artikel werden Euch daher diese drei Dateiformate von Bildern etwas näher vorgestellt. Hierbei werden ihre Tücken und ihre Stärken anschaulich erläutert und die hauptsächlichen Einsatzgebiete erklärt, denn jedes einzelne Bildformat hat bestimmte Stärken, die es für ein oder mehrere Einsatzgebiete interessant macht. Die Stärken dieser Formate liegen bspw. eindeutig in der geringen Dateigröße wodurch Internetseiten die Bilddaten enthalten schnell geladen werden können.

Kompression von Bildmaterial

Diese Reduzierung der Bilddaten in ihrer Dateigröße nennt man Kompression. Die Dateigröße wird sozusagen zusammengepresst wodurch ein z.B. ursprünglich 2 MB großes Foto plötzlich nur noch 500 KB Speichergröße einnimmt und somit viermal so schnell geladen werden kann. Das diese Kompression erreicht wird muss logischerweise etwas mit dem eigentlichen Bildmaterial geschehen. Diese müssen mit Hilfe bestimmter Algorithmen neu berechnet werden und unterliegen so einigen Einschränkungen was Qualität und Eigenschaft der Datei betrifft. Dabei können Bilder verlustfrei und verlustbehaftet komprimiert werden. Verlustbehaftet bedeutet in diesem Fall, dass Bilddaten optisch verändert werden um eine geringere Dateigröße zu erlangen. Verlustfrei hingegen bringt keine optische Veränderung mit sich, da der eigentliche Code der sozusagen das Bild ergibt angefasst und verändert wird.

... Je nach Verwendungszweck gibt es das bessere Format zu dem ihr greifen könnt, einen finalen Allrounder sucht man allerdings vergebens ...

Wer sich jetzt fragt, welches das beste Bildformat für den eigenen Internetauftritt darstellt, muss eigentlich immer je nach Verwendungszweck neu abwägen. Schauen wir uns mal anhand einiger Beispielbilder die Vor- und Nachteile der drei Formate JPG, GIF und PNG etwas näher an. Zugrunde für die Berechnung der Dateigröße liegt jeweils nur das Hintergrundbild einer Kirche. Im Original hat dieses Bild als JPG in höchster Qualität eine Dateigröße von etwa 400 kbyte. Über dieses Bild wird eine Grafik in Form eines Sterns gelegt, um auf diese Weise die mögliche Darstellung der Transparenz aufzuzeigen.

JPG - Joint Photographic Experts Group

JPG oder JPEG steht für Joint Photographic Experts Group. Der unschlagbare Vorteil von jpg ist der geringe Speicherplatzbedarf, es hat aber dadurch einen entscheidenden Nachteil, die Komprimierung verschlechtert die Bildqualität. Je nach eingesetzter Kompressionsrate wird das Bild mehr oder weniger komprimiert und dadurch in seiner Qualität mehr oder weniger verschlechtert. Bei der Komprimierung kommt es zur Bildung von sog. Artefakten welche in der besten Qualitätsstufe kaum sichtbar sind, sich allerdings je nach Kompressionsrate ausgeprägter und teilweise deutlich erkennbar herausbilden ( im Screenshot in höchster Komprimierung etwas übertrieben dargestellt um den Effekt klar erkennbar zu machen ). Weiterhin unterstützt das Format keine Transparenz wodurch tatsächlich leere Bereiche mit weißer Farbe aufgefüllt werden. Generell ist JPG bestens geeignet um Bilder in fotografischer Qualität abzubilden ohne das eine tatsächlich spürbare Minderung der Bildqualität vorhanden ist. Unschön wird es bei Illustrationen da hier die Kompression deutlich sichtbar wird.

Abb. 1 JPG - Joint Photographic Experts Group

Im Beispielbild seht ihr wie sich gerade im Bereich der Wolken und der Blätter die sog. JPG-Artefakte bilden und so unschöne Kanten produzieren. Die Stern-Grafik kann im JPG nicht transparent eingesetzt werden und erzeugt einen weißen Hintergrund.

GIF - Graphics Interchange Format

Das Graphics Interchange Format ist ein mittlerweile etwas in die Jahre gekommenes Format das allerdings mehrere große Vorteile hat. Es bietet zum einen die Möglichkeit Animationen mit bestimmten Zeitintervallen abzuspeichern und zum anderen kommt es mit einem niedrigen Speicherbedarf aus. Darunter leidet aber die Qualität. Mit nur 8-Bit Farbtiefe werden lediglich 256 Farben unterstützt. Das hat zufolge, dass Fotos stark in der Wiedergabe leiden und, motivabhängig, unansehnlich werden. Aufgrund dieser Einschränkung ist GIF für den Webbereich nur interessant wenn es darum geht einfache Animationen zu erstellen oder einfache Grafiken wie z.B. Cliparts darzustellen. Wenn Fotos abgebildet werden kommt es in den komplexen Farbverläufen, aufgrund der nur 256 darstellbaren Farben, zu heftigen Stufenbildungen und das Bild wirkt eher wie eine Comic-Zeichung als ein echtes Foto.

Abb. 2 Graphics Interchange Format

In der Beispiel-Abbilund ist dieser Comic-Look in den Wolken sehr gut zu erkennen. Eine fotografische realistische Abbildung ist hier nicht möglich. Dagegen ist eine transparente Darstellung der Grafik möglich und darüber hinaus wäre eine Animation umsetzbar.

PNG - Portable Network Graphics Format

Das Portable Network Graphics Format ist ein noch relativ junges. Es zeichnet sich durch einen geringen Speicherbedarf aus und unterstützt dabei noch Transparenzen. Es wurde als patentfreier Ersatz von GIF konzipiert bietet allerdings abhängig vom Motiv eine bis zu 25% stärkere Kompression. Generell ist der Einsatz von PNG allerdings in Sachen Bildqualität in jeder Hinsicht unbedenklich, da es sich hierbei um ein verlustfreies Bildformat handelt. Dies hat allerdings zur Folge das Fotos teilweise nicht so stark in ihrer Dateigröße reduziert werden können wie es bei JPG der Fall ist. Die perfekte Bildwiedergabe ist im Beispiel gut zu erkennen. Es gibt weder Farbprobleme noch irgendwelche Artefakte. Die Transparenz wird in der Grafik ebenso unterstützt wie bei dem GIF.

Abb. 3 PNG - Portable Network Graphics Format

Ein Haken hat PNG allerdings, wie in Abbildung 3 zu erkennen ist die Dateigröße bei diesem Motiv, trotz Kompression im Vergleich zu den anderen Beiden Bildformaten angestiegen. Die perfekte Bildwiedergabe ist in der Beispiel-Abbildung ist gut zu erkennen. Es gibt weder Farbprobleme noch irgendwelche Artefakte. Die Transparenzwird in der Grafik ebenso unterstützt wie bei dem GIF. Dabei gibt es allerdings zwei Unterscheidungen. Speichert man als PNG-8, dann erhält man die gleiche Art der Transparenz wie bei GIF. Kurz gesagt gibt es entweder nur transparente Pixel oder nicht transparente Pixel. Bei PNG-24 hingegen werden durch die Verwendung von "Alpha Transparenz" Pixel wirklich transparent und gehen so sanft in den Hintergrund über.

Fazit

Ihr seht schon, das beste Bildformat gibt es nicht. Je nach Verwendungszweck gibt es das bessere Format zu dem ihr greifen könnt, einen finalen Allrounder sucht man allerdings vergebens. Wollt ihr eine Animation unterbringen, dann müsst ihr zu GIF greifen. Geht es um Grafiken die Tranparenzen und fotografische Wiedergabe vereinen dann müsst ihr zu PNG greifen. Steht die reine fotografische Abbildung im Vordergrund dann ist JPG mit einer vertretbaren Kompressionsrate die erste Wahl. An folgende Faustregel versuche ich mich bei der Wahl des Bildformates zu halten:

• JPG - Wenn Fotomaterial im Netz detailgetreu dargestellt werden muss. Allerdings Kompromiss zwischen Kompression und Qualität finden.
• PNG - Wenn Icons, technische Zeichnungen oder Grafiken angezeigt werden sollen. Bei Fotomaterial das transparente Bereiche darstellen muss.
• GIF - Wenn kleine Animationen erstellt werden müssen.

Wenn ihr noch tiefer in die Welt der Bildformate eintauchen wollt, ist ein Blick auf Inhalte zu diesem Thema bei Wikipedia immer zu enmpfehlen. Hier steht zu den meisten Formaten eine fasst wissenschaftliche Abhandlung, die neben der jeweiligen Geschichte noch diverse sehr technische Details beherbergt ( JPG, PNG und GIF ).

Autor: Verfasst hat diesen Artikel Joachim Brückmann, den wir über diesem Wege als Gast-Blogger im Webstandard-Blog herzlich willkommen heißen. Joachim ist im übrigen der Mann hinter dem Projekt Pixelstarter. Dort widmet er sich, wie die Beiträge und Tutorials belegen, mit großer Hingabe dem Thema digitalter Bildbearbeitung. Daher verwundert es auch nicht, wenn es auf Pixelstarter.de eine für Einsteiger sehr interessante Zusammenfassung der hier vorgestellten und zahlreicher andere Bildformate zu finden sind. Sehr zu empfehlen für Einsteiger ist im übrigen auch die Pixelstarter Starter Edition von Joachim - ein kostenloses Videotraining das Grundlagen in Photoshop in rund 25 Tutorials vermittelt.

Werde auch du Gastautor im Webstandardblog!

Um Themengebiete wie diese, für die sich die Leser interessieren anbieten zu können, möchten wir über diesem Wege weiterhin anderen Bloggern die Möglichkeit geben, ihr Fachwissen mit unseren Lesern teilen zu können. Voraussetzung ist lediglich, dass sich diese Artikel in den vorhanden Kategorien unseres Blogs untergebracht werden können und der jeweilige Autor über entsprechendes Fachwissen verfügt.

Ähnliche Artikel zu diesem Thema:

• Bilder im Blog-Layout optimieren - Abstand und Rhythmus
• Alpha-transparente PNG-Grafiken auch für den IE kleiner Version 7!