Ergänzende Materialien zu den VHS Seminaren

Grafik-Dateiformate im Web: GIF, JPEG und PNG im Vergleich

Wir vergleichen GIF, JPEG und PNG und erläutern die Vorteile und Nachteile der einzelnen Formate. Eins haben alle genanten Formate gemeinsam: es handelt sich um Pixelgrafikformate.

GIF-Format = Graphics Interchange Format

GIF hat eine maximale Farbtiefe von 8 bit, das entspricht 256 Farben. Das Format zeichnet sich durch eine hohe und verlustfreie Kompression aus, wodurch die Größe der Dateien auf ein Minimum beschränkt wird. Durch seine geringe Farbtiefe eignet sich das GIF-Format zur Darstellung von Bildern mit großen, einfarbigen Flächen und sich wiederholenden Mustern wie Banner, Buttons, Logos und Symbolen.
Für hoch auflösende Grafiken wie Fotos oder Bilder mit Farbverläufen ist das GIF-Format aufgrund seiner Eigenschaften nicht geeignet.

Transparenz: Das GIF-Format bietet die Möglichkeit, einzelne Farben transparent zu stellen. Unter der Grafik liegende Inhalte z.B. der Hintergrund einer Website scheinen dann an den transparenten Stellen durch.

Interlaced: Eine, mit dieser Option gespeicherte Grafik wird beim Laden im Browser nicht zeilenweise sondern schichtweise aufgebaut. Sie sehen zuerst eine niedrig auflösende Version des Original-GIF-Bildes, die sich durch den weiteren Ladevorgang feiner auflöst (vom verschwommenen unscharfen Bild zum scharfen Bild). Das Bild wird bei langsamen Internet-Verbindungen schneller angezeigt.

Animation: Im GIF-Format können mehrere Grafiken in einer Datei zusammengefasst werden. Durch zeitliche Steuerung werden die einzelnen Grafiken nacheinander angezeigt, es ergeben sich Bewegungseffekte.

Indiziert: Wie schon beschrieben können im GIF-Format bis zu 256 Farben = 8-Bit-Farbmodus dargestellt werden. Durch die Indizierung wird nun bestimmt, welche Farben zu verwenden sind. Es wird eine Farbpalette angelegt, in der die Farben gespeichert werden. Die Farbpalette kann auch aus weniger als 256 Farben bestehen. Beinhaltet das Originalbild Farben, die nicht der gespeicherten indizierten Farbpalette entsprechen, werden die Farbe durch Mischen vorhandener Farben simuliert oder durch die nächstliegende Farbe ersetzt.

Indizierte Dateien sind in Photoshop oder GIMP nur eingeschränkt bearbeitbar. Grund dafür ist die per Index eingeschränkte Farbpalette, in der nicht mehr alle Farben zur Verfügung stehen. Zur Bearbeitung ist die Grafik wieder in 24-Bit-RGB zu konvertieren.
In Photoshop wählen Sie dazu Bild - Modus - RGB-Farbe.
In GIMP wählen Sie Bild - Modus - RGB.

JPEG - Joint Photographic Experts Group

Das JPEG-Format arbeitet mit dem gesamten RGB-Farbspektrum und speichert pro Bild bis zu 16,7 Millionen Farben.
Der im JPEG-Format verwendete Kompressionsalgorithmus kann eine gute Qualität bei geringer Datenmenge erzeugen. Die Kompression ist jedoch immer mit Verlusten verbunden auch wenn diese nicht sichtbar sind.
Ein Vorteil der Kompression im JPEG-Format besteht darin, dass die Komprimierungsstufe über eine Skala selbst zu wählen ist. Sie benötigen zur Einstellung der Komprimierungsstufe ein Grafikprogramm wie Photoshop, Photoshop-Elements, GIMP oder einen Image-Converter. Jedes Speichern im JPEG-Format führt zu Bilddetailverlusten. Speichern Sie Arbeitskopien besser in TIFF, PNG oder im PSD-Format.
Das JPEG-Format unterstützt keine Transparenz und kann nicht animiert werden.

Neben der Kompression können Sie im JPEG-Format auch die Punktdichte = dpi (Auflösung) bestimmen. Übliche Einheiten der Punktdichte sind dpi (dots per inch = Punkte pro Zoll) oder ppi (pixel per inch = Pixel pro Zoll). Ein Zoll sind 2,54 cm.
Verwenden Sie für JPEG-Dateien in Webseiten eine Punktdichte von 72 oder 96 ppi.
Für den Druck benötigen Sie eine Punktdichte ab 220 ppi.
weitere Informationen unter Bildgrößen und Bildauflösungen

Progressives JPEG: Bei dieser Variante wird die Grafik wie bei GIF-Interlaced zuerst in einer niedrig auflösende Version angezeigt, die sich durch den weiteren Ladevorgang dann feiner auflöst.


PNG - Portable Network Graphic

Das PNG-Format wurde speziell für den Einsatz im Web konzipiert und vereint die Vorteile von GIF und JPEG in einem Format. Alle modernen Browser und die meisten Grafikprogramme unterstützen das PNG-Format.
Animierte Grafiken sind im PNG-Format nicht möglich.

Das PNG-Format gibt es in den Versionen PNG-8 und PNG-24. Das PNG-8-Format verwendet eine Farbtiefe von 8-Bit, maximal 256 Farben und das PNG-24-Format verwendet eine Farbtiefe von 24-Bit Farbtiefe, bis zu 16,7 Mill. Farben. Somit ist PNG-8 mit GIF und PNG-24 mit dem JPEG-Format vergleichbar.

Transparenz: Das PNG-Format unterstütz in beiden Versionen Transparenz und ist somit für alle Arten von Grafiken einsetzbar. Neben den RGB-Farbwerten für Rot, Grün und Blau kann das PNG-Format in einem Alphakanal den Transparenzwert eines Pixel speichern. Damit erzeugen Sie wesentlich feinere Transparenz-Abstufungen als mit dem GIF-Format. Die Vorschau des Alphakanals wird z.B. in Photoshop als Graustufenbild angezeigt. Der Transparenzwert jedes Pixel wird einer Skala von Schwarz = vollständig transparent bis Weiß = vollständig deckend angezeigt.

Interlaced: Wie GIF-Interlaced und JPEG-Progressiv unterstützt auch das PNG-Format den schichtweisen Aufbau von Grafiken im Browser.

Kompression: PNG komprimiert verlustfrei. Dabei wird ein ähnlicher Kompressionsalgorithmus eingesetzt wie beim Komprimieren von Daten zu ZIP-Dateien. Der Nachteil dieses Verfahrens besteht darin, dass Grafiken weniger stark komprimiert werden als Textdateien und somit die Grafik als komprimiertes PNG mehr Speicherplatz benötigt als bei der Komprimierung im JPEG.