Georg Peez & Michael Schacht: Gestaltungshinweise zur Arbeit mit Autorenprogrammen und HTML-Editoren

Bildschirmdarstellung von Schriftarten
Bildschirmhintergrund
Buttons, Icons und Schaltflächen
Grafiken für das Internet

Grafiken für das Internet -
Arbeiten mit GIF- und JPEG-Formaten

Will man multimediale Präsentationen möglichst vielen Menschen preisgünstig und aktualisierbar zur Verfügung stellen, ist das Internet das Medium. Diese leichte und umfassende Verfügbarkeit wird jedoch mit dem Preis bezahlt, dass große Dateien in den meisten Fällen nur relativ langsam via Telefonleitung übertragen werden und sich dementsprechend zeitverzögert auf dem Bildschirm aufbauen. Denn wer verfügt schon über eine Standleitung oder ISDN? Das heißt, Grafiken für das World Wide Web müssen eine möglichst geringe Dateigröße aufweisen oder komprimiert werden, denn eine durchschnittliche Webseite (Text und Bild) sollte inklusive aller eingebauten Bilder nicht größer als 40 KByte sein -eine echte Herausforderung für die Gestaltung, weil eine geringe Dateigröße häufig auf Kosten der Bildqualität, der Farbigkeit bzw. der Bildgröße geht. Allerdings braucht die Auflösung der Bilder für die Bildschirmdarstellung im Browser auch nicht allzu hoch zu sein. (In der Regel haben die Grafiken im Web eine Auflösung von 72-150 dpi).


Eigenschaften der GIF- und JPEG-Formate
Die beiden gebräuchlichsten Bilddateiformate für das WWW sind GIF und JPG bzw. JPEG. Ohne Plug-Ins werden nur diese Grafik-Formate von allen Browsern unterstützt. Das Format PNG (Portable Network Graphic) ist zwar auch internettauglich, wird jedoch nicht durch alle Browser dargestellt.
Welches Format besser geeignet ist, hängt von mehreren Kriterien ab. Insbesondere folgende Punkte sollten bei der Wahl des Formats in Betracht gezogen werden:

• der Typ des Bilds, das erstellt werden soll,
• die Dateigröße,
• die gewünschte Bildqualität,
• die Zeit für den Bildschirmaufbau.
Allgemein gilt das GIF-Format als die beste Wahl für Linienzeichnungen und Grafiken mit wenigen Farben oder scharfen Übergängen. JPEG bietet sich an, wenn Dateien mit großen Farbspektren wie Fotos oder gescannte Bilder gespeichert werden sollen.
Entscheidend ist die Frage, welches Format die beste Bildqualität bei möglichst kleiner Dateigröße und optimaler Bildschirmdarstellung bietet.
Eingeführt von der JPEG (Joint Photographic Experts Group), gilt das JPEG/JPG- Format als internationaler Standard für komprimierte Foto-Bilder. Es können Komprimierungsraten von 20 zu 1 fast verlustfrei erzielt werden. Sein Komprimierungsverfahren arbeitet verlustreich in dem Sinne, dass Farbinformationen zu größeren gleichfarbigen Blöcken zusammengefasst werden. So entstandene harte Übergänge und einfarbige Flächen lassen sich mit der Vergrößerungsfunktion im Bildbearbeitungsprogramm betrachten. Sie können störend wirken, wenn die Bilddatei zu stark komprimiert wird. Die Dekomprimierung von JPEG-Bildern nimmt bei der Bildschirmanzeige einige Zeit in Anspruch. Die Anzeige kann jedoch schrittweise aufgebaut werden (Interlacing).
Das GIF-Format (Graphics Interchange Format) wurde als plattformübergreifender Grafikstandard entwickelt und wird von allen grafischen Internet-Browsern unterstützt. GIF unterstützt 8-Bit-Farbe (256 Farben) und reduziert Bild- bzw. Grafikdaten auf zwei Weisen: Erstens beschränkt es die Palette auf 256 Farbtöne und zweitens komprimiert es zeilenweise, wodurch einfarbige horizontale Linien und Flächen sowie vertikale Farbverläufe besonders gut schrumpfen. Einfache Vektordateien wirken in der Regel im GIF-Format am besten, sofern sie scharfe Umrisse oder kleine Textobjekte enthalten. Wegen dieser Eigenschaften eignet sich das GIF-Format besonders für grafische Darstellungen, wie Schemata, Schriftzüge oder Schaubilder mit wenigen Farben und monochromen Flächen. GIF-Dateien bieten Komprimierung ohne Datenverlust, so dass nach der Konvertierung die Datei-Information im Bild gespeichert ist und die GIF-Datei fast genauso wirkt wie die Grafik, die erstellt wurde. Allerdings können einige Farben bei der Komprimierung weniger deutlich ausfallen. Da der Aufwand für die Dekomprimierung nur gering ist, werden GIF-Dateien relativ schnell auf dem Bildschirm angezeigt. Bildbearbeitung
Die Bildbearbeitung einer Grafikdatei sollte vor der endgültigen Nutzung in der multimedialen Präsentation zunächst immer im Echtfarbenmodus geschehen, nicht etwa in einer die Anzahl der Farbtöne verändernden Form.
Dient ein Scan einer gerasterten Abbildung, etwa aus einer Illustrierten, als Vorlage, lässt sich das Raster in der Regel per Weichzeichner in der Bildbearbeitung weitgehend entfernen.
Digitale Aufnahmen aus der Kamera werden zwar zunächst im JPEG-Format gespeichert, sie sollten jedoch keinesfalls in diesem Format bearbeitet werden, sondern in einem verlustfreien Format, wie TIFF oder TGA, bevor das Duplikat des möglicherweise separat zu sichernden Endergebnisses dann wieder als JPEG abgespeichert werden kann. Ansonsten würde das Bild bei jedem Speichervorgang aufs Neue komprimiert und an Qualität verlieren.
Eine Skalierung der Grafiken -insbesondere des JPEG-Formats -, eine Veränderung von deren Größe, passiert stets auf Kosten der Schärfe des Bildes, denn das Bildbearbeitungsprogramm muss bei der Skalierung die bestehenden Pixel komplett neu berechnen. Um diese Unschärfe auszugleichen, sollte das Bild in seiner endgültigen Größe deshalb mit dem entsprechenden Werkzeug bzw. Hilfsmittel scharfgezeichnet werden.
Enthält ein JPEG-Bild Bereiche, die auf jeden Fall scharf bleiben müssen, aber andere Bereiche, die unscharf werden können und somit die Dateigröße verringern, so lassen sich in der Bildbearbeitung bestimmte “unwichtigere” Stellen maskieren und weichzeichnen. Freilich müssen die Ränder der Selektion geglättet werden, so dass keine scharfen Konturen zwischen den verschiedenen Bildbereichen entstehen.
Das JPEG-Format sollte nicht für die Darstellung von Grafiken verwendet werden, die immer einfarbige Flächen und starke Kontraste aufweisen, denn bei der Umwandlung aus dem Grafikprogramm zu einer JPEG-Komprimierung bildet sich stets “Fliegendreck”, kleine Schmutzpünktchen. (Abb. 1 a u. b)

 

Abb. 1 a u. b: "Schmutzpunkte", die entstehen, wenn man eine Grafik als JPG konverviert und speichert.


Für multimediale Präsentationen lassen sich in GIF-Animationstools mehrere GIFs in einer Datei zusammenpacken zu einem “Multi-Image-GIF”, auch “Animated GIF” genannt. Man gibt die Abfolge der einzelnen GIF-Grafiken und die Geschwindigkeit im Datei-Header ein. Der Browser stellt aus diesen Steuerungsdaten dann eine GIF-Animation dar. Diese lässt sich für die Präsentation mit hierauf abgestimmter Musik oder mit Geräuschen unterlegen. (Abb. 2)


Abb. 2: Einzel-Grafiken nebeneinander, die in einer GIF-Animation hintereinander ablaufen

Für die Darstellung eines Bildes bzw. einer Grafik sind ausschließlich dessen Pixel-Dimensionen relevant. Im Bildbearbeitungsprogramm, werden zwar dpi-Angaben in der Datei gespeichert, aber der Browser ignoriert diese Angaben. Er gibt die Grafiken immer 1:1, also Pixel für Pixel, wieder. Aus diesem Grund sollte man Grafiken nie z. B. im HTML-Editor in der Größe verändern, sondern immer bereits in der gewünschten Größe abspeichern. Verkleinert man ein Bild im Browser, so wird trotzdem das größere und datenintensivere Ursprungsbild geladen.
Für die Bearbeitung von Grafiken und Bildern spielt freilich die Darstellungsqualität am eigenen Monitor eine entscheidende Rolle. Nur auf einem großen und präzise eingestellten Bildschirm kann man die verändernden Einwirkungen des eigenen Tuns auf das Bild einschätzen.


Literatur
Himmelein, Gerald: Weboptimal. Mit wenig Aufwand gut aussehende Web-Grafiken produzieren. In: c‘t Heft 25, 2000, S. 288-290


Bibliografische Angaben zu diesem Text:

Michael Schacht / Peez, Georg: Gestaltungshinweise zur Arbeit mit Autorenprogrammen und HTML-Editoren: Grafiken für das Internet - Arbeiten mit GIF- und JPEG-Formaten


Michael Schacht (http://www.michaelschacht.de) & Georg Peez (http://www.georgpeez.de) Zuletzt geändert am 28.08.2001