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

Das Dateiformat GIF89a gestattet es Ihnen, aus der Farb-Nachschlagetabelle des GIF eine Farbe auszuwählen, die transparent erscheinen soll. Bei den derzeit gängigen Bildbearbeitungsprogrammen wie Adobe Photoshop und vielen Shareware-Dienstprogrammen kann man eine Farbe auswählen, die unsichtbar werden soll. Normalerweise ist die Farbe, die man dazu auswählt, eine Hintergrundfarbe. Im folgenden Beispiel haben wir entschieden, daß die rosarote Hintergrundfarbe transparent erscheinen soll:



Wir verwenden transparente GIFs in diesem Handbuch für die Kopf- und Fußzeilengrafik am oberen Rand der Seiten. Der transparente Hintergrund ermöglicht es, daß die Wortfolge "Yale C/AIM Web Style Guide" vom grauen Hintergrund der Scanning-Spalte in das Weiß des Seitenhintergrunds weitergeführt wird. Die untenstehende Grafik stellt die transparente Kopfzeilengrafik dar. Die nächste Illustration zeigt, wie dieselbe Grafik aussehen würde, wenn sie keine transparente GIF-Grafik wäre:



Leider ist die Eigenschaft der Transparenz nicht selektiv zu verwenden: wenn man eine Farbe transparent macht, wird jedes Pixel der Grafik, das diese Farbe hat, unsichtbar. Das kann manchmal unerwartete Wirkungen haben. Ein Beispiel ist, wenn eine Farbe sowohl im Hintergrund als auch an anderen Stellen der Grafik verwendet wird:



Eine transparente Komponente in eine GIF-Grafik zu bringen, kann auch zu enttäuschenden Ergebnissen führen. Dies ist zum Beispiel dann der Fall, wenn die Grafik durch Anti-Aliasing bearbeitete Ränder mit Pixeln in verschiedenen Farben enthält. Durch Anti-Aliasing glättet man die Formen von Grafiken, indem man an den Begrenzungsrändern Pixel in Zwischenfarben einfügt. Wenn wir wie im untenstehenden Beispiel die Hintergrundfarbe von weiß auf transparent verändern, indem wir den grauen Hintergrund der Web-Seite durchscheinen lassen, erhalten wir einen unansehnlichen weißen Lichthof rund um unsere Grafik:



Einige der Probleme mit Anti-Aliasing-Grafiken lassen sich vermeiden, indem man die Grafiken auf einem Hintergrund erstellt, der eine ähnliche Farbe hat wie die Farbe, die man für die Web-Seiten gewählt hat. In unserem Fall wählten wir Weiß als Hintergrundfarbe für die Seiten dieses Handbuchs. Bei dem nachstehend gezeigten Vogelbild handelt es sich um ein Rechteck (GIF-Grafiken sind immer Rechtecke). Man kann den Rand allerdings nicht sehen, weil wir den Hintergrund im GIF weiß gemacht und dann die weiße Farbe des GIF auf transparent eingestellt haben. Auf diese Weise können wir sichergehen, daß der Vogel jedes Mal auf einem perfekt weißen Hintergrund erscheint, und daß die Ränder der Grafik nie zu sehen sind:

Watercolor painting of a rail, by Pat Lynch.

Watercolor paintings by Pat Lynch. Copyright 1997, all rights reserved.

Transparenz läßt sich in einfachen diagrammartigen Grafiken einsetzen, aber auch bei komplexen Formen. Die GIF-Grafik des nachstehenden Aquarellbildes kann über die Scanning-Spalte in den weißen Hintergrund hineinragen, weil wir den weißen Hintergrund transparent gemacht haben. Potentielle Probleme mit einem Lichthof rund um die Blätter in der grauen Scanning-Spalte haben wir vermieden, indem wir das Bild so retouchiert haben, daß der weiße Lichthof mittels Anti-Aliasing von den Blatträndern entfernt wurde:
Watercolor painting of a Savannah Sparrow, by Pat Lynch.
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.