Grafiken im Web

Wie jedem bekannt, sagen Bilder mehr als tausend Worte. Deshalb werden und sollten Grafiken auch auf Ihren Web-Seiten nicht fehlen. Bevor Sie jedoch anfangen, Ihre Bilder zu integrieren, sollten Sie folgende Gesichtspunkte berücksichtigen:

Die Bildgröße

Je größer ein Bild ist, desto größer ist in der Regel auch die Dateigröße und somit auch mit längeren Ladezeiten verbunden. Normalerweise sind Bilder, welche "eingescannt" werden oder über ein Bildbearbeitungsprogramm erzeugt werden, mit einer Auflösung von 100dpi (Punktdichte) vollkommen ausreichend. Der Bildschirm stellt in der Regel alle Graphiken nur mit 96dpi dar, d.h. eine höhere Auflösung führt zu einer nicht gewollten Vergrößerung des Bildes auf dem Bildschirm.

Die Farbtiefe

Bilder mit 256 verschiedenen Farben sind in der Regel ebenfalls ausreichend und können nahezu auf jedem PC problemlos dargestellt werden.

GIF- oder JPEG-Format

Verbunden mit der Farbtiefe, sollte das entsprechende Grafikformat gewählt werden. Alle gängigen Grafikprogramme unterstützen heute diese Formate. Abhängig vom Bildmaterial (Fotos, "Icons" usw.) ist der Einsatz von GIF- oder JPG-Formaten zu empfehlen.

Vergleich (bei sichtbar, gleichbleibender Qualität):


JPG-Format                   JPG-Format                 GIF-Format
Grösse: 4172 Bytes       Grösse: 2003 Bytes      Grösse: 3719 Bytes
Ohne Komprimierung     Komprimierung 10%    Ohne Komprimierung


	GIF-Format	JPEG-Format
max. Farben	256	16.7 Mio.
animierte Bilder	ja	nein
Einsatz	Logos, Buttons, Stilelemente	größere Bilder Produktabbildungen Porträts
Vorteile	Unterstützung von transparenter Farbe	Unterstützung von Truecolor Dateikomprimierung möglich

Wiederverwendung von Bildelementen
Benutzen Sie, wenn möglich, bereits benutzte Bildelemente auch auf anderen Seiten. Damit reduziert sich das Datenübertragungsvolumen und der Bildaufbau einzelner Seiten wird beschleunigt.

Durch geschickte Anordnung von Bildern, können einzelne Bildteile mehrfach verwendet werden und reduzieren dadurch wesentlich die Ladezeiten.
Auf diesen Webseiten werden zum Beispiel fast alle Grafiken so in die Seiten eingebunden, dass sie nur einmal geladen werden müssen. Beim Aufrufen anderer Seiten wird dann wieder die gleiche Grafik benutzt und eine erneute Ladezeit wird vermieden. Damit wird eine Webseite schneller im Seitenaufbau.

Natürlich ergibt sich durch den Einsatz von Grafiken und Bildern zahlreiche, ansprechende Gestaltungsmöglichkeiten um die Attraktivität der Web-Seiten zu erhöhen. Dies macht jedoch nur Sinn, wenn auch die Geschwindigkeit des Servers und Netzes ausreichend ist - ansonsten wird die Grafik vom Anwender nämlich abgeschaltet, um den Ladevorgang zu beschleunigen.

Beispiel

Dieses Beispiel zeigt den Unterschied bei der Nutzung von Bildern mit transparenter (links) und nicht transparenter (rechts) Farbe. Entscheiden Sie selbst, welcher "Icon" besser zu dieser Seite passt.

Der Aufwand bei der Retousche (Farbe weiß wurde hier auf Transparenz definiert) ist zwar nicht ganz zu vernachlässigen, bringt aber doch ein besseres Erscheinungsbild, das sich lohnt.

Denken Sie daran, welche Zugangsmöglichkeiten Ihre Zielkunden einsetzen (Modem, ISDN, DSL usw.) und nehmen Sie mit der Gestaltung Rücksicht auf deren vorhandenen Infrastruktur. Denn nichts ist lästiger als das Warten auf nicht aussagekräftige Graphiken und Bilder.