Ü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		Wenn man Illustrationen für eine Web-Seite erstellt, besteht die größte Herausforderung in der relativ niedrigen Auflösung der Computerbildschirme. Sie können heute jedoch schon Tausende oder sogar Millionen Farben anzeigen. Man kann diesen Farbreichtum durchaus so einsetzen, daß Beschränkungen durch die geringe Auflösung weniger ins Gewicht fallen. Sehr komplexe Grafiken oder Farbfotos sehen auf Web-Seiten oft überraschend gut aus. Dafür gibt es zwei Hauptgründe: True Color (24-Bit-) oder High Color- (16-Bit-)Bildschirme zeigen so viele Farben an, daß Fotos oder komplexe Kunstwerke genau reproduziert werden können. Das von den Bildschirmen übertragene Licht ist in seiner dynamischen Palette und Farbintensität reichhaltiger als Licht, das von gedruckten Seiten reflektiert wird. Benutzer aus den Bereichen Wissenschaft und Bildung beginnen langsam auf die Tatsache aufmerksam zu werden, daß digitales Publishing von Natur aus Farb-Publishing ist. Warum? Das Verteilen von Farbbildern über das Web ist wesentlich kostengünstiger als Farbdruck sowie einheitlicher und zuverlässiger. Die Ausnahme ist ein besonders ausgefeilter Farbdruck, der dann aber auch entsprechend kostspielig wird. Das Web eignet sich genauso ausgezeichnet für die Übertragung komplexer Reprovorlagen an Studenten: Die Verarbeitung komplexer Illustrationen oder Fotos Die oben abgebildete anatomische Grafik wurde ursprünglich mit einer viel höheren Auflösung in Adobe Photoshop hergestellt (1000 x 2000 Pixel, 24-Bit RGB-Datei). Wir verkleinerten ein Exemplar auf die oben gezeigte Größe. Dabei verwendeten wir den Unsharp Mask-Filter von Photoshop (bei 60%), um die Schärfe der Grafik wiederherzustellen. Obwohl diese kleine Version der Zeichnung etwas an Auflösung und Farbdetail eingebüßt hat, sind auf ihr immer noch alle wichtigen anatomischen Merkmale erkennbar. Wir glauben, daß sie in der Qualität einer äquivalenten Grafik eines Lehrbuchs in nichts nachsteht. Wir entschieden uns bei der anatomischen Zeichnung für das JPEG-Format. Der Grund dafür war, daß die Reprovorlage für eine Webgrafik relativ groß ist. Sie enthält keine Schrift- oder Diagrammelemente, die in stark komprimierten JPEG-Bildern mangelhaft reproduziert werden. JPEG-Bilder können für Zeichnungen oder Fotos mit Textfeldern verwendet werden, wenn Sie die Komprimierung richtig einstellen. Die obige Zeichnung wurde in Photoshop mit der Vorgabe guter Qualität komprimiert, welche die mittlere Einstellung ist. Wenn Sie die JPEG-Komprimierungseinstellung gut oder exzellent wählen, können Textfelder zumindest auf 16-Bit- oder 24-Bit-Bildschirmen akzeptabel aussehen. Beachten Sie, daß der Text der Bildunterschrift klar lesbar ist, auch wenn sich bei genauem Hinsehen zeigt, daß rund um die Zeichen JPEG-Störungen zu sehen sind. Alle anderen Grafiken auf dieser Seite haben GIF-Format. Sie sind entweder kleiner oder enthalten Text- oder Diagrammelemente. Diagramme für den Computerbildschirm Einfache Diagramme können sich für die Darstellung auf dem Bildschirm eignen. Voraussetzung ist allerdings, daß sie so gestaltet werden, daß sie mit dem Pixel-Gitternetz auf dem Bildschirm übereinstimmen. Grafiken mit orthogonalen (geraden horizontalen oder vertikalen) Linien oder diagonalen Linien in einem Winkel von 45 Grad eignen sich am besten für die Bildschirmwiedergabe. Das zeigt die folgende, vergrößerte Illustration: Komplexe Bildsymbole lassen sich nur schwer interpretieren. Sie bekommen auf dem Bildschirm ein verschwommenes und verwirrendes Aussehen. Am besten ist es also, wenn Sie Ihre Bildsymbole und Naviationsgrafiken so einfach wie möglich halten: Einfache isometrische Perspektivgrafiken sind ebenfalls gut geeignet, da sie aus geraden Linien und 45-Grad-Diagonalen aufgebaut sind. Grafiken, die so aufgebaut wurden, daß sie mit dem Pixel-Gitternetz übereinstimmen, lassen sich in Photoshop nicht automatisch vergrößern oder verkleinern. Sie müssen in der anderen Größe extra neu gezeichnet werden. Nur so wird ein unklares, verschwommenes Erscheinungsbild vermieden, das ihre Wirkung zerstören würde: Verwenden Sie für Diagramme, Navigationsgrafiken oder andere Grafiken, die Text enthalten, immer das GIF-Grafikformat.