Yale C/AIM Web Style Guide

Überblick

Web-Grafik

Einführung

Farbbildschirme

Dateiformate für Grafiken

Interlaced GIF

Transparentes GIF

JPEG Grafiken

Zusammenfassung Formate

Illustrationen

Optimierung von Grafiken I

Optimierung von Grafiken II

Height & width Tags

Farbige Hintergründe

Imagemaps

Farbgrafiken sind eines der bestimmenden Merkmale des Online-Publishing. Elektronische Dokumente sind nicht so komplex und teuer wie Vierfarbdruck auf Papier. Dazu kommt, daß bei elektronischen Dokumenten die Notwendigkeit entfällt, durch die Vermeidung von Farbgehalt zu sparen. Es gibt aber auch bei Web-Seiten einige leistungsbezogene Nachteile, wenn Sie darauf bestehen, sie mit großen, farbintensiven Bildern vollzustopfen. Mit richtiger Planung können Sie jedoch die Grafiken Ihrer Web-Seiten optimieren. So lassen sie sich schneller laden, und die Farbwiedergabe auf den Bildschirmen Ihrer Leser ist genauer.

Farbe und GIF-Dateien
Das GIF-Format wurde entwickelt, um die Übertragung von Bilddaten über Netzwerke zu optimieren. Um die Größe der Dateien gering zu halten, beschränkten GIF-Designer die Zahl der Farben eines GIF-Bildes auf 256. Bilder, die sich auf 256 Farben beschränken, werden auch als 8-Bit-Bilder oder als Farbindexbilder bezeichnet . 8-Bit bezieht sich auf die Zahl der Speicherbits, die jedem Pixel des GIF-Bildes zugeteilt sind. Jedes digitale Bit kann nur eine 1 oder eine 0 sein. Das bedeutet, daß man, wenn jedem Pixel acht Bit Speicher zugeteilt sind, maximal 256 (2 hoch 8) einzelne mögliche Kombinationen von Nullen und Einsen erzeugen kann. Der Begriff Farbindex bezieht sich auf die 256-Farben-Indexpalette, aus der jedes Bild seine Farben bezieht. So enthält zum Beispiel das untenstehende GIF-Bild 256 Farben, die auf der Farbpalette gezeigt werden:

GIF photograph with its color palette.

Man könnte meinen, 256 Farben seien für die meisten Bilder mehr als genug. In Wirklichkeit können GIF-Dateien die unendliche Farbpalette der meisten Fotos nur beschränkt wiedergeben. Wenn man ein 24-Bit-Vollfarbbild, das Millionen von verschiedenen Farben enthält in ein 256-Farben-GIF verwandelt, verliert man einige Bilddetails. Mit Hilfe eines Prozesses namens Dithering stellen Bildbearbeitungsprogramme wie Photoshop verschiedenfarbige Pixel in einem feinen Punktmuster gegenüber. So wird der Anschein erweckt, als wären in dem Bild bei Betrachtung aus einem normalen Abstand Zwischenfarben vorhanden.

Effect of dithering on GIF graphics.

Maßgeschneiderte GIF-Paletten und die Farben der Systempalette
Wenn man ein Vollfarbbild in ein GIF-Bild umwandelt, läßt man das Grafikprogramm normalerweise jene 256 Farben wählen, die am besten zu dem jeweiligen Bild passen. Das führt zu einer optimalen Qualität des GIF-Bildes. Allerdings sind mit dieser Praxis auch einige Nachteile verbunden. Das Problem tritt zutage, wenn zwei oder mehr GIFs mit maßgeschneiderten Farben, die gemeinsam 512 verschiedene Farben ergeben können gleichzeitig auf einem Bildschirm repräsentiert werden sollen, der aber nur 256 Farben gleichzeitig anzeigen kann (ein 8-Bit-Bildschirm). Falls der Browser Ihrer Seite über einen Monitor verfügt, der nur 256 Farben gleichzeitig anzeigen kann, wie dies bei den meisten SVGA- und älteren Macintosh-Farbbildschirmen der Fall ist, sehen die Farben Ihrer GIF-Bilder verzerrt aus.
Die meisten Web-Viewer wie der Internet Explorer und der Netscape Navigator lösen die Probleme von zu vielen Bildfarben, indem sie die Systempalette des Betriebssystems von Macintosh oder Windows verwenden. Wenn der Browser auf einem 256-Farben-Bildschirm läuft, erzwingt er, daß die Palette der Grafikfarben der Web-Seite mit einer der Farben der Standard-Systempalette übereinstimmt:

Diagram shows the Macintosh and Windows system palettes.

Bedauerlicherweise sind die Systempaletten von Mac und Windows nicht identisch: nur 216 der Farben stimmen in beiden Systempaletten überein. Nachstehend sehen Sie die Palette mit den Farben, die Mac und Windows gemeinsam haben:

Netscape color palette.

Wenn man erzwingt, daß ein GIF, welches mit den Farben der maßgeschneiderten Palette (Abbildung a unten) erstellt wurde, innerhalb der beschränkten Systempalettenfarben angezeigt wird, bewirkt dies oft häßliche Bildverzerrungen. Ein Web-Browser, der auf einem 8-Bit-Bildschirm läuft, hat keine Möglichkeit, Ihre speziellen, maßgeschneiderten GIF-Farben zu optimieren. Anhand einer einfachen Logik erzwingt er es einfach, daß das Bild in den nächstähnlichen Farben der Systempalette angezeigt wird. Die Folge sind oft Farbbänder oder eine starke Abweichung von den Originalfarben (siehe b unten):

Distorted colors in a GIF image.
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.