Grafikformate für das Web

An dieser Stelle möchte ich die wichtigsten Dateiformate für Grafiken im Web und deren Eigenheiten besprechen. Zur Auswahl stehen vier webfähige Formate:

JPEG: Dateiendung xxx.jpg oder xxx.jpeg. Dieses Format stellt 16 Mio Farben mit einer Bittiefe von 24 dar und wird daher vor allem für Bilder oder Fotos mit vielen Farben und Einzelheiten verwendet. Das besondere an Jpeg ist die Möglichkeit zur Kompression des Bildes um die Dateigrösse zu verringern. Technisch werden dabei je nach Kompressionsfaktor mehr oder weniger Pixel aus dem Bild gelöscht und beim Laden durch einen Algorithmus wieder berechnet.

GIF: Dateiendung xxx.gif. Gifbilder sind durch die Bittiefe 8 auf 256 Farben beschränkt, eignen sich daher mehr für Grafiken oder Graustufenbilder. Dieses Format basiert auf einer fixen Palette von Farben, welche aus den Farben des Originales extrahiert wird. Hier gilt es beim Speichern, immer abzuwägen, wie groß denn die Palette sein wird, denn sonst werden zuviele Schattierungsfarben einer Palettenfarbe zugeordnet und das Bild wird "fleckig". Die geringe Dateigrösse wird aber hauptsächlich durch die Flächenberechnung erreicht. Das heisst, es werden nicht einzelne Pixel indiziert, sondern zusammengehörige Flächen durch Koordinaten bestimmt. Die Besonderheit, die Gif so beliebt gemacht hat, ist die Transparenz. Eine Farbe kann als "transparent" bestimmt werden, sie taucht dann im konvertierten Bild nicht mehr auf und lässt den Hintergrund (meistens einer Webseite) durchscheinen. Gif-Bilder können im "Interlace-Format" erstellt werden, das heisst, beim Laden werden sie zeilenmässig aufgebaut. Der Vorteil dabei (vor allem bei langsamen Internetverbindungen) ist der, daß man selbst bei einem halb geladenen Bild bereits erkennen kann, worum es sich handelt. Ausserdem können mehrere Gif-Bilder zu einer Animation zusammengefasst werden.

PNG-8: Dateiendung xxx.png. Ausser der Animation ist dieses Format dem Gif gleich. Die interne Berechnung erfolgt zwar etwas anders und die Dateigrösse ist auch etwas grösser, aber der Effekt ist ident.

PNG-24: Dateiendung xxx.png. Dies ist das mächtigste Format im Web. Es verbindet die 24-Bit Farbtiefe von Jpeg mit den Transparenz- und Interlace-Eigenschaften von Gif. Allerdings ist auch die Grösse der Datei entsprechend. Daher bleibt abzuwarten, ob sich die beiden Png-Formate auf Dauer durchsetzen.

Fehler, die beim Konvertieren immer wieder passieren:
Am Beispiel eines Buttons, wie er in drei Minuten hergestellt ist, möchte ich hier die beliebtesten Fehler aufzeigen.

Dies ist das Original ohne Fehler. Eine Jpeg-Datei mit 25% Komprimierungsfaktor.

Hier der gleiche Button, allerdings mit einem Faktor von 80% Komprimierung. Dadurch müssen zuviele Pixel neu berechnet werden und es entstehen Wolken.

Als Gif erstellt. Hier wurde die Palette zu klein gewählt. Die Schattierung erscheint abgestuft, da nicht genug Farben zum Verlauf zur Verfügung stehen.

Bei diesem Button wurde auf das Antialiasing (berechnen weicher Kanten) vergessen. Es stellt sich der berühmte "Treppeneffekt" ein, Schräge und Rundungen sind eckig interpoliert.

Hier wurde versucht, ein transparentes Gif zu erstellen, dessen Transparenzfarbe schwarz ist. Auf das richtige Erzeugen transparenter Grafiken komme ich in einem gesonderten Beitrag zu sprechen.

Nochmal zum Thema Aliasing. Raten Sie mal, bei welchem der Schriftzüge auf das Antialiasing verzichtet wurde.