Die Möglichkeit, Grafiken in Dokumente einzubinden, hat das World Wide Web erst zu dem gemacht, was es ist. Allerdings sind diese Grafiken wegen ihrer meist stattlichen Größe und der damit verbundenen Übertragungszeit heute noch der Klotz am Bein des WWW. Aus diesem Grund ist beim Umgang mit Bildern besondere Vorsicht geboten, zumindest bis zur Realisierung des Datenhighways.
Je größer die Grafik in Bytes, desto länger dauert die Übertragung und desto eher betätigt der Leser den Stop-Button. Die Dateigröße einer Grafik wird vor allem durch drei Faktoren bestimmt: die Auflösung, die Farbtiefe und die physische Größe. Die Auflösung gibt an, wie viele Bildpunkte (Pixel, dots) pro Zoll (dpi = dots per inch) angezeigt werden. Da die meisten heute eingesetzten Bildschirme 72 Pixel darstellen können, sollte dieser Wert auch zum Speichern der Grafik verwendet werden. Die Farbtiefe ist ein Maß für den Speicherbedarf der Farbinformation jedes einzelnen Pixels. Als im Internet üblicher Standard kann eine Tiefe von 8 Bit angenommen werden, was 256 verschiedene Farben pro Bild ermöglicht - eine Zahl, die praktisch immer ausreichend ist (vgl. [151], Seite 45). Eine besonders wichtige Determinante der Dateigröße ist natürlich die Höhe und Breite der Grafik in Pixel. Als Grundsatz gilt hier: so groß wie nötig, aber so klein wie möglich. Die Dateigröße wird zusätzlich durch die komprimierenden Formate GIF und JPEG verringert. Als endgültige Dateigröße zum Einbetten in ein Web-Dokument sollten 30 Kilobytes möglichst nicht überschritten werden.
Sowohl GIF (Graphics Interchange Format) als auch JPEG (Joint Photographic Experts Group) wurden entwickelt, um bei Grafiken die abzuspeichernde Datenmenge und damit die Dateigröße zu verringern. Die beiden Formate basieren jedoch auf völlig unterschiedlichen Verfahren. Grundsätzlich wird bei einer Grafik jedes einzelne Pixel in Form seiner Farbcodierung gespeichert. Folgen nun z. B. 18 Bildpunkte der gleichen Farbe aufeinander, so wird bei GIF nicht 18 Mal der gleiche Farbwert gesichert, sondern die Information ,,18 Mal`` gefolgt von der Angabe der Farbe. Dadurch kann, wenn häufig gleichfarbige Pixel aufeinander folgen, extrem viel Speicherplatz gespart werden. GIF ist daher vor allem für klar abgegrenzte, einheitliche Farbflächen geeignet, wie sie gewöhnlich bei Computergrafiken (z. B. Icons) anzutreffen sind. JPEG hingegen nützt die Eigenschaft des menschlichen Auges, sich durch geschickt gewählte Farb- und Helligkeitswerte leicht täuschen zu lassen. Je nach gewünschter Komprimierung werden bis zu 75 % der Bildpunkte beim Speichern einfach weggelassen, die verbleibenden aber so verändert, daß der Verlust praktisch nicht bemerkt wird. JPEG ist daher besonders gut für farbenreiche Bilder mit feinen Nuancen, z. B. Fotos, geeignet (vgl. [205], Seite 146).
Alle Browser speichern die geladenen HTML-Dokumente, und damit auch die übertragenen Grafiken, in einen bestimmten Bereich der Festplatte des Lesers. Dieser Zwischenspeicher wird Cache genannt. Wird eine schon vorher angezeigte Grafik (ist bereits im Cache) neuerlich benötigt, muß diese nicht mehr aufwendig extra übertragen werden, sondern wird einfach von der lokalen Festplatte des Rechners gelesen und angezeigt (vgl. [151], Seite 28 f). Die Nutzung dieser Möglichkeit eignet sich besonders gut für Elemente, die ohnedies auf jeder Seite angezeigt werden sollen, wie z. B. das Logo oder Navigationsbuttons.
Manchmal läßt es sich nicht vermeiden, Bilder im World Wide Web anzubieten, die eine Dateigröße von 50 Kilobytes oder mehr aufweisen. Solche Grafiken sollten nicht ohne vorherige Warnung des Lesers übertragen, d. h. einfach in das Dokument eingebunden werden. Statt dessen ist es üblich, eine winzige Kopie des Bildes (Thumbnail genannt) als Link auf die größere Grafik einzubinden, oftmals unter zusätzlicher Angabe deren Dateigröße. Damit kann der Leser selbst entscheiden, ob er die Wartezeit in Kauf nehmen will, um die Abbildung in voller Pracht am Bildschirm bewundern zu können (vgl. [151], Seite 115; [205], Seite 154). Ein Beispiel zeigt Abbildung 10.3.
Aufgrund der oft langen Übertragungszeiten deaktivieren viele Web-Surfer die Auto Load Images-Option (vgl. Kapitel 3.2.3). Anstelle der Grafik wird dann vom Browser ein entsprechendes Symbol angezeigt. Zusätzlich sollte man dem Leser einen Hinweis darauf geben, welchen Inhalt das Bild eigentlich gehabt hätte, vielleicht ist es für das Verständnis der Information von Bedeutung. Diese Funktion übernimmt das ALT-Attribut des <IMG>-tags, z. B. ALT= &#;`Logo&#;`¨. Zusätzlich zum Symbol des Browsers wird dann der angegebene Text angezeigt und hilft dem Leser bei der Entscheidung, ob er das Bild nicht doch noch laden sollte. Eine ähnliche Funktion übernehmen die Attribute WIDTH und HEIGHT. Sie sorgen dafür, daß, egal ob die Grafiken nun angezeigt werden oder nicht, bereits beim Seitenaufbau der entsprechende Platz frei gelassen wird. Damit bleibt das beabsichtigte Layout auch ohne Grafiken bestehen und muß nicht nachträglich wieder durch den Browser korrigiert werden (vgl. [205], Seite 151; [200], Seite 161). Eine Abbildung wird also am besten in der Form
<IMG SRC=&#;`logo.gif&#;`ÄLT=&#;`Logo&#;`WIDTH=100 HEIGHT=200>
in die Web-Seite integriert. Wird die Grafik nicht geladen, so liefert der Browser in diesem Fall ein Bild entsprechend Abbildung 10.4.
Abbildung 10.4: Nicht geladene Grafik
Neben dem Grundsatz, möglichst wenige verschiedene Farben einzusetzen, sollte auch gut überlegt werden, welche Farbtöne in welcher Kombination aufeinandertreffen. Warme Farben (rot, orange, gelb) erscheinen dem Betrachter weiter vorne als kalte (blau, grün, violett) (vgl. [21], Seite 80 f). Zusätzlich sollten auch psychische und symbolische Wirkungen von Farben nicht gänzlich außer acht gelassen werden. Einen Überblick gibt Tabelle 10.1.
Tabelle 10.1: Psychische und symbolische Wirkungen von Farben (vgl. [131], Seite 62 ff)
Besonders empfehlenswert ist es auch, im Logo vorkommende Farben für andere Grafiken, z. B. Schaltflächen, wieder zu verwenden und so der Site ein einheitliches Aussehen zu geben.
Oft kommt es bei Grafiken vor, daß sie nicht eine schöne Rechteck-Form aufweisen, sondern einen unregelmäßigen Randverlauf haben. Da das eingebettete Bild aber aus technischen Gründen rechteckig sein muß, wird es von einem unschönen Rechteck eingerahmt, das den eigentlichen Hintergrund des Dokumentes verdeckt. Die Farbe dieser Umrandung kann aber mit geeigneter Software zur Bildbearbeitung wie Adobe Photoshop als transparent deklariert werden. Bei der Anzeige der Grafik erscheint dann anstelle der unsichtbaren Farbe der Hintergrund (vgl. [151], Seite 263 ff). Abbildung 10.5 zeigt den Unterschied.
Abbildung 10.5: Transparenter Hintergrund
Für viele häufig angebotene Navigationsschritte wie ,,nach oben``, ,,zurück``, aber auch zur Kennzeichnung der Hauptbereiche der Web-Site bietet es sich an, kleine Grafiken (Icons) anstelle von geschriebenem Text zu verwenden. Voraussetzung dafür ist allerdings, daß die Bedeutung der Icons (auch international) als bekannt vorausgesetzt werden darf. Je abstrakter das Icon ist, desto schwieriger ist seine Funktion zu interpretieren (vgl. [151], Seite 151 ff).