Bilder fürs Web

Die unsägliche Web-Palette

Sie werden vermutlich schon einmal über die sogenannte Web-Palette gestolpert sein. Das ist eine standardisierte Palette, die von nahezu allen Browsern verwendet wird, wenn die Grafikkarte (oder deren Einstellung) nicht mehr als 256 Farben auf dem Bildschirm zulässt (8-Bit-Displays). Sie besteht aus 216 Farben, die den RGB-Farbraum gleichmäßig unterteilen: Die Rot-, Grün- und Blauwerte nehmen von den je 256 möglichen Schattierungen nur die Werte 0, 51, 102, 153, 204 und 255 (hexadezimal 00, 33, 66, 99, cc, ff) an, was nach Adam Riese 6*6*6 = 216 Farben ergibt. Die restlichen Farben werden je nach System (Linux, Windows, Mac) unterschiedlich genutzt.

Dieser Ansatz hat leider das Problem, dass er die Wahrnehmung durch das Auge ignoriert. Das Auge ist bei helleren Farben wesentlich empfindlicher. Durch die gleichmäßige Aufteilung des Farbraums gibt es also bei dieser Aufteilung einige dunkle Farbtöne, die quasi nicht voneinander zu unterscheiden sind, während man sich in den hellen Farbtönen doch manchmal eine feinere Unterteilung wünscht (Abbildung 8).

Abbildung 8: Die Web-Palette

Nun ja, die Web-Palette ist Quasistandard, und es ist relativ müßig, sich jetzt noch über diesen Design-Fehler aufzuregen. Worüber man sich viel besser aufregen kann: Die Webpalette wird häufig schlicht falsch eingesetzt. Immer wieder stolpert man über Bilder oder kleine Fotos, die in die Web-Palette konvertiert worden sind, obwohl niemand etwas davon hat: Der Web-Designer hat mehr Arbeit, die Leute mit den oben angesprochenen 8-Bit-Displays gewinnen nichts, da ihr Browser das Bild sowieso in diese Palette konvertiert hätte. Alle anderen - und das ist inzwischen die überwiegende Mehrheit - ärgern sich, dass das Bild die Möglichkeiten der Grafikkarte nicht ausnutzt. Zudem ist vermutlich meistens eine JPEG-Variante des Bildes platzsparender…

Also: Wenn sie ein Bild indizieren müssen (weil es etwa transparente Bereiche haben soll) ignorieren Sie bitte die Web-Palette. Lassen sie Gimp die optimale Palette für das Bild finden und vertrauen Sie darauf, dass der Browser das Bild auf 8-Bit-Displays akzeptabel darstellen wird.

Es gibt nur einen einzigen legitimen Nutzen für die Web-Palette: Wenn sie die Grundfarben für das Design ihrer Web-Seite festlegen, sollten Sie Farben aus dieser Palette auswählen. Dies stellt sicher, dass großflächige Bereiche in diesen Farben auch auf 8-Bit-Displays nicht gerastert werden. Zudem können Sie sich darauf verlassen, dass sie an dem Übergang zwischen einem Bild und der Hintergrundfarbe einer Tabellenzelle (oder der Seite) keine Überraschungen erleben.

PNG

Wenden wir uns nun einem tapferen Streiter zu, der seit Jahren unermüdlich gegen die widrigen Umstände im Browser-Markt ankämpft, sich für die Erweiterung des Transparenzhorizonts einsetzt und - last but not least - unbelastet von Patenten für die Freiheit steht. Die Rede ist von PNG (Portable Network Graphics).

Die Entwicklung von PNG wurde durch die LZW-Probleme des GIF-Formats angestoßen. Leider hat es bis heute noch nicht so recht geklappt, GIF als Standard abzulösen - es gibt immer noch zu viele Browser, die das PNG-Format sehr stiefmütterlich behandeln.

PNG ist ein verlustfreies Format. Im Gegensatz zu JPG kann man sich sicher sein, dass das abgespeicherte Bild alle Bildinformationen enthält - die Dateien sind dann allerdings auch deutlich größer. PNG kann aber auch indizierte Dateien abspeichern. Vergleicht man es auf dieser Ebene mit GIF, sind die Kompressionsraten deutlich besser. Das Design-Element von eben braucht mit 11 Farben im GIF-Format 827 Bytes, als PNG-Datei nur noch 415 Bytes.

Alle "großen" Browser können heutzutage PNG-Dateien anzeigen - wenn es wirklich reine PNG-Dateien ohne jeden Schnick-Schnack sind. Leider scheinen sich aber nahezu alle Browser (positive Ausnahme: Mozilla, siehe Abbildung 9) darin einig zu sein, dass kein Mensch Transparenz braucht. Dabei würde eine vernünftige Unterstützung der PNG-Transparenz so viele Probleme lösen. Das PNG-Format (und Gimp) unterstützen nämlich einen echten Alpha-Kanal, also nicht nur die halbseidene Lösung von GIF, sondern echte verschiedene Transparenzgrade. Damit wäre es für Web-Designer kein Problem, saubere Kantenglättung vor beliebigen Hintergründen zu erzeugen. Nur die Browser spielen hier nicht mit. Netscape 4.7 ignoriert beispielsweise sämtliche Transparenzinformationen…

Abbildung 9: Mozilla: Ein- und dasselbe PNG-Bild vor verschiedenen Hintergründen

Leider sind diese Browser noch zuhauf unterwegs, und man kann sie nicht ignorieren. Wie auch in den letzten Jahren bleibt einem nichts anderes übrig, als zu hoffen, dass irgendwann…

Auch in Punkto Animationen kann PNG nicht mit GIF mithalten. Im Design von PNG wurde auf Animationen explizit verzichtet. Es gibt ein Schwesterformat namens MNG (Multiple Network Graphics), das bewegte Bilder unterstützt. Mit der Unterstützung durch Web-Browser sieht es hier aber noch schlechter aus als bei PNG.

PNG kann man inzwischen fast bedenkenlos für rechteckige Grafiken ohne Transparenz einsetzen. Je nach Bildmotiv sollte man allerdings JPG als platzsparende Alternative erwägen. Bei Bildern im indizierten Modus kann man mit PNG meist gegenüber GIF noch einige Bytes herausholen - und das ohne Lizenzprobleme.