Design

Farbdeklarationen in CSS: Websichere Farben

Zunächst einmal stellt sich die Frage: Was sind web-sichere Farben und woher kommen sie?

Nun, eigentlich handelt es sich dabei nur um eine von Netscape in den Anfangstagen des World Wide Web definierte Untergruppe der bereits erwähnten 4096 Farben der verkürzten Hexadezimal-Schreibweise. Diese Untergruppe umfasst gerade einmal noch 216 (6 x 6 x 6) Farbtöne und sollte ursprünglich die Kompatibilität der Ausgabe auch auf nur 256 Farben darstellenden Computer-Systemen gewährleisten.

Vor diesem Hintergrund lässt sich die Behauptung der Relevanz dieser Farbpalette inzwischen wohl kaum mehr aufrecht erhalten, zumal Netscape hier auch nicht eine Auswahl besonders geeigneter oder harmonisch wirkender Farbtöne ausgewählt hatte, sondern ein rein technische Auswahlverfahren einsetzte: Von den möglichen sechzehn Farbwerten pro R-, G- oder B-Kanal wurden einfach in gleichmäßigem Abstand sechs ausgewählt, nämlich die Werte 0, 3, 6, 9, 12 (bzw. hexadezimal “c”) und 15 (bzw. hexadezimal “f”). Alle daraus zu bildenden Farbwerte gehören damit zu den web-sicheren Farben. Neben dem gleichmäßigen Abstand ist auch hier besonders wichtig, dass 0 und 15 (oder eben “f”) in dem Schema enthalten sind, damit zumindest Schwarz (#000) und Weiß (#fff) sowie die gängigen reinen Grundfarben enthalten sind.
Die web-sicheren Farben bringen uns also nicht wirklich weiter auf der Suche nach der optimalen Farbdarstellung.

Natürlich können die aufgeführten Notationen innerhalb eines Dokumentes oder innerhalb einer separaten CSS-Datei beliebig kombiniert werden, auch wenn dies insbesondere in Hinblick auf die angesprochene dezimal/hexadezimal-Problematik nicht ratsam ist. Nur innerhalb einer Zuweisung ist eine Kombination à la “#34,45%,f” zu vermeiden, da sie nicht regelkonform ist und daher in der Regel auch nicht funktionieren wird.

paletten-basiert

Je geringer die Farbtiefe eines Bildes, desto größer ist die Wahrscheinlichkeit, für dessen Darstellung nicht auf die Standard-Farbpalette, die das Betriebssystem oder der Browser hierfür vorgesehen hat, zurückgreifen zu wollen. So bietet etwa die 4-Bit/16-Farben-Standardpalette unter Windows neben Schwarz und Weiß gerade einmal zwei Grautöne.
Für ein kleines aus Grautönen bestehendes Bild wäre aber eine Palette von sechzehn Grautönen sinnvoller. Innerhalb eines Grafik- oder Bildbearbeitungsprogramms ist eine solche Palette dann auch schnell definiert.
Wie jedoch greife ich innerhalb von CSS auf eine solche Palette zu? Ganz einfach: Gar nicht. Es besteht schlicht keine Möglichkeit dazu — wenn man einmal serverseitiges Auslesen mitteils einer geeigneten Programmiersprache außen vor lässt, was ich hiermit tue.
Und dennoch haben Paletten ihre Existenzberechtigung, da sie eine ähnliche oder häufig gleiche Bildqualität bei deutlich reduzierter Dateigröße ermöglichen.
Problematisch werden Paletten aber dann, wenn das Ausgangsbild zu viele insbesondere stark unterschiedliche Farben enthält — und dies ja nicht eben selten der Fall. “Adaptive Farbquantisierung” lautet das Stichwort, und “Octree” häufig die Lösung. Wem einschlägige Erläuterungen zu diesem Thema (z. B. codeguru) zu kompliziert oder schlicht zu technisch orientiert sind, merke sich einfach folgendes: Der Farbumfang von Bildern mit (farb-)kontrastreichen Details sollte mittels des Octree-Verfahrens heruntergerechnet werden.
Zaubern kann aber auch dieses Verfahren nicht, und so müssen natürlich noch immer einige ähnliche Farben zu jeweils einer zusammengefasst werden. So erklären sich dann etwa sichtbare Abstufungen in Farbverläufen oder Kanten beim Übergang zu farbigen Flächen oder anderen Bildern. Letztere lassen sich aber zumindest teilweise verhindern, wenn die eingesetzte Software die teilweise Übernahme vorhandener Paletten gestattet. Denn wenn die gleichen Paletteneinträge Verwendung finden, stimmen die Anschlüsse natürlich wieder.

Ein kleiner Exkurs: Dateiformate

Was helfen kann, Schwierigkeiten mit einem reduzierten Farbumfang zu vermeiden, ist auch das richtige Datei-Format. Denn von den allgemein als web-tauglich anerkannten Formaten ist ausschließlich GIF auf weniger Farben begrent als unser Auge zu unterscheiden vermag. 256, oder eben acht Bit, ist hier die magische Grenze, womit die Auslegung auf Bilder mit hohem Abstraktionsgrad, etwa Schriftzüge oder grafische Indizes und Symbole unterstrichen wird. Dafür kann man eine beliebige dieser Farben als transparent definieren und mehrere Bilder zu einer Animation zusammenfassen.

Letzteres ist mit dem ebenfalls eher für plakative Grafiken entwickelten PNG nicht möglich. Ansonsten bietet es in der Version “PNG-8″(bit) die gleichen Vorzüge wie GIF, verzichtet aber in der Version “PNG-24″(bit) auf die Einschränkung in der Farbtiefe sowie leider auch auf die Tranzparenz-Funktion. Der in dieser Version dafür vorhandene Alpha-Kanal für die Halbtransparenz — sehr interessant für weiche Kanten, weiche Schatten oder Milchglas-Effekte — ist allerdings dem MS Internet Explorer nur umständlich beizubringen, was dem Format zu Unrecht den Ruf eingebracht hat, mangelhalft unterstützt zu werden.

Denn alles andere funktioniert mit den gängigen Browsern problemlos, auch wenn mehrere einander überschneidende Halbtranzparenzen mitunter den Fensterinhalt bei Betätigung der Bildlaufleisten mitunter ein wenig ausbremsen können — aber ich schweife ab.

JPEG komprimiert die Bildinformationen nicht nur, sondern reduziert als einziges der verbreiteten Dateiformate durch Neuberechnung. Damit ist eine Reduzierung der Farbtiefe obsolet, zumal dieses Format als einziges der drei genannten für die Reproduktion von Fotos gedacht ist, die ja bekanntlich am meisten unter dem Verlust des Farbumfangs leiden. Für einfache Schriftzüge oder Logos ist das Format hingegen kaum geeignet, da die gleichbleibend hohe Farbtiefe hier zu größeren Dateien führte oder aber durch die Möglichkeit, das Verhältnis von platzsparender Reduktion zu Qualität zu justieren, zu grafischen Artefakten an scharfen Farbkanten und bei feinen Verläufen.

Aber weil Farben schon vor dem Web ein schwieriges Thema waren — hieß NTSC nicht „Never the same color“? —, und das Print-Gewerbe sich ebenfalls noch immer damit herumplagt, gibt es zum Abschluss eine halb resignierten, halb aufmunternden Tipp: Testet eure Seiten auch auf schlechten Bildschirmen. So erkennt ihr wenigstens, welcher Aufwand sich wirklich lohnt und welche Nuancen eher der Befriedigung des eigenen Ehrgeizes dienen als dem ungetrübten Durchblick der Betrachter.


RSS-Feed für Kommentare zu diesem Artikel. TrackBack-URL

Einen Kommentar hinterlassen?

   
Werbung

Pixum bietet eine kostenlose Foto Buch Software zur Erstellung eines eigenen Fotobuches an.

Pressearbeit im Internet und Suchmaschinenoptimierung (SEO)

banner161x161.jpg
Suchmaschinenoptimierung
: DiWe Media GmbH aus Bad Neuenahr.

Erholung: Wandern und Skifahren in Südtirol

Die beste Entspannung für den langersehnten Urlaub in Südtirol: Wandern in Südtirol

bg-turm.gif

Der Reschensee mit der versunkenen Kirche ist das Wahrzeichen der Region in Tirol.

Vacanze in montagna al lago Resia

Immobilien kostenlos inserieren

Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering Ulrike Häßler 50226 Frechen-Königsdorf • Impressum und Nutzungsbestimmungen