Grafikformate für das Internet

[Mark]

Ein kleiner Überblick über die drei wichtigsten Internet Formate (für Interessierte):

Die Lehre der Grafikformate

Grafiken optimieren heißt hauptsächlich einen Kompromiss zwischen Qualität und Dateigröße zu finden. Um zu wissen, welches Dateiformat für welchen Einsatzzweck benutzt werden kann, werden zunächst die im Internet gebrauchten Grafikformate vorgestellt.

Unterscheidung der relevanten Grafikformate

Für den Gebrauch im Internet gibt es im Moment drei verschiedene Dateitypen, die alle verschiedene Vor- und Nachteile haben:

GIF - Format (Computer Graphics Interchange Format)

JPG - (oder JPEG) Format (Joint Photographic Expert Group)

PNG-Format (Portable Network Graphics)

Alle Grafik-Formate sind komprimiert, jedoch nach völlig verschiedenen Prinzipien, so dass man sie auch für völlig verschiede Einsatzmöglichkeiten nutzen sollte:

Das GIF-Format

Grafiken im GIF - Format können höchstens 256 Farben (aber auch weniger) darstellen. Da eine Grafik immer kleiner wird, je weniger Farben sie hat, ist das natürlich der große Vorteil des GIF Formats. Der Nachteil ist, das mit weniger Farben nicht mehr alle Nuancen z.B. eines Fotos dargestellt werden können. Da weiterhin ein im GIF-Format abgespeicherten Foto sehr schnell recht groß wird und somit die Ladezeit einer Seite (unnötig!) erhöht wird, sollte man niemals Fotos im GIF-Format abspeichern. Ein entscheidendes Merkmal des GIF-Formates ist, das es Bilder mit in waagerechter Richtung wiederkehren- den Mustern besonders gut komprimieren kann. Obwohl alle Grafiken die gleichen Maße haben, steigt die Dateigröße mit der Unregelmäßigkeit der Muster an. Es wird deutlich, daß waagerechte Muster besser komprimiert werden können als senkrechte.

Animierte GIFs

Ein weiteres Merkmal des GIF-Formates ist, dass es mit diesem Format möglich ist, mehrere Bilder hintereinander in einer Grafik abzuspeichern und diese dann nacheinander "abzuspielen", so dass der Eindruck einer Bewegung entsteht. Animierte GIF-Grafiken sind natürlich dadurch, dass sie ja eigentlich mehrere Bilder enthalten größer als vergleichbare statische Grafiken.

Transparenz

Beim Speichern von GIF - Bildern ist es möglich, eine Farbe als transparent zu definieren, so dass man z.B. Logos ohne störenden Hintergrund in eine Website mit Hintergrundbild einbinden kann. Transparenz wirkt sich nicht auf die Dateigröße aus. Auch animierte GIFs können eine transparente Farbe haben.

Speicherverfahren

Grundsätzlich haben Sie die Möglichkeit bei der Speicherung zwischen non-interlaced / interlaced zu wählen. Der Unterschied zwischen den beiden Verfahren liegt in der Art des Bildaufbaus. Während bei non-interlaced die Grafik Zeile für Zeile von oben nach unten aufgebaut wird, baut interlaced z.B. zunächst die Bildzeilen 1, 5, 10, 15,..., dann 2, 6, 11, 16,... usw. auf. So kann der Besucher früh zumindest schemenhaft erkennen, wie die Grafik aussehen wird. Dadurch wird der Eindruck einer kürzeren Warte-/ Ladezeit vermittelt.

Das JPG-Format

Grafiken im JPG - Format können 16 Mio. Farben darstellen (true-color). Die Komprimierung, die das JPG-Verfahren einsetzt, besteht darin, feine Nuancen, die dem menschlichen Auge verborgen bleiben würden zu löschen. Trotzdem sind so natürlich feinere Übergänge und Nuancen möglich, als mit den 256 Farben des GIF - Formates. Trotz der feineren Darstellung der Farbnuancen ist die Dateigröße bei solchen Grafiken erheblich geringer als z.B. im GIF-Format. Insofern empfiehlt sich dieses Format insbesondere für die Abspeicherung von Fotos.

Kompressionsraten

Beim Speichern von JPG - Bildern kann man meist zwischen verschiedenen Kompressionsraten und damit zwischen verschiedenen Bildqualtitäten wählen. Welche Kompressionsrate die Richtige für eine bestimmte Grafik ist, kann man pauschal nicht sagen. Durch ausprobieren muss man hier den optimalen Kompromiss zwischen Bildqualität und Dateigröße (und damit Ladezeit) finden

Achtung:

Wenn man ein Bild erst einmal in einer schlechteren Qualität gespeichert hat, ist es nicht mehr möglich, hinterher wieder auf eine bessere Qualität zurück zukommen. Deswegen sollte man vor dem speichern immer eine Sicherheitskopie in einem verlustfreien Format (z.B. bmp) haben.

Wenn man ein Bild komprimiert abgespeichert hat, muß man es schließen und dann wieder öffnen, da das Grafikprogramm das Bild noch in der "guten" (also unkomprimierten) Version im Speicher hält.

Speicherverfahren

Auch hier haben Sie die Möglichkeit bei der Speicherung zwischen standard/progressiver Codierung zu wählen. Der Unterschied zwischen den beiden Verfahren liegt, wie bei dem GIF-Format, in der Art des Bildaufbaus. Während die Standard-Kodierung die Grafik Zeile für Zeile von oben nach unten aufgebaut wird, baut idie progressive Kodierung z.B. zunächst die Bildzeilen 1, 5, 10, 15,..., dann 2, 6, 11, 16,... usw. auf. So kann der Besucher früh zumindest schemenhaft erkennen, wie die Grafik aussehen wird. Dadurch wird der Eindruck einer kürzeren Warte-/ Ladezeit vermittelt.

Das PNG-Format

Das PNG-Fomat (Portable Network Graphics) gehört zu den sogenannten Raster-Formaten mit einer max. Farbtiefe von 32 Bit. Das Format ist seit der 4. Browsergeneration u.a. im Internet verwendbar. PNG (sprich: ping) ist ein speziell für den Gebrauch im WWW optimiertes neues Grafikformat, das entwickelt wurde, um das GIF -Format zu ersetzen, da der von GIF verwendete LZW -Kompressionsalgorithmus gesetzlich geschützt ist (was bedeutet, dass bei kommerzieller Nutzung dieses Algorithmus Copyright-Gebühren bezahlt werden müssen).

Da die Eigenschaften von PNG weit über die von GIF hinausgehen, dürfte PNG in absehbarer Zeit nicht nur das GIF-, sondern - zumindest teilweise - auch das JPEG -Format ersetzen, das a) verlustbehaftet komprimiert und lediglich Grafiken bis zu einer Farbtiefe von 24 bit ( = 16,7 Millionen Farben) unterstützt, während PNG auf 32 bit bei Farbbildern sowie 16 bit bei Grauskalen kommt.

Kompression

Durch die Möglichkeit der Filterung bei der Kompression der Bilddaten wird die Kompressionsrate gegenüber ungefilterten Bildern um das bis zu 300-fache erhöht, und das bei verlustfreier Komprimierung. Damit ist dieses Format für eine Netzwerkumgebung, wie sie ja auch das WWW darstellt, praktisch ideal.

PNG komprimiert Grafiken mit Farbpalette (max. 256 Farben) im allgemeinen effektiver als GIF. (Bsp.: Eine Grafik der Größe 241 x 237 Pixel mit insgesamt 199 Farben, die im ursprünglichen BMP-Format eine Größe von 57.828 Byte besitzt, wird bei Reduzieren der Palette von 256 auf 199 Farben in GIF mit 10.789 und in PNG schließlich mit ganzen * 6.943 Byte abgespeichert.

Transparenz

PNG unterstützt 8-bit- Transparenz / Alpha-Kanäle und zwar kann

a.bei indizierten Farben (bis 8 bit Farbtiefe = max. 256 Farben) für jeden Paletten-Eintrag ein separater Alpha-Wert festgelegt werden (was bei GIF 89a nicht möglich ist; hier kann nur ein einziger Eintrag als (voll) transparent definiert werden).

b.bei Grauskalen und hochauflösenden Farbbildern jedem Pixel ein separater, 16-bit großer Alpha-Kanal zugeordnet werden, wobei der Farbwert des Pixels dadurch nicht beeinträchtigt wird (sog. "non-premultiplied alpha")

Animation

Das PNG-Format ist selbst nicht in der Lage Animationen darzustellen. Um dennoch Animationen erstellen zu können, bedient es sich dem eng verwandten MNG-Format (Multi-image-Network-Graphics). Die beiden Formate sind so eng verwandt, dass in der praktischen Anwendung im Prinzip kein Unterschied besteht. So wäre es nicht falsch zu behaupten: "MNG = PNG", mit dem einzigen Unterschied, dass die Dateiendung eine andere ist!