Dithering — Farbrasterung

Farbrasterung, oder Dithering, ist eine Methode um bei indizierten Bildern mit einer Farbpalette von maximal 8bit entsprechend 256 Farben eine größere Farbtiefe vorzutäuschen. Darüber hinaus wird durch diese Technik auch erreicht, dass Farbübergänge, welche beispielsweise bei der Farbquantisierung durch Kompressionsalgorithmen sehr hart und stufig ausfallen können, fließender und weicher erscheinen.

Indizierte Bilder haben eine Farbpalette von zwei oder mehr Farben. Um nun die Illusion einer Farbe außerhalb dieses Palettenbereiches zu erreichen, wird die Größe und die Form eines Pixelmusters variiert. Die Qualität des resultierenden Bildes hängt hierbei sehr stark vom Betrachtungsmedium ab. Monitore, welche eine geringe Auflösung haben, lassen gewöhnlich immer noch das zugrundeliegende Muster oder gar einzelne Pixel erkennen. Hochauflösende Medien wie Druck hingegen, zeigen in der Regel keine Muster mehr sondern eine Mischfarbe. Dies ist tatsächlich auch die Weise, auf die beispielsweise im Vierfarbdruck gearbeitet wird, wo die Palette auf die Farben Cyan, Magenta, Gelb und Schwarz (CMYK) beschränkt ist.

Die folgende Illustration zeigt, wie unterschiedliche Formen und Größen eines Pixelmusters die Qualität einer resultierenden Farbe beeinflussen und verbessern können. Durch einfache Farbrasterung der sechszehn VGA-Farben können auf diese Weise 136 neue Zwischenfarben gebildet werden. Ein Bug in älteren Versionen des Opera- Browser führte tatsächlich dazu, dass die gerasterten Farben zu einer einzelnen entsprechenden Zwischenfarbe gemischt wurden.

Farbrasterung von Violett und Gelb

16 x 16 Pixel	8 x 8 Pixel	4 x 4 Pixel	2 x 2 Pixel
1 x 1 Pixel	lineares plus (+) Muster	versetztes plus (+) Muster	gefüllte Quadrate
reine Zwischenfarbe

Zur Ermittlung der Farbwerte für eine Rasterung kommen zwei unterschiedliche Techniken zur Anwendung. Die erste, geordnete Rasterung, spaltet den Farbwert eines einzelnen Pixels in seine drei RGB-Kanäle auf und ermittelt den neuen Wert jedes einzelnen Kanals anhand einer vorgegebenen Matrix. Diese Matrix besteht aus zwei oder mehr Grenzwerten und einem oder mehr Schwellwerten, beispielsweise 0 und 255 als Grenzwerte und 127 als Schwellwert. Bei einem Initialwert zwischen 0 und 127 erhält der Kanal den Wert 0, bei einem Initialwert zwischen 128 und 255 den Wert 255. Die resultierenden RGB-Farbwerte bilden eine Palette von maximal 256 Farben. Die zweite Methode, Error Diffusion (Fehlerverteilung), bezieht bei der Ermittlung der Farbwerte nicht nur einen einzelnen Pixel in die Berechnung ein, sondern auch die ihn umgebenden Pixel. Die wohl bekannteste Technik hierbei ist der Floyd-Steinberg Algorithmus.

Floyd-Steinberg Algorithmus - Error Diffusion

Der Floyd-Steinberg Algorithmus verteilt die Fehlerdifferenz zwischen dem ursprünglichen Farbwert eines Pixels und dem berechneten Wert auf umgebende Pixel. Hierbei wird dieser Fehler nicht gleichmäßig, sondern nach einem definierten Schema entsprechend einer bestimmten Gewichtung, verteilt.

Bei der Floyd-Steinberg Fehlerverteilung werden 7/16 des Fehlers auf den benachbarten rechten Pixel, 1/16 auf den diagonal unten rechts liegenden Pixel, 5/16 auf den unteren Pixel und 3/16 auf den diagonal unten links liegenden Pixel verteilt.

Wenn die Pixel eines Bildes bei der Berechnung Zeile für Zeile von links nach rechts durchlaufen werden, kann dies zu einer gewissen Ausrichtung oder zu unerwünschten Mustern im resultierenden Bild führen. Um dies zu vermeiden, kann eine erweiterte Methode angewandt werden, mit welcher die Leserichtung jede Zeile wechselt.

normale Methode
Die Leserichtung wechselt nicht und kann zu unerwünschten Mustern führen.

Erweiterte Methode
Die Leserichtung wechselt zeilenweise von links nach rechts nach links und führt zu einer verbesserten Bildqualität

Bei der Anwendung von Farbrasterung kann auch jede beliebige andere Palette anstelle der automatisch erzeugten benutzt werden, obwohl diese in der Regel eine auf das Bild abgestimmte optimale Palette ist. In der Vergangenheit war der Anteil an VGA-Monitoren, welche nur 16 bis 256 Farben darstellen konnten, wesentlich höher. Aus diesem Grunde schien die Verwendung einer websicheren Palette anstelle einer optimierten Palette vorteilhafter. Mittlerweile ist der Anteil dieser Monitore jedoch sehr gering geworden, so dass man sich in der Regel nicht mehr unbedingt auf die websicheren Farben beschränken muss.

Vordefinierte Farbpaletten haben eine feste Anzahl an Farbwerten. Oftmals werden nicht sämtliche dieser Farben für die Darstellung des Bildes genutzt. Um die Dateigröße eines Bildes zu reduzieren, sollten diese unbenutzten Farben aus der Palette gelöscht werden.

Vergleich von Farbpaletten und Dateigröße

Vollständige Farbpalette	Reduzierte Farbpalette
Farbanzahl: 104 von 216 Dateigröße: 20,671 bytes	Farbanzahl: 104 von 104 Dateigröße: 20,317 bytes

Beide der obigen Grafiken benutzen die gleiche Farbpalette, tatsächlich sind sowohl Bilder wie Paletten bis auf die Anzahl der Farben in der Farbpalette identisch. Während die Palette des ersten Bildes sämtliche 216 websicheren Farben beinhaltet, begnügt sich die zweite Palette damit, exakt nur diejenigen Farben zu speichern, welche auch in dem Bild vorkommen. Hierdurch wird die Dateigröße um 354 bytes reduziert. Auf den ersten Blick scheint dies kein allzu großer Gewinn zu sein, wenn man jedoch beispielsweise annimmt, dass täglich 100 Anfragen nach diesem Bild erfolgen, summiert sich die Differenz auf 13MB. Und da davon auszugehen ist, dass man mehr als ein Bild auf seinen Webseiten hat, kann eine beträchtliche Verringerung des erzeugten Traffic gewonnen werden.

Zusammenfassend kann festgestellt werden, dass Farbrasterung durchaus die Qualität indizierter Bilder verbessert, dies allerdings auf Kosten der Dateigröße. Für beste Ergebnisse sollte hierbei eine optimierte und reduzierte Farbpalette angewandt werden. Einen Vergleich der auf ein Bild angewandten unterschiedliche Rastertechniken und Farbpaletten zeigen die folgenden beiden Seiten:

• Farbrasterung bei 8bit Grafiken
• Farbrasterung bei 4bit Grafiken