Grafikformate für WWW-Dokumente

Als Web-Designer steht man derzeit vor einem Dilemma: Einerseits surfen die meisten Besucher noch mit wenig Rückenwind und andererseits möchte man dem Gast ein Feuerwerk an Sinneseindrücken bieten. Mit der richtigen Kombination von Grafikformaten und HTML-Elementen läßt sich selbst über die langsamste Modemverbindung avantgardistisches Design transportieren.

Das heutige Internet lebt zum großen Teil von der Möglichkeit des World Wide Web, die Dokumente grafisch aufzubereiten. Neben den HTML-Funktionen für die Formatierung von Dokumenten und Fonts setzt sich daneben immer mehr die Grafik als stilbildendes Mittel durch. Der Stand der Browser-Technik ermöglicht das Manövrieren mittels grafischer Menüs, die Vorschau eines Bildes noch während des Ladens bis hin zu ausgewachsenen Animationen. Während die Frage nach dem besten Design vom Geschmack des Gestalters und dem des Betrachters abhängt, unterliegt der Web-Designer auch handfesteren Zwängen. Die Internet-Bandbreite unterscheidet sich derzeit noch erheblich von den Transferraten einer CD-ROM oder gar einer Festplatte. Bei der Gestaltung einer aufwendigen Webseite gilt es also abzuwägen zwischen Effekt und Nutzen. Eine Seite kann noch so gut gestaltet sein: wenn die Besucher länger als üblich darauf warten müssen, bleibt der erhoffte Zustrom aus.

Weniger ist mehr

Standardgrafikformate wie BMP und TIFF wurden entwickelt, um Bilddaten zwischen verschiedenen Programmen per Festplatte oder Diskette auszutauschen; niemand ist auf die Idee gekommen, daß einmal Bilder über weltweite Netze transportiert werden müssen. Entsprechend verschwenderisch gehen die Formate mit Platz um und eignen sich daher nicht für Publikationen im Internet, auch wenn Microsoft seinen Explorer mit der Fähigkeit ausstattet, BMP-Dateien darzustellen. Um die Größe von Grafiken zu reduzieren, bieten sich drei Verfahren an. An erster Stelle steht auf Grund der Fülle von redundanten Daten in den meisten Grafikdateien die Kompression mittels üblicher Packungsalgorithmen. Für das TIFF-Format kommt meist der LZW-Algorithmus zum Einsatz. Im Idealfall - wenn ein Bild nur aus einer Farbe besteht - bleiben von 40·000·Byte für ein Bild mit der Größe 100 mal 100 Pixel nur noch etwa 1,3·KByte übrig. Im ungünstigsten Fall - wenn sich jeder Pixel von seinem Nachbarn maximal unterscheidet - erreicht man mit LZW noch eine Kompression von etwa 65 Prozent.

Mit normalen Fotos erreicht man im allgemeinen eine Verringerung der Datenmenge auf ein Drittel. Einen echten Quantensprung in der Reduzierung der Größe bewirkt allerdings erst ein 'Datenvernichtungsverfahren', das tatsächlich Daten wegläßt, statt sie nur platzsparend zu speichern. An erster Stelle steht hier die Einschränkung der Farbvielfalt.

Ich sehe was, ...

Jedes Foto enthält eine hohe Anzahl von Farben - normalerweise mehr Farben, als ein Betrachter wahrnehmen kann. Durch gezielte Auswahl einer Farbpalette lassen sich daher erhebliche Redundanzen vermeiden. Als Beispiel sei ein Schwarzweißbild angeführt, das statt der üblichen 24·Bit pro Pixel (jeweils 8·Bit für jede Farbe bei RGB) nur maximal 8·Bit pro Pixel benötigt und damit immer noch 256 Graustufen darstellen kann. Welche Kriterien die Wahl bestimmen ist unterschiedlich: einerseits kann es sich um einen Farbraum handeln, der möglichst viele vorhandene Farben abdeckt oder andererseits um einen der menschlichen Wahrnehmung angepaßten. Letzteres Verfahren läßt dann zwar unter Umständen mehr Farben weg, vermittelt aber einen realistischeren Eindruck. Professionelle wie auch Shareware-Grafikprogramme bieten verschiedene Tabellen und darüber hinaus die Möglichkeit, eigene zu definieren. In Abhängigkeit vom Motiv fällt diese Reduzierung mehr oder weniger ins Auge.

Das prominenteste Beispiel für die Arbeit mit Farbtabellen stellt das GIF-Format (Graphics Interchange Format) dar. CompuServe hat dieses Format entwickelt, um die Übertragungszeiten im eigenen Online- Dienst gering zu halten. Es ist neben JPEG inzwischen das meistverbreitete Grafikformat im Internet. Ein GIF-Bild besitzt eine Farbpalette, die bis zu 256 Farben (8·Bit pro Pixel) enthalten kann. Je kleiner die Tabelle, desto geringer ist auch der Platzbedarf der Datei. Die Einstellung auf eine begrenzte Farbtabelle darf in jedem Fall erst am Ende des gestalterischen Prozesses stehen, da mit der Reduzierung der Farben Daten verloren gehen. Das GIF-Format eignet sich besonders für Grafiken, die weniger optische Informationen enthalten, also beispielsweise Bilder mit Schrift. Hier erreicht man im Vergleich zu anderen Verfahren eine sehr hohe Qualität bei einer geringen Datenmenge. Außer einer Reduzierung der Farbpalette verwendet GIF zusätzlich eine LZW-Kompression. Sie arbeitet zeilenweise und bleibt deshalb zum Beispiel bei waagerechten Farbverläufen wirkungslos.

Die dritte Möglichkeit der Verkleinerung stellt das JPEG-Format dar. Das zugrundeliegende Verfahren unterscheidet sich stark von normalen Kompressionsverfahren, weil es auch den Inhalt des Bildes verändert. Der zugrundeliegende Algorithmus (DCT - Diskrete Cosinus-Transformation) ermöglicht eine Reduzierung der Daten, ohne daß die Wahrnehmung erheblich beeinträchtigt wird. Das JPEG-Verfahren kommt bei fotografischen Motiven der menschlichen Sichtweise entgegen. Es eignet sich daher für Portraits, Landschaftsaufnahmen und ähnliches. Bei Strichzeichnungen oder Text in Bildern liefert das JPEG-Format dagegen eine wesentlich schlechtere Qualität als GIF.

Sowohl für GIF als auch für JPEG-Dateien gilt, daß sie immer erst am Ende des Bildverarbeitungsprozesses erstellt werden sollten. Ein Bild, aus dem durch ein Kompressionsverfahren Informationen entfernt wurden, eignet sich nicht mehr für eine Weiterbearbeitung. Unter der Voraussetzung, daß die maximal erträglichen Kompressionsraten Verwendung finden, kann man mit derlei geschrumpften Bildern bestimmte Werkzeuge, beispielsweise das automatische Freistellen, nicht mehr anwenden - oder die Arbeit wird zu einer Geduldsprobe. Sogar die Skalierung - etwa für eine Vorschau - sollte man vor der Reduzierung auf eine 'Netz'-geeignete Größe vornehmen, da sich sonst selbst mit Photoshop nicht immer befriedigende Ergebnisse erzielen lassen.

Sowohl GIF als auch JPEG haben inzwischen so weite Verbreitung gefunden, daß die Liste der Programme und Tools für ihre Bearbeitung unüberschaubar ist. Da die Erzeugung dieser Formate jedoch nur der Datenreduzierung dient, sollte man auf jeden Fall bei dem bevorzugten Grafikprogramm bleiben. Lediglich wenn die Ergebnisse der Kompression oder Farbreduzierung nicht zufriedenstellen, lohnt sich die Einarbeitung in andere Programme. Besonders hervorzuheben ist das Windows-Programm LView, da es neben leicht zu bedienenden Filtern und Makrofunktion auch die umfangreichsten Möglichkeiten zur Einstellung der JPEG-Kompression bietet.

Vorausschauend

Die Langsamkeit des Internet spielte auch bei der Entwicklung einer weiteren Eigenschaft der GIF- und JPEG- Formate eine Rolle: die Vorschau. Damit sieht auch der Besucher mit einer 'langen Leitung' schon die Grundzüge eines Bildes, obwohl nur ein Teil bereits geladen ist. Das sogenannte progressive JPEG-Format erlaubt mehrere 'Scans' in einem Bild: nach und nach baut sich das Bild als Mosaik aus quadratischen Feldern auf, sie werden beim Laden immer kleiner und schärfer. Die Dateigröße nimmt bei einem progressiven JPEG nur minimal zu, da lediglich zusätzliche Steuerflags notwendig sind, die eigentlichen Bildinformationen vermehren sich nicht.

Als Alternative bieten sich interlaced GIFs an: Seit 1987 sieht die GIF-Spezifikation die Möglichkeit vor, die Zeilen eines Bildes nicht nacheinander darzustellen, sondern ähnlich der Fernsehröhre versetzt. Wenn in der Datei festgelegt ist, daß zuerst jede zehnte Zeile gezeigt wird, verringert sich die Ladezeit bis zu einer unscharfen Vorschau entsprechend. Sowohl die progressive JPEG-Variante als auch interlaced GIF-Dateien lassen sich inzwischen mit den verbreiteten Programmen erzeugen. Für Mac-Photoshop-Benutzer existiert das Plug-In Transmogrifier. Es kostet 22 Dollar und ist über FTP zu beziehen. Für Windows-Anwender empfiehlt sich LView Pro sowohl für die Erstellung von progressive JPEG als auch für interlaced GIF.

Durchsicht

Neben der Dateigröße finden immer öfter auch Anforderungen der Designer Berücksichtigung bei der Entwicklung neuer oder modifizierter Grafikformate. Galt es noch vor kurzem als selbstverständlich, daß Bilder in WWW-Dokumenten rechteckig umrahmt sind, müssen sie heute scheinbar vor dem Hintergrund schweben. Bisher bietet lediglich das spezielle Format GIF89a die Transparenzfunktion. Eine der Farben aus der Farbtabelle kann hier als transparente Farbe markiert werden. Der Web-Browser läßt diese Farbe aus; statt ihrer scheinen Hintergrundfarbe oder -bild durch die GIF- Grafik hindurch. Es handelt sich dabei wohlgemerkt nicht um den Alpha-Kanal anderer Grafikformate, der den Grad der Transparenz einer Farbe in 256 feinen Stufen angibt. Grafiken mit einer transparenten Farbe müssen von Anfang an auf diesen Zweck hin konzipiert werden, da sich ansonsten unschöne Effekte einstellen. Beispielsweise eignen sich keine Bilder, in denen sich Motivbereiche aus der Farbe zusammensetzen, die für die Transparenz vorgesehen ist. Selbst bei Farbverläufen oder Weichzeichnereffekten kommt es zu unangenehmen Effekten, weil häufig die Transparenzfarbe beteiligt ist.

Für die Größe der Datei spielt die Verwendung einer transparenten Hintergrundfarbe keine Rolle, die Datei wird dadurch nicht kleiner. Sollte das verwendete Bild als GIF wesentlich größer sein als im JPEG-Format, bietet sich immer noch die Alternative, auf ein Hintergrundbild zu verzichten, statt dessen die Grafik auf die Hintergrundfarbe abzustimmen - und ohne Transparenz als JPEG-Datei zu speichern. Um transparente GIF-Dateien zu erstellen gibt es eine Fülle an kleinen Sharewaretools. Dem DOS- und Unix-Programm giftrans übergibt man als Kommandozeilenparameter den entsprechenden Farbwert. Einfacher geht es allerdings wiederum mit LView Pro. Der Mac-Benutzer sollte für diesen Zweck das bekannte Shareware-Programm Grafikkonverter verwenden.

Bewegt sich doch

Obwohl die Browser-Hersteller nach und nach auch Bewegung in die Web-Seiten bringen wollen und dafür Plug-Ins und HTML-Erweiterungen bemühen, gibt es wesentlich einfachere Möglichkeiten, Animationen in ein HTML-Dokument einzubinden. Bereits das Format GIF87 bot die Möglichkeit, mehrere Bilder in einer Datei zu speichern. Eine Steuerung, wie sie dargestellt werden sollen, wurde allerdings erst in der Erweiterung GIF89a eingeführt. Das erzeugende Programm kann hier festlegen, in welchem Zeitabstand die Einzelbilder auf dem Schirm erscheinen. Außerdem bietet das Format Kontrollmechanismen wie das Warten auf eine Eingabe oder die Art der Übergänge zwischen den Frames. Allerdings unterstützen bisher keine Browser und nur wenige Grafikprogramme diese fortgeschrittenen Kontrollfunktionen.

Trotz Farbreduzierung auf das notwendigste Maß und guter Kompression neigen animierte GIFs jedoch dazu, unerträglich groß zu werden. So schafft es Netscape schon nicht, Animationen mit 25 Frames pro Sekunde darzustellen, wenn die Einzelbilder fünf Kilobyte übersteigen. Daher eignen sich animierte GIFs ledglich für kleine bewegte Icons.

Im Unterschied zu GIF-Dateien bietet das relativ neue Grafikformat PNG (Portable Networks Graphics) ein Verfahren, durch das die Einzelbilder in Abhängigkeit voneinander - und damit wesentlich platzsparender - gespeichert werden: stimmen Bildbereiche zweier aufeinanderfolgender Einzelbilder überein, müssen sie nicht mehrfach gespeichert sein. Eine PNG-Animation ist damit kleiner als das entsprechende GIF-Pendant. Daneben sind in der PNG-Spezifikation weitere Funktionen vorgesehen, zum Beipiel der 256stufige Alpha-Kanal als Alternative zur transparenten Farbe. Sowohl die W3-Organisation als auch verschiedene Browser-Hersteller bemühen sich um die Verbreitung dieses Grafikformates.

Nur wenige Programme erzeugen bisher PNG-Dateien. Unter Windows ist das bekannteste Paintshop Pro. Allerdings kann man mit dem Plug-In PNGForm.8BI auch direkt aus Photoshop heraus PNG-Dateien erzeugen. Mac-Benutzern hilft auch hier das allgegenwärtige Programm Grafikkonverter. Bisher gibt es kaum Möglichkeiten, Filme direkt in einem Video-Schnittprogramm in eine GIF-Animation umzuwandeln. Daher führt der Weg bisher über ein Bildbearbeitungsprogramm. Alle Einzelbilder müssen zuerst separat vorliegen, danach kann man sie mit verschiedenen Programmen zu einem Ganzen zusammenfügen. Als relativ einfache Windowssoftware kommt dafür das GIF Construction Set der Firma Alchemy Mindworks in Frage. Bisher schöpft es jedoch längst nicht alle Kontrollmöglichkeiten des GIF89a-Formates aus, beispielsweise kann man die Zeit zwischen den Einzelbildern nur in ganzen Sekunden einstellen. Mac-Benutzer können das in AppleScript geschriebene GIFLoop von David Foltz verwenden.

Für DOS- und Unix-Anwender wartet Gifmerge mit der größten Funktionalität auf. Über die umfangreichen Kommandozeilenoptionen kann man fast alle vorgesehenen GIF-Parameter steuern. Die fertigen GIF-Animationen bindet man wie jede andere Grafik mittels ein. Obwohl der Stopbutton des Navigators beim Ablauf einer Animation ständig rot bleibt, lädt der Navigator die GIF- Datei nur einmal; die Animation läuft danach aus dem Cache.

Fremdbestimmt

Eine weitere Möglichkeit, Bewegung in Web-Dokumente zu bringen, ohne auf JavaScript oder Java zurückgreifen zu müssen, stellen die 'server-side animations' dar. Mit Hilfe eines CGI-Scriptes (Common Gateway Interface) sendet der http-Server einen Strom aus Grafikdaten, die das Skript aus Einzelbildern generiert. Weit verbreitet ist beispielsweise das Perl-Script Animate vom kalifornischen Internet-Provider Home Pages. Obwohl man prinzipiell auch über ein CGI-Script Einfluß auf den Ablauf der Animation nehmen kann, laufen viele Server-basierte Animationen aufgrund der stark schwankenden Bandbreite nicht im gewünschten Tempo. Außerdem kann der Browser die Daten bei einer Wiederholung nicht aus dem Cache oder vom Proxy holen. Dadurch eignet sich diese Form nicht für kleine Effektanimationen. Sie bietet sich jedoch für 'Dia-Shows' mit variablen Bildern an, etwa wenn eine Video-Kamera regelmäßig neue Grafiken erzeugt.

Angesichts von Telephonie und bald auch Video-Phonie per Internet sind solche Live-Dia-Shows längst nicht mehr die Bandbreitenkiller Nummer 1. Damit dem Besucher nicht die Lust am Schauen vergeht, sollte sich der Web-Designer dennoch vorsichtig zurückhalten und seinen 'Site' mit schlanken Bildern präsentieren. (rm)

[#anfang Seitenanfang]

---

Design-Plattform Linux?

Die weit verbreitete Meinung, daß Linux nicht als Plattform für kreative Tätigkeit geeignet ist, findet inzwischen keine Berechtigung mehr. Es gibt wenigstens zwei ausgezeichnete Freeware-Programme, die alle erdenklichen Funktionen zur Grafikbearbeitung bieten: das in der c't·5/96 vorgestellte Gimp und das umfangreiche ImageMagic.

ImageMagic setzt sich aus einer Fülle von Einzeltools zusammen. Unter einer einheitlichen Oberfläche kann man unter XWindow die verschiedensten Filter einsetzen und Konvertierungen vornehmen. In der Kommandozeile gehen die Möglichkeiten von ImageMagic jedoch noch weiter. Von interlaced GIF über progressive JPEG bis animated GIF und PNG (Portable Network Graphics) beherrscht es alle Funktionen.

Als Konvertierungsprogramm bietet sich aber auch noch das ständig weiterentwickelte XV an. Es arbeitet wesentlich schneller als die anderen Linux-Programme. Speziell für Animationen ist das XWindow- Programm XAnim gedacht. Damit lassen sich inzwischen alle verbreiteten Filmformate darstellen. Mit entsprechenden Plug-Ins kann Photoshop sowohl GIF89a als auch das noch wenig verbreitete PNG-Format bearbeiten und speichern.

[#anfang Seitenanfang]

---

Wunderwelt der Tabelle

Eine Grafik in einem Web-Dokument muß nicht zwangsläufig aus einem Guß bestehen. Gerade bei animierten GIFs empfiehlt es sich, die Grafik in mehrere Segmente aufzuteilen und in Form einer Tabelle auf der Web-Seite zusammenzusetzen. So erweckt man den Eindruck, daß das gesamte Bild animiert ist, bleibt aber in Hinsicht auf die Dateigröße bei einem erträglichen Maß.

Im abgedruckten Beispiel besteht die Grafik aus drei Teilen: einer normalen GIF-Datei mit der Schrift, drei Icons als transparente GIF-Bilder und einer GIF-Animation1. Man kann allerdings in einer Tabelle auch JPEG und GIF gemischt einsetzen. Dabei muß man darauf achten, daß die Farben übereinstimmen. Auch innerhalb einer Tabelle kann jedes Bild wie üblich mit Links hinterlegt werden.

Die [#k4 transparenten und animierten GIF-Icons] lassen sich auf den Folgeseiten dank der Tabelle auch ohne das Himmelsbild verwenden und schonen dadurch wiederum die Bandbreite.

[#anfang Seitenanfang]

---

Größtenteils unnütz

Vom Sinn und Unsinn zusätzlicher Dateiformate im Web Für viele Softwarehersteller bieten sich die Plug-In-Schnittstellen von Navigator, Explorer & Co als Möglickeit, eigene Produkte bekannt zu machen. Daher waren die ersten Plug-Ins solche, die dem Web- Publisher bestimmte Datenformate zugänglich machten. So gibt es von Adobe ein Plug-In für PDF- Dateien und von Corel eines für das eigene Vektorgrafikformat.

Das Problem bei der Verwendung von solcherlei Formaten innerhalb von Web-Dokumenten besteht allerdings in der mangelnden Verbreitung der Navigator-Plug-Ins bei den Benutzern. Spätestens nach dem fünften Hinweis, daß man leider nicht die richtige Erweiterung installiert hat, vergeht jedem Surfer die Lust, noch ein Plug-In aus dem Netz zu laden.

Da sich viele Plug-Ins nicht nur auf die Darstellung eines Formates beschränken, kommt es unter Umständen auch zu unangenehmen Effekten, wenn sich mehrere Erweiterungen um ein Bild streiten. Ein Totalabsturz bleibt hier oft nicht aus. Aber auch für den Web-Designer wird die Welt durch Plug-Ins nicht zwangsläufig einfacher. Zwar kann er nun beispielsweise Animationen, wie gehabt mit dem Macromedia Director erstellen und 'shocken' (mittels Shockwave in die Web-fähige Form bringen), aber er muß auch die Besucher berücksichtigen, die nicht gewillt sind, sich das entsprechende Plug-In zu laden.

Da es mit JavaScript die Möglichkeit gibt, die installierten Plug-Ins eines Browsers zu ermitteln, muß man als Designer inzwischen nicht nur zwischen Netscape von anderen Browsern unterscheiden, sondern auch noch alternative Seiten für Besucher mit Plug-In XY und solche ohne es erstellen.

Und dennoch...

Aus der Fülle der nützlichen wie zweifelhaften Browser-Erweiterungen ragt das Plug-In Fractal Viewer der Firma Iterated Systems heraus. Auf der Basis von Fraktalalgorithmen ermöglicht es eine höhere Kompression von Bilddaten als beispielsweise GIF oder JPEG. Die Qualität und Größe der Datei hängt aufgrund des Verfahrens wesentlich stärker vom Inhalt der Datei ab. Das Plug-In dekromprimiert die Datei noch während des Ladens, wobei es zu einer Verzögerung kommt, deren Länge von der Prozessorleistung und dem Motiv abhängt. Wie andere Plug-Ins ermöglicht auch Fractal Viewer neben dem bloßen Anzeigen von Bildern zusätzliche Funktionen. Vergrößerung und Drehen geschehen ohne Zeitverzug. Durch das Kompressionsverfahren lassen sich die Bilddaten sogar in eine höhere als die ursprüngliche Auflösung rechnen.

[#anfang Seitenanfang]

---

Wunderwelt der Tabelle