vorheriges KapitelInhaltsverzeichnisIndexInfoseitenächstes Kapitel


Bildformate

Farbe

Farbzuordnung

Bildkomprimierung

Transparente Hintergründe und Bild-Interlacing

Bilder erzeugen und einsetzen

Zukunftsaussichten: PNG

Weitere Informationen

Zusammenfassung

Fragen und Antworten



Tag 4


Kapitel 8 - Bilder fürs Web erzeugen

Sie glauben vielleicht, daß ich bereits im vorigen Kapitel alles über Bilder im Web gesagt habe. Ich habe dort zwar erklärt, wie man Bilder in HTML einsetzt, aber nur sehr wenig über die eigentlichen Bilder gesagt. Und beim Webseiten-Design hat die eigentliche Arbeit an den Abbildungen oft überhaupt nichts mit HTML zu tun, sondern mit Merkmalen und Tricks, die den Abbildungen zugefügt werden, bevor sie auf die Seite gelangen. In diesem Kapitel erhalten Sie eine genauere Beschreibung der grundlegenden Konzepte für Bilder im Web, unter anderem:



Bildformate

Ich habe bereits erwähnt, daß GIF bisher das einzige Format im Web war, das garantiert plattformunabhängig ist, d.h., es kann auf jedem Computersystem betrachtet werden. Mittlerweile hat sich einiges getan: JPEG-Dateien finden immer mehr Unterstützung im Web und sollten heute größtenteils zur Verfügung stehen. In diesem Abschnitt erhalten Sie einen kurzen Überblick über beide Formate. Das restliche Kapitel beschäftigt sich mit ihren Vor- und Nachteilen, so daß Ihnen die Entscheidung leichterfällt, welches Format Sie für Ihre Bilder verwenden.



GIF

GIF, auch CompuServe GIF, ist heute das verbreitetste Grafikformat im Web. GIF steht für Graphics-Interchange-Format. Es wurde von CompuServe entwickelt, weil man ein plattformunabhängiges Bildformat benötigte. GIF wird fast überall unterstützt. Deshalb sollte es möglich sein, Bilder im GIF-Format auf fast jedem Computer mit der entsprechenden Software zu betrachten.


GIF wird im Englischen so ähnlich ausgesprochen wie jiff, mit einer weichen Anfangssilbe, etwa wie Dschungel. So heißt es jedenfalls in der frühen Dokumentation der GIF-Werkzeuge.

Das GIF-Format umfaßt eigentlich zwei sehr ähnliche Bildformate: GIF87, das Original, und GIF89a, das Erweiterungen für Transparenz und Interlacing sowie für GIF-Bilder mit mehreren Einzelbildern enthält, die für einfache Animationen verwendet werden können. Sie werden später in diesem Kapitel etwas über Interlacing und Transparenz erfahren und über GIFs mit mehrfachen Rahmen etwas in Kapitel 9, »Externe Dateien, Multimedia und Animation«.


GIF-Dateien eignen sich ausgezeichnet für Logos, Icons, Strichzeichnungen und andere einfache Bilder. Weniger gut sind sie für Bilder mit vielen Details zu gebrauchen, weil das GIF-Format auf 256 Farben begrenzt ist. Fotos im GIF-Format sehen grobkörnig und fleckig aus.


Das größte Problem bei der Verwendung von GIF hat nichts mit seinen technischen Merkmalen zu tun. Das Problem ist, daß die dabei verwendete Komprimierungsform, LZW, patentiert ist. Unisys, Eigentümer des Patents, fordert, daß Entwickler, welche das GIF-Format nach 1994 verwenden, für jede Kopie eine Gebühr für die Verwendung von LZW zahlen. Das betrifft auch die Entwickler von Web-Browsern und die Leute, die Programme zur Bildverarbeitung schreiben. Aufgrund dieser Probleme hinsichtlich des LZW-Patents wird das GIF-Format in der Zukunft wahrscheinlich aus dem Web verschwinden und durch ein anderes, kostenloses plattformunabhängiges Format, wie z.B. PNG, das weiter unten beschrieben wird, ersetzt.



JPEG

Die naheliegendste Lösung für einen Ersatz von GIF ist momentan JPEG. JPEG steht für Joint Photographic Experts Group (das ist die Gruppe, in der es entwikkelt wurde). JPEG ist eigentlich eher ein Komprimierungstyp, den mehrere andere Dateiformate verwenden können. Aber das Dateiformat, für das er üblicherweise angewendet wird, nennt man ebenfalls JPEG. Man spricht es wie »Jay-Peg«.


JPEG wurde für das Speichern von Fotos ausgelegt. Anders als GIF können die JPEG-Bilder eine beliebige Anzahl Farben haben, und der Algorithmus für die Komprimierung ist insbesondere für die Muster geeignet, die man häufig auf Fotografien findet. Deshalb ist der Umfang der erzeugten Fotodateien wesentlich geringer, als sie mit GIF möglich sind. Andererseits ist dieser Komprimierungsalgorithmus nicht besonders gut für Strichzeichnungen oder Bilder mit großen Blöcken gleicher Farbe geeignet. Darüber hinaus wird hier die Komprimierung mit Verlust durchgeführt, das bedeutet, daß Teile des Bildes ignoriert werden, um es insgesamt kleiner zu machen.


JPEG-Dateien werden erst seit kurzem von vielen Browsern im World Wide Web unterstützt, und viele andere werden nachziehen.



Farbe

Wäre dies ein Buch über Farbtheorie, könnte ich hier auf das halbe Dutzend gebräuchlicher Modelle für die Beschreibung von Farben eingehen. Aber es handelt sich hier um ein Buch über das Web, und dieses Kapitel beschäftigt sich insbesondere mit den Bildern, die im Web angezeigt werden, deshalb muß ich nicht so weit ausholen (und Sie langweilen). Statt dessen stelle ich Ihnen die beiden wichtigsten Farbmodelle vor: das Modell, wie Sie und ich Farbe wahrnehmen, auch HSB (Hue, Saturation und Brightness, also Farbton, Sättigung und Helligkeit) genannt, und das Modell, wie Ihr Computer Farbe verarbeitet, auch RGB (für Rot, Grün und Blau) genannt. Mit dem grundlegenden Verständnis dieser beiden Farbmodelle sollten Sie in der Lage sein, die meisten Probleme, die Sie bei der Darstellung von Bildern im Web mit Farben haben, zu lösen.



Das HSB-Modell

Das HSB-Modell wird manchmal auch als subjektives Farbmodell oder Wahrnehmungsmodell bezeichnet, weil es intuitiv beschreibt, wie wir Farben sehen und welche Übergänge von einer Farbe in eine andere bestehen. Im HSB-Modell wird jede Farbe durch drei Zahlenwerte dargestellt, die den Farbton (Hue), die Sättigung (Saturation) sowie die Helligkeit (Brightness) beschreiben.


HSB steht für Hue (Farbton), Saturation (Sättigung) und Brightness (Helligkeit) und ist eine Methode, einzelne Farben so darzustellen, wie sie von uns Menschen wahrgenommen werden.

Der Farbton bezeichnet die eigentliche Farbe. Sie können sich dazu auch die Farbtuben eines Künstlers vorstellen: Rot, Blau, Gelb, Orange, Lila usw. sind Farbtöne. Es gibt jedoch auch ein gelbliches Orange oder ein bläuliches Grün. Der Farbton kann jede beliebige Farbe im Spektrum bezeichnen und wird zwischen 0 und 360 Grad an einem Farbrad gemessen. Dieses Farbrad beginnt mit Rot bei 360 Grad, es folgen Gelb bei 120 Grad und Blau bei 240 Grad, und alle anderen Farben liegen dazwischen (siehe Abbildung 8.1).


Der Farbton (Hue) ist die eigentliche Tönung der Farbe, mit der Sie arbeiten: z.B. Rot, Blau oder grünliches Gelb. Die Farbtonwerte reichen von 1 bis 360.

siehe Abbildung

Abbildung 8.1:
Farbtöne

Wenn Sie Weiß oder Schwarz mit einer anderen Farbe mischen, dann erhöhen bzw. verringern Sie die Helligkeit. Die Helligkeit wird als Prozentsatz angegeben, wobei 0 Weiß und 100 Schwarz bedeuten (siehe Abbildung 3.2).


siehe Abbildung

Abbildung 8.2:
Helligkeit

Helligkeit (Brightness) bezieht sich darauf, wie hell oder dunkel die Farbe ist. Die Helligkeit wird durch Hinzufügen von mehr Schwarz vermindert oder durch Hinzufügen von mehr Weiß erhöht. Die Helligkeitswerte reichen von 1 (Weiß) bis 100 (Schwarz).

Die Sättigung gibt die Intensität der verwendeten Farbe an - wieviel Farbe in der Mischung verwendet wird. Wenn Sie einen blauen Himmel mit ein bißchen blauer Farbe und ein bißchen weißer Farbe malen, dann könnten Sie mehr blaue Farbe hinzufügen, um die Sättigung zu erhöhen und den Himmel blauer zu machen. Die Sättigung wird ebenfalls als Prozentwert angegeben, wobei 0 keine Farbe, 100 volle Farbe bedeutet (siehe Abbildung 8.3).



siehe Abbildung

Abbildung 8.3:
Sättigung

Mit Hilfe des HSB-Modells können Sie jede beliebige Farbe darstellen. Was aber noch wichtiger ist: Sie können jede Farbe spezifizieren, indem Sie einfach die drei HSB-Zahlenwerte angeben. Darüber hinaus ist es ganz einfach, die Farben unter Verwendung des HSB-Modells zu verändern. Wenn Sie eine »Farbe heller machen« oder sie »mehr violett-bläulich machen« wollen, dann entspricht dies den jeweiligen Änderungen von Helligkeit und Farbton. Wenn Sie schon einmal eine Farbauswahltabelle auf dem Computer verwendet haben, wie etwa im Adobe Photoshop (siehe Abbildung 8.4), können Sie sich vielleicht erinnern, daß auch diese Auswahl auf dem HSB-Modell basiert (oder einem Modell ähnlichen Namens, wie: »HSL: Hue, Saturation and Lightness«).


siehe Abbildung

Abbildung 8.4:
Eine HSB-Farbauswahl in Photoshop


Rot, Grün und Blau (RGB)

Jetzt habe ich Ihnen lang und breit erklärt, wie Farben in HSB beschrieben werden, und werde nun alles wieder durcheinanderbringen: Wenn Sie mit Farben in Bildverarbeitungsprogrammen im Web zu tun haben, dann werden diese Farben größtenteils nicht mittels HSB dargestellt. Die meisten Bildverarbeitungsprogramme verwenden statt dessen RGB-Werte (Rot, Grün und Blau).


RGB beschreibt die Methode, wie die Computerbildschirme Farben darstellen. Wenn Sie ganz nahe an Ihren Bildschirm herangehen, sehen Sie, daß das, was wie einzelne Punkte aussieht, in Wirklichkeit Kombinationen aus roten, grünen und blauen Punkten sind, die durch den Elektronenstrahl für Rot, Grün und Blau in Ihrem Monitor erzeugt werden. Die Kombination dieser Punkte in unterschiedlicher Intensität erzeugt eine bestimmte Farbe auf Ihrem Bildschirm. Farbwerte werden dabei unter Verwendung von drei Zahlen (je eine für Rot, Grün und Blau) spezifiziert, die von 0 bis 255 reichen. 000 ist Schwarz, 255 255 255 ist Weiß, und dazwischen wird der gesamte Farbbereich (mehr als 16,7 Millionen Farben, das ist mehr, als das menschliche Auge unterscheiden kann) dargestellt.


RGB steht für Rot, Grün und Blau und ist eine Methode, Farbe darzustellen, die auf der Farbe von Lichtquellen basiert (z.B. Monitore). RGB-Werte haben drei Werte zwischen 0 und 255 (jeweils einen für Rot, Grün und Blau).

Auch wenn Sie auf diese Weise jede der 16,7 Millionen Farben als RGB-Wert darstellen können, zeigt Ihr Monitor oder Anzeigesystem (Grafikkarte) diese Farbe möglicherweise nicht ganz korrekt an. Die 16,7 Millionen Farben, die Sie mit den drei RGB-Werten repräsentieren, werden auch 24-Bit-Farben genannt (bei den RGB-Werten handelt es sich um drei 8-Bit-Werte, deshalb also insgesamt 24 Bit). Wenn Ihre Grafikkarte nur 8- oder 16-Bit-Farbe (256 bzw. 65.536 Farben) darstellen kann, versucht es, sich der geforderten Farbe mit den verfügbaren Farben so gut wie möglich anzunähern, oder es erzeugt ein Muster für die fehlende Farbe. Machen Sie sich keine Gedanken über die Unterschiede bezüglich der Möglichkeit der Farbdarstellung Ihres Monitors und den Farben im Bild: Grafikkarten und Bildschirme mit mehr Farben bringen höchstens feinere Farbabstufungen, aber keine völlig falsche Farbgebung.

Beachten Sie, daß Sie sowohl mit RGB als auch mit HSB die komplette Farbpalette darstellen können. Es handelt sich dabei nicht etwa um unterschiedliche Farben. Sie werden nur auf unterschiedliche Weise mathematisch beschrieben. Jede Farbe kann sowohl als RGB-Zahl als auch als HSB-Zahl dargestellt werden, und wenn Sie die eine in die andere umwandeln, erhalten Sie immer noch dieselbe Farbe. Es ist so, als ob Sie sich mit verschiedenen Maßbändern mit den Einheiten Inch, Zentimeter oder Fuß messen: Es werden unterschiedliche Skalen verwendet, aber unabhängig davon bleiben Sie immer gleich groß.


Warum habe ich mich also so lange mit HSB aufgehalten, wenn RGB so viel gebräuchlicher ist? Weil man sich in HSB die Farbänderungen besser vorstellen kann als in RGB. Sie sagen nämlich nicht: »Ich muß den Grünanteil in diesem Bild erhöhen« (das würde im RGB-Modell ein orangefarbeneres Rot ergeben, ob Sie es glauben oder nicht). Wenn Sie also mit Bildern arbeiten, dann stellen Sie sich die gewünschten Farben am besten in HSB-Darstellung vor. Beachten Sie jedoch, daß ein Programm immer nach den RGB-Werten fragt. Glücklicherweise können Sie in den meisten Programmen zur Farbauswahl sowohl RGB als auch HSB verwenden.



Bildformate und Farbtabellen

Sowohl GIF- als auch JPEG-Formate können Farben unter Verwendung von drei RGB-Werten zwischen 0 und 255 darstellen. Der wichtigste Unterschied zwischen den beiden Formaten ist jedoch, daß Bilder, die in einer GIF-Datei gespeichert sind, insgesamt nur 256 Farben enthalten können, während es JPEG-Bildern möglich ist, eine beliebige Anzahl Farben zu speichern.


Das GIF-Format speichert seine Farben in einer Farbtabelle mit Index. Eine Farbtabelle besteht aus einer Reihe von Einträgen, die jeweils eine einzelne RGB-Farbe enthalten. Die Farben für die einzelnen Pixel im Bild zeigen auf einen Eintrag in der Farbtabelle. Wenn Sie eine Farbe in der Tabelle ändern, werden alle Pixel im Bild, die auf diesen Eintrag gezeigt haben, verändert (siehe Abbildung 8.5).


siehe Abbildung

Abbildung 8.5:
Farbtabellen in GIF-Bildern

Eine Farbtabelle ist eine Tabelle aller Farben innerhalb eines Bildes, wobei jedes Pixel im Bild auf einen Eintrag in der Farbtabelle zeigt.


Das GIF-Format verwendet eine 256-Farben-Tabelle, das heißt, Sie können maximal 256 Farben für das Bild speichern. Wenn Sie ein Bild im GIF-Format konvertieren, müssen Sie in der Regel auch die Anzahl der im Bild verwendeten Farben auf 256 reduzieren (und wenn Ihr Bildverarbeitungsprogramm leistungsfähig genug ist, haben Sie sogar die Möglichkeit, selbst zu bestimmen, auf welche Farben verzichtet werden soll). Wenn Sie weniger als 256 Farben verwenden wollen, dann ist das eine ausgezeichnete Idee. Je weniger Farben Sie verwenden, desto kleiner wird die Datei.


Farbtabellen werden ganz unterschiedlich bezeichnet, als Farbtabelle, Farbindex, Palette, Indexfarbe oder CLUT (Color LookUp Table) oder LUT. Dabei handelt es sich immer um dasselbe - die Tabelle der Farben, die in Ihrem Bild zur Verfügung stehen. Ihr Bildverarbeitungsprogramm bietet Ihnen die Möglichkeit, die Farbtabelle für Ihr Bild anzusehen. Suchen Sie einfach nach einem Menüeintrag mit einem dieser Namen.

JPEG andererseits kann eine beliebige Anzahl von RGB-Farben darstellen, so daß Sie aus Millionen von Farben auswählen können. Die Reduzierung der Farbanzahl bringt in JPEG nicht viel, weil die Größe von JPEG-Dateien primär durch den Komprimierungsgrad, nicht durch die Anzahl der Farben bestimmt wird.



Übung 8.1: Farben in einem GIF-Bild reduzieren

Als ich begann, mit Bildern im Web zu arbeiten, hat mir jemand erzählt, daß die Datei kleiner wird, wenn ich die Anzahl der Farben in meinen Bildern reduziere. OK, dachte ich mir, das ist doch logisch. Aber wie reduziert man die Anzahl der Farben? Einfache Icons zeichnet man dann eben nur mit einigen wenigen Farben, aber für komplexere Bilder wie etwa Fotografien oder eingescannte Gemälde scheint die Farbreduktion eine mühselige Aufgabe zu sein.


Mit Hilfe einiger Freunde, die auf diesem Gebiet schon Erfahrung hatten, habe ich es dann herausgefunden. In dieser Übung zeige ich Ihnen die Vorgehensweise, wie man die Anzahl der Farben eines Bildes reduziert, so daß Sie sehen, worum es dabei eigentlich geht.


Für diese Prozedur verwende ich den Adobe Photoshop. Wenn Sie viel mit Bildern arbeiten, dann ist Photoshop das wohl geeignetste Werkzeug, und es steht für Macintosh-, Windows-, Sun- und SGI-Plattformen zur Verfügung. Wenn Sie ein anderes Programm benutzen, dann lesen Sie in der entsprechenden Dokumentation nach, ob es eine ähnliche Prozedur zur Reduktion der Farben eines Bildes bietet.

Wir beginnen mit einer RGB-Zeichnung einer pinkfarbenen Rose (siehe Abbildung 8.6), mit vielen Pink- und Grünschattierungen. (Hier sehen Sie das Pink und das Grün nicht, aber stellen Sie es sich einfach vor.)


siehe Abbildung

Abbildung 8.6:
Die pinkfarbene Rose

Der erste Schritt ist, das Bild in eine Farbtabelle umzuwandeln, als Vorbereitung darauf, eine GIF-Datei daraus zu machen. Wenn wir Glück haben, gibt es nicht mehr als 256 Farben, dann ist die Aufgabe ganz einfach.


In Photoshop wählen Sie dazu den Menüeintrag Indexed Color aus dem Mode-Menü aus, so daß Sie das in Abbildung 8.7 gezeigte Dialogfeld erhalten.


siehe Abbildung

Abbildung 8.7:
Das Dialogfeld »Indexed-Color« in Photoshop

Wenn das Bild weniger als 256 Farben enthält, wird die tatsächliche Anzahl im Feld Resolution unter dem Eintrag Other aufgelistet. Enthält Ihr Bild bereits weniger als 256 Farben, sollten Sie diese Farben unter allen Umständen verwenden. Andernfalls müssen Sie einige davon entfernen. Bei unserer pinkfarbenen Rose hatten wir kein Glück. Im Feld Other ist kein Eintrag enthalten, also enthält das Bild mehr als 256 Farben. Schade.


Um die Anzahl der Farben zu reduzieren, wählen Sie eines der Optionsfelder im Feld Resolution. Je weniger Bits pro Pixel verwendet werden, desto weniger Farben haben Sie. In Tabelle 8.1 erhalten Sie einen kurzen Überblick.


Tabelle 8.1: Anzahl der Farben

Auswahl

Farben

3 Bit/Pixel

8

4 Bit/Pixel

16

5 Bit/Pixel

32

6 Bit/Pixel

64

7 Bit/Pixel

128

8 Bit/Pixel

256

Beachten Sie, daß jede Farbe immer noch eine vollständige RGB-Farbe darstellt, so daß die verfügbare Farbmenge, aus der Sie auswählen können, im Gegensatz zur Anzahl der Farben nicht begrenzt ist. Sie können also ein Bild mit 256 unterschiedlichen Pinkschattierungen haben, wenn Sie das wollen.


Da es besser ist, mit weniger Farben zu arbeiten, wollen wir versuchen, sie auf ein Minimum zu reduzieren - drei Bit pro Pixel oder acht Farben insgesamt. Bei der Farbreduktion fragt Photoshop Sie, welche Palette (so nennt Photoshop die Farbtabelle) und welche Dithering-Option Sie verwenden wollen. Dithering ist eine Methode der Farbreduzierung innerhalb eines Bildes, bei der Muster verfügbarer Farben erzeugt werden, die, wenn sie zusammen betrachtet werden, wie die Originalfarbe aussehen (z.B. ein schwarzweißes Schachbrettmuster, um einen grauen Farbton zu simulieren). Größtenteils wählen Sie eine adaptive Palette (Adaptive Palette) (die die Farben in der Palette gewichtet, abhängig davon, wie oft sie im Originalbild verwendet werden) sowie ein diffuses Dithering (Diffusion Dither) (so daß ein möglichst einheitliches Dithering für die fehlenden Farben entsteht).


Wenn Sie das Glück haben, daß in einem Bild weniger als 256 Farben verwendet werden, verwenden Sie statt Adaptive Palette die Exact Palette.

Nach der Auswahl von OK werden die Farben konvertiert und gedithert, und das neue Bild entsteht. In Abbildung 8.8 sehen Sie das Originalbild auf der rechten Seite, so daß Sie vergleichen können.


siehe Abbildung

Abbildung 8.8:
Das neue Bild (3 Bit pro Pixel)

Mit nur acht Farben gehen viele Details aus dem Original verloren. Die Adern in den Blättern sind nicht mehr sichtbar, und die Rose ist nur noch ein pinkfarbener Fleck mit einigen schwarzen und weißen Highlights.


Aber es ist nicht alles verloren. Machen Sie einfach nur den letzten Schritt rückgängig, und wechseln Sie wieder zur RGB-Farbe. Wandeln Sie das Bild nicht im Mode-Menü in RGB zurück. Beim Konvertieren in acht Farben gingen die Originaldaten verloren. Verwenden Sie statt dessen »Undo«.


Versuchen Sie es jetzt mit 4 Bit pro Pixel, und erhöhen Sie die Farbanzahl langsam, bis die Bildqualität Ihren Vorstellungen entspricht. Natürlich sind für ein hochqualitatives Bild 8 Bit pro Pixel notwendig, aber vielleicht erhalten Sie ja auch mit 5 oder 6 Bit pro Pixel noch passable Ergebnisse.


Für diese Rose habe ich schließlich 5 Bit pro Pixel verwendet und 32 Farben erhalten, aus denen ich auswählen konnte. Das Bild sieht immer noch ein bißchen verschwommen aus, aber die Qualität ist ganz in Ordnung. Abbildung 8.9 zeigt das Ergebnis (zum Vergleich sehen Sie auf der rechten Seite das Originalbild).


siehe Abbildung

Abbildung 8.9:
Das endgültige Bild (5 Bit pro Pixel)

Vielleicht sind Sie an den Dateigrößen vorher und nachher interessiert. Das Rosenbild mit 256 Farben belegte 10,5 Kbyte. Die Version mit nur acht Farben belegte gerade 3 Kbyte (wow!). Die endgültige Version - die mit den 32 Farben - stellt einen sinnvollen Mittelwert mit 6 Kbyte dar. Obwohl der Unterschied von drei oder vier Kbyte sehr trivial erscheint, kann es sich lohnen, diese Kapazität gespart zu haben, wenn man viele Bilder auf einer Seite verwendet und dann doch einen Unterschied beim Herunterladen bemerkt.



Farbzuordnung

Selbst wenn Sie die Farben in Ihren GIF-Bildern reduzieren und dabei eine zufriedenstellende Bildqualität beibehalten können oder wenn Sie JPEG-Bilder verwenden, so daß Sie sich nicht mehr um die Farbreduktion kümmern müssen, kann es auf einigen Plattformen und einigen Seiten zu unschönen Überraschungen kommen. Einige Ihrer Bilder erscheinen möglicherweise in völlig falschen Farben oder sind einfach unansehnlich. Was ist passiert?


Das ist größtenteils ein Problem mit der Farbzuordnung auf der Plattform, auf der Ihr Bild angezeigt werden soll. Auf einigen Systemen sind Grafikkarte oder Anzeigesystem möglicherweise auf eine einzige Farbtabelle beschränkt. Das heißt, für alle auf dem System laufenden Applikationen steht nur eine begrenzte Anzahl Farben zur Verfügung (normalerweise 256). Und die Einträge in der Tabelle werden auf der Basis »wer zuerst kommt, mahlt zuerst« zugeordnet.


Angenommen, Sie wollen auf Ihrer Webseite zwei Bilder anzeigen: eines, das eine 256-Farben-Tabelle mit vorwiegend pinkfarbenen Farbtönen verwendet, und eines (ebenfalls mit 256 Farben), das vorwiegend blaue Farbtöne enthält. Ihr Web-Browser stellt lediglich 256 Einträge zur Verfügung, aber für Ihre Bilder sind insgesamt 512 Farben erforderlich. Was kann der Browser tun? Abhängig davon, welchen Browser Sie einsetzen, zeigt er möglicherweise das erste Bild korrekt an und versucht dann, etwaige freie Farbeinträge für das zweite Bild zuzuordnen. Vielleicht versucht er auch, die beiden Farbtabellen zu einem Zwischending zu kombinieren (eine Art Lavendelblau für beide Bilder). Es ist jedoch auch möglich, daß er für das zweite Bild einfach die erste Farbtabelle verwendet (so daß das zweite Bild auch pinkfarben dargestellt wird). Je mehr Bilder und Farben Sie auf einer Seite verwenden, desto wahrscheinlicher wird es, daß Leser mit Systemen, die nur eine begrenzte Anzahl von Farben darstellen können, Probleme bei der Anzeige haben.


Es gibt jedoch zwei Möglichkeiten, die Probleme bei der Farbzuordnung zu umgehen und damit die Wahrscheinlichkeit zu erhöhen, daß Ihre Farben korrekt angezeigt werden.


Eine Methode ist, sicherzustellen, daß die Gesamtzahl aller Farben in den Bildern auf Ihrer Seite 256 nicht überschreitet. Wenn Sie beispielsweise vier Bilder derselben Größe mit je 50 Farben verwenden, können Sie nur 200 Farben aufnehmen. Folgen Sie der in der vorigen Übung vorgestellten Prozedur, um die Anzahl der Farben in den einzelnen Bildern zu reduzieren.


Alternativ könnten Sie auch eine einzige Farbtabelle für alle Bilder auf der Seite einsetzen. Dazu verwenden Sie Photoshop etwa in der folgenden Weise:


1. Erzeugen Sie ein großes Dokument, und kopieren Sie alle gewünschten Bilder für Ihre Seite auf diese Vorlage.


2. Konvertieren Sie das große Bild in indizierte Farben um, wozu Sie so viele Farben wie nötig einsetzen (maximal 256). Gehen Sie wie im vorigen Abschnitt beschrieben vor.


3. Wählen Sie im Mode-Menü den Eintrag Color Table. Sie sehen die Farbtabelle für das große Dokument, die gleichzeitig die kombinierte Farbtabelle für die kleineren Bilder darstellt.


4. Speichern Sie die Farbtabelle.


5. Öffnen Sie die einzelnen Bilder, und konvertieren Sie sie in indizierte Farben (die Anzahl der Farben ist dabei nicht von Bedeutung).


6. Wählen Sie im Mode-Menü den Eintrag Color Table, und laden Sie Ihre gespeicherte globale Farbtabelle.


7. Speichern Sie die einzelnen Bilder mit der neuen globalen Farbtabelle.



Bildkomprimierung

Wenn Sie ein 24-Bit-Farb-Bitmap-Bild als Liste der Pixel von der obersten bis zur untersten Zeile beschreiben, wobei jedes Pixel durch drei RGB-Werte dargestellt wird, erhalten Sie enorm große Zahlen und riesige Dateien. Je größer eine Datei ist, desto schwieriger ist es, das Bild zu speichern und zu verwalten. Hier kommt die Bildkomprimierung ins Spiel. Komprimierung macht ein Bild kleiner (die Datenmenge, nicht die Anzeige). Es belegt also weniger Platz auf Ihrer Platte, ist weniger schwierig zu verarbeiten, und es dauert (bei Web-Bildern) nicht so lange, sie über das Netz zu übertragen. In diesem Abschnitt erfahren Sie, wie die GIF- und JPEG-Dateien die Komprimierung realisieren und welche Dateien dafür jeweils am besten geeignet sind.



Grundlagen der Komprimierung

Die meisten gebräuchlichen Bildformate haben die eine oder andere festgelegte Komprimierung, so daß Sie die Bilder nicht selbst komprimieren müssen. Das Bildformat und die entsprechenden Programme erledigen alles für Sie. Verschiedene Bildformate verwenden unterschiedliche Komprimierungsmethoden, die die Dateien unterschiedlich stark verkleinern, je nachdem, welche Bilder Ihnen vorliegen. Eine Form der Komprimierung ist möglicherweise ausgezeichnet für Bilder mit wenigen Farben und vielen geraden Linien geeignet, aber weniger gut für Fotos. Für eine andere Komprimierung gilt vielleicht genau das Gegenteil.


Einige Komprimierungsformen erzeugen wirklich kleine Dateien aus Bildern, indem sie bestimmte Informationen aus dem Originalbild verwerfen. Dabei werden nicht wahllos Pixel entfernt. (Stellen Sie sich vor, wie dieses Buch aussähe, wenn Sie jedes zweite Wort löschen würden, dann wissen Sie auch, wie gut so eine Komprimierungsmethode wäre.) Die Komprimierung mit Verlust, wie sie auch genannt wird, basiert auf der Theorie, daß in einem Bild Details und Abstufungen enthalten sind, die zu klein sind, als daß sie das menschliche Auge wahrnehmen könnte. Und wenn Sie den Unterschied zwischen zwei Bildabschnitten nicht erkennen, dann müssen Sie sie auch nicht beide in der Datei abspeichern. Behalten Sie einen der beiden Abschnitte, und merken Sie sich, daß es ursprünglich zwei davon gab. Auf diese Weise entstehen sehr kleine Dateien, aber weil Sie bei der Komprimierung Informationen verlieren, leidet die Gesamtqualität des Bildes.


Verlustreiche Komprimierung läßt Teile des Bildes wegfallen, die das Komprimierungsprogramm für unwichtig erachtet. Verlustreiche Komprimierung hat eine Verminderung der Bildqualität zur Folge.

Als Gegensatz zur Komprimierung mit Verlust steht die verlustlose Komprimierung, die keinerlei Informationen aus der Originaldatei verwirft. Wenn Sie zwei Bilder haben und die verlustreiche Kompression verwenden, erhalten Sie nach dem Komprimieren und Dekomprimieren zwei Bilder, die nicht identisch sind. Bei der verlustlosen Komprimierung bleiben die Bilder selbst nach der Komprimierung und Dekomprimierung gleich.


Verlustlose Komprimierung ist eine Komprimierungsform, die keinerlei Informationen vom Originalbild verliert. Als Komprimierungsmethode ist sie weniger effektiv als verlustreiche Komprimierung, führt jedoch zu keiner Verminderung der Bildqualität.


Komprimierung in GIF- und JPEG-Dateien

Das ist ja alles schön und gut, werden Sie sagen. Sie können jetzt Ihre Freunde auf der Party mit Ihrem Wissen über die verlustlose und die verlustbehaftete Komprimierung beeindrucken. Aber was bedeutet das für Ihre Bilddateien und das World Wide Web?


GIF und JPEG verwenden unterschiedliche Komprimierungsformen, die mit verschiedenen Bildarten unterschiedlich zusammenarbeiten. Abhängig von dem bearbeiteten Bild, der notwendigen Qualität und der gewünschten Größe sollten Sie das jeweils am besten geeignete Format einsetzen.


GIF-Bilder verwenden eine Form der verlustlosen Komprimierung, LZW genannt, nach ihren Entwicklern, Lempel, Ziv und Welch. Die LZW-Komprimierung sucht sich wiederholende Pixel-Muster in einem Bild (Pixel mit den gleichen Farbwerten, die nebeneinanderliegen). Je mehr Muster wiederholt werden, desto besser arbeitet die Komprimierung. Bilder mit großen Farbblöcken wie etwa Icons oder Strichzeichnungen sind also ausgezeichnete GIF-Dateien, weil sie gut komprimiert werden können. Eingescannte Bilder wie etwa Fotos dagegen weisen weniger konsistente Muster auf und werden deshalb auch nicht so gut komprimiert.


Man sagt, JPEG sei in der Lage, kleinere Dateien als GIF zu erzeugen, und für viele Bilder trifft das auch zu. JPEG-Dateien verwenden den JPEG-Komprimieralgorithmus, der Pixel-Gruppen auf Variationen hin untersucht und dann statt der Pixel diese Variationen abspeichert. Für Bilder mit vielen Pixel-Variationen, wie etwa Fotos, ist JPEG besonders gut geeignet. Für Bilder mit großen Blöcken gleicher Farben funktioniert es dagegen nicht so gut (und nicht zu vergessen, in einen Block zuvor durchgängiger Farben können Variationen eingefügt werden). Die Regel, daß JPEG-Dateien kleiner sind als GIF-Dateien trifft also nicht immer zu. Für Logos, Icons und Dateien mit wenigen Farben ist GIF besser geeignet.


JPEG komprimiert mit Verlust, d.h., es verwirft bestimmte Informationen aus dem Bild. Wenn Sie ein Bild mit JPEG speichern, können Sie dabei angeben, wieviel Verlust Sie erlauben, von verlustlos bis zu hohem Verlust. Je mehr Verlust Sie für die Komprimierung akzeptieren, desto kleiner wird die resultierende Datei, aber desto schlechter wird auch das Bild. Extrem komprimierte JPEG-Dateien sehen fleckig oder grob gekörnt aus, was der dabei eingesparte Platz nicht rechtfertigt.



Anzeige komprimierter Dateien

Eine komprimierte Datei kann erst angezeigt werden, nachdem sie dekomprimiert wurde. Programme, die Bilddateien lesen und anzeigen, etwa Ihr Bildbearbeitunsprogramm oder Ihr Web-Browser, dekomprimieren Ihr Bild und zeigen es erst dann an. Wie lange es dauert, das Bild zu dekomprimieren, ist abhängig davon, welche Komprimierungsart verwendet wurde und wie leistungsfähig Ihr Computer ist.


Im Vergleich zu GIF-Dateien dauert es wesentlich länger, JPEG-Dateien zu dekomprimieren und anzuzeigen, weil JPEG eine sehr viel komplexere Komprimierungsform darstellt. Wenn Sie einen schnellen Computer haben, merken Sie wahrscheinlich nicht viel Unterschied. Denken Sie jedoch an die Leser Ihrer Webseiten. Sie haben durch die Verwendung von JPEG statt GIF möglicherweise etwas Speicherplatz gespart (und damit auch Ladezeit), aber die Dekomprimierung und Anzeige eines JPEG-Bildes kann diese Zeitersparnis auf einem langsameren Computer wieder zunichte machen.



Übung 8.2: Verschiedene Formate und verschiedene Komprimierungsarten

All diese Informationen über die Komprimierung waren recht theoretisch, und Sie verstehen vielleicht noch nicht genau, was sie für Sie bedeuten. Hier wollen wir nun einige Beispiele mit echten Bildern betrachten, so daß Sie den Unterschied zwischen der GIF- und der JPEG-Komprimierung kennenlernen. In diesem Beispiel verwende ich zwei Bilder: ein Logo mit nur wenigen Farben und ein Foto mit Tausenden von Farben. Beide haben dieselbe Größe und dieselbe Auflösung (100x100 Pixel bei 72 dpi), und beim Speichern als Rohdaten (d.h., als nichtkomprimierte Liste von Pixeln, jedes dargestellt durch einen RGB-Wert) belegen beide 109.443 Byte (110 Kbyte).


Zuerst betrachten wir das Logo. Ich verwende dazu wieder Photoshop. Ihr Bildverarbeitungsprogramm unterscheidet sich möglicherweise davon. Abbildung 3.10 zeigt das Original-Logo, eine stilisierte Blume.


siehe Abbildung

Abbildung 8.10:
Das Original-Logo

Als erstes mußte ich das Bild in Indexfarben umwandeln, bevor ich es speichern konnte, aber es verwendet nur sieben Farben, so daß das relativ einfach war. Beim Speichern als GIF-Bild belegt die Datei 2944 Byte (das sind 3 Kbyte)!


Wir haben also eine Komprimierung von über 97 Prozent geschafft! Man sagt auch, die Komprimierungsrate beträgt 30:1, d.h., die Originaldatei war 30mal größer als die komprimierte Datei. Da die LZW-Komprimierung nach wiederholten Mustern sucht (von denen es in diesem Bild mit den großen Farbblöcken sehr viele gibt), war eine relativ gute Komprimierungsrate zu erwarten. Und da GIF die verlustlose Komprimierung verwendet, ist die GIF-Datei identisch mit dem Original-Logo.


Nun wollen wir JPEG ausprobieren. Wenn Sie das Logo als JPEG-Bild speichern, zeigt Photoshop ein Dialogfeld an, in dem Sie spezifizieren können, wieviel Komprimierung Sie wollen (siehe Abbildung 8.11).


siehe Abbildung

Abbildung 8.11:
JPEG-Komprimierung in Photoshop

Ich habe das Bild dreimal als JPEG-Datei gespeichert, jeweils mit unterschiedlicher Komprimierung und Bildqualität - einmal mit den Maximalwerten am Ende der Skala und einmal in der Mitte.


Das erste Bild wurde mit ausgezeichneter Komprimierung (Excellent) und akzeptabler Qualität (Fair) gespeichert. Für diese Einstellung resultierte eine Dateigröße von 6 Kbyte, das sind etwa 95% Einsparung (eine Komprimierungsrate von 20:1), aber immer noch nicht so gut wie mit GIF (der Unterschied zwischen 3 Kbyte und 6 Kbyte ist jedoch unwesentlich). Die zweite JPEG-Datei wurde mit guter Komprimierung (Good) und guter Bildqualität (Good) gespeichert, und die letzte mit ausgezeichneter Bildqualität (Excellent) und akzeptabler Komprimierung (Fair). Die resultierende Dateigröße betrug 19 Kbyte (ein Gewinn von 83%, 7:1) bzw. 60 Kbyte (ein Gewinn von 45%, 2,5:1). Im Vergleich zu GIF also eher schlecht.


Die Auswertung der Bildqualität machte es noch deutlicher, insbesondere für die erste JPEG-Datei. Abbildung 8.12 zeigt das Ergebnis der drei Bilder.


siehe Abbildung

Abbildung 8.12:
Das Logo aus den drei JPEG-Dateien

Das linke Bild war dasjenige, für das wir in etwa dieselbe Komprimierungsrate wie bei GIF erzielen konnten. Es ist mehr oder weniger unbrauchbar. Die JPEG-Komprimierung hat ein grobkörniges, verschwommenes Bild mit seltsamen Mustern außerhalb des eigentlichen Bildes erzeugt. Als Logo ist es nicht geeignet.


Die beiden anderen Bilder sehen schon viel besser aus. Aber GIF, das die kleinste Datei erzeugt und keinerlei Informationen verloren hat, ist hier der klare Gewinner.


Nun wollen wir das Foto betrachten - mein schönstes Pinguin-Bild (siehe Abbildung 8.13). Wie das Logo umfaßt das Bild 100x100 Pixel, und die Rohdaten belegen 109.443 Byte.


siehe Abbildung

Abbildung 8.13:
Das Originalfoto

Um das Bild in eine GIF-Datei umzuwandeln, müssen wir es zunächst zu einem Indexfarbbild machen. Aufgrund der vielen Farben in diesem Bild speichern wir es mit der maximalen Farbanzahl (8 Bit pro Pixel, also 256 Farben), wobei die Farbtabelle mit den häufigsten Farben aus dem Bild gefüllt und die restlichen Farben durch Dithering gebildet werden.


Die resultierende GIF-Datei ist 26.298 Byte (26 Kbyte) groß, das bedeutet einen Gewinn von 76%, also eine Komprimierungsrate von 4:1. Das ist nicht ganz so gut wie beim Logo, aber auch nicht besorgniserregend.


Jetzt weiter zu JPEG, wo wir wesentlich bessere Resultate erzielen sollten. Wieder habe ich drei Dateien mit unterschiedlichen Komprimierungsraten erzeugt und dabei die folgenden Dateigrößen erhalten:


Selbst das JPEG-Bild mit ausgezeichneter Bildqualität, bei dem nur sehr wenige Informationen verworfen werden, erzeugt eine kleinere Datei als die GIF-Datei für dasselbe Bild. JPEG ist also für Fotos und Bilder mit vielen Farben und Details auf alle Fälle zu bevorzugen.


In Abbildung 8.14 können Sie die resultierende Bildqualität vergleichen.


siehe Abbildung

Abbildung 8.14:
Das Foto, dargestellt als JPEG-Bilder

Obwohl der Unterschied zwischen diesen drei Bildern auf dem Monitor zu erkennen ist, ist dasjenige mit der akzeptablen Bildqualität noch recht brauchbar. Da Sie mit einer weniger erkennbaren Abstufung im Bild eine kleinere Datei erhalten (in diesem Fall ist das die mittlere), ist entweder das mittlere oder das rechte Bild eine gute Wahl, und beide sind besser als GIF.


Experimentieren Sie mit Ihren eigenen Bildern, um zu sehen, welche Einsparungen Sie mit den einzelnen Formaten erzielen können.



Transparente Hintergründe und Bild-Interlacing

Zusätzlich zu den Farb- und Komprimierungsmerkmalen von GIF- und JPEG-Bilddateien gibt es noch verschiedene optionale Fähigkeiten der GIF- und JPEG-Dateien, die unterschiedliche Effekte hervorbringen, wenn diese Bilder auf Ihren Webseiten dargestellt werden, und zwar unter anderem transparente Hintergründe und Interlace-Bilder.



Transparenz

Transparente GIF-Bilder haben einen unsichtbaren Hintergrund, so daß die Farbe (oder das Muster) des Seitenhintergrundes durchscheinen und dem Bild die Erscheinung geben, auf der Seite zu schweben. Abbildung 8.15 zeigt den Unterschied zwischen einem normalen und einem transparenten GIF.


siehe Abbildung

Abbildung 8.15:
Normale und transparente Hintergründe

Transparenz ist eine Fähigkeit neuerer GIF-Dateien (namens GIF89a-Format). Es ist für JPEG-Dateien oder für GIF-Dateien im älteren GIF87-Format nicht verfügbar. Um so eine GIF-Datei mit transparentem Hintergrund zu erschaffen, brauchen Sie ein Werkzeug oder Programm, das transparente Hintergründe kreieren kann. Ich werde Programme, die dazu in der Lage sind, später in diesem Kapitel besprechen.


Transparenz ist ein Merkmal von GIF-Dateien, daß es dem Hintergrund eines Bildes erlaubt, farblos zu bleiben; die Farbe oder das Muster, die sich hinter dem transparenten Bild befinden, scheinen durch die durchsichtigen Teile des vorderen Bildes durch.

Bevor Sie das Bild umwandeln können, brauchen Sie jedoch ein Bild mit einem passenden Hintergrund. Die Bilder, die sich am besten umwandeln lassen, haben einen durchsichtigen Hintergrund oder sind Bildsymbole oder von anderer einfacher Art, wobei sich das Bild und der Hintergrund voneinander unterscheiden (siehe Abbildung 8.16). Obwohl Sie Fotos mit transparenten Hintergründen verwenden können, kann das Resultat weniger schön sein, wenn die Trennlinie zwischen dem Bild und seinem Hintergrund nicht eindeutig ist.


siehe Abbildung

Abbildung 8.16:
Gute und schlechte Bilder für transparente Hintergründe

Sie sollten sich vergewissern, daß der Hintergrund aus einer einzigen Farbe besteht. Wenn der Hintergrund aus verschiedenen Farben besteht, die sich einigermaßen ähnlich, aber nicht identisch sind (wie z.B. in einem Foto), dann wird nur eine dieser Farben durchsichtig werden.


Sie können den Hintergrund Ihres Bildes mit einem beliebigen Bildverarbeitungsprogramm isolieren. Bearbeiten Sie einfach die Pixel des Hintergrunds, bis sie alle exakt die gleiche Farbe haben. Achten Sie auch darauf, daß die Farbe, die Sie für den Hintergrund verwenden, nicht auch schon ausgiebig im Vordergrund des Bildes verwendet wird, da diese Farbe dann auch dort transparent sein wird.


Auch wenn Sie ein GIF-Bild ins richtige Format mit einem transparenten Hintergrund gebracht haben, werden einige Browser, die das GIF89-Format nicht verstehen, nicht dazu in der Lage sein, das Bild darzustellen, oder sie werden es mit einem undurchsichtigen Hintergrund darstellen. Transparente GIFs sind immer noch ein neues Phänomen, und volle Unterstützung ist für sie noch nicht selbstverständlich.


GIF-Interlacing

Anders als die Transparenz verändert das Interlacing die Darstellung des Bildes auf der Seite nicht. Statt dessen beeinflußt es, wie das Bild gespeichert wird und wie es während des Ladens aussieht. Wenn das Bild über das Netz kommt, scheint es manchmal, als ob es langsam eingeblendet wird oder als ob es zunächst eine niedrige Auflösung hat und dann immer klarer wird. Um diesen Effekt zu erzeugen, müssen Sie Ihre GIF-Datei im Interlacing-Format speichern und dann einen Web-Browser wie etwa Netscape verwenden, der die Datei während des Ladens anzeigen kann.


GIF-Interlacing ist eine Methode, GIF-Dateien zu speichern, so daß sie anders als normale GIF-Dateien dargestellt werden. Interlace GIFs scheinen langsam eingeblendet zu werden, anstatt sich von oben nach unten auf dem Bildschirm aufzubauen.

Normalerweise wird eine GIF-Datei zeilenweise gespeichert (die Zeilen werden tatsächlich als Scan-Zeilen bezeichnet), und zwar von oben nach unten (siehe Abbildung 8.17). Wenn Ihr Browser GIF-Dateien während des Ladens anzeigen kann (wie etwa Netscape), sehen Sie zuerst die erste Zeile und sukzessive alle folgenden Zeilen, sobald sie auf Ihrem System eintreffen.


siehe Abbildung

Abbildung 8.17:
Normal gespeicherte GIF-Datei

Das Interlacing sorgt dafür, daß das GIF-Bild anders abgespeichert wird. Statt die einzelnen Zeilen hintereinander zu speichern, wird eine GIF-Datei mit Interlacing schrittweise gespeichert, wobei jeweils jede achte Zeile gespeichert wird, beginnend bei der ersten, gefolgt von jeder achten beginnend bei der vierten, gefolgt von jeder vierten, beginnend bei der dritten und dann die restlichen Zeilen (siehe Abbildung 8.18).


Bei der Anzeige dieser GIF-Datei werden die Zeilen so geladen, wie sie gespeichert wurden: die erste Zeilenmenge, dann die zweite Menge usw. Abhängig vom verwendeten Browser kann das einen »Jalousien«-Effekt erzeugen. Oder (wie in Netscape) die fehlenden Zeilen werden mit der Information aus den bereits vorhandenen Zeilen gefüllt, so daß ein verschwommener oder blockartiger Effekt entsteht (wie in Abbildung 8.19 gezeigt), der nach und nach klarer wird, wenn mehr von dem Bild erscheint.


Falls Ihr Browser keine GIF-Dateien mit Interlacing unterstützt oder wenn der Browser mit der Anzeige wartet, bis die gesamte Datei geladen ist, sehen Sie den Interlacing-Effekt nicht, aber Ihr Bild wird trotzdem richtig dargestellt. Das Interlacing zerstört das GIF-Bild für andere Browser nicht; es betrifft nur die Browser, die seine Vorteile nutzen können.


siehe Abbildung

Abbildung 8.18:
Mit Interlacing gespeicherte GIF-Dateien

siehe Abbildung

Abbildung 8.19:
Mit Interlacing gespeicherte GIF-Datei beim Ladevorgang

Das Interlacing ist am besten für große Bilder geeignet, deren Ladevorgang relativ lange dauert. Mit Hilfe des Interlacing-Effekts erhalten Ihre Leser einen Eindruck vom endgültigen Bild, noch bevor es fertig geladen ist. Damit können Sie den Ladevorgang unterbrechen, wenn Sie nicht an dem Bild interessiert sind, oder, wenn es sich um einen Abbildungsplan handelt, auf die entsprechende Stelle klicken und sich weiterbewegen.


Für kleinere Dateien wie etwa Icons oder kleine Logos dagegen spielt das Interlacing keine Rolle. Kleine Bilder werden so schnell geladen, daß das Interlacing erst gar nicht sichtbar wird.



Progressives JPEG

Das Konzept von progressivem JPEG ähnelt dem von GIF-Interlacing sehr. Progressive JPEG-Dateien werden auf spezielle Weise gespeichert, so daß sie in fortschreitend detaillierter Weise dargestellt werden, wenn sie geladen werden. Und wie bei den GIF-Dateien, die Interlacing einsetzen, brauchen Sie spezielle Programme, um diese Dateien zu erstellen.


Der wichtigste Unterschied zwischen progressiven JPEG-Dateien und Dateien, die GIF-Interlacing verwenden, tritt bei älteren Browsern und Werkzeugen zu Tage. Anders als bei den Dateien mit GIF-Interlacing, die noch in älteren Browsern oder solchen, die das ältere GIF87-Format unterstützen, gelesen werden können, sind progressive JPEGs nicht abwärtskompatibel. Obwohl ein grober Überblick über die Browser zeigt, daß es nur wenige gibt, die progressive JPEGs überhaupt nicht darstellen können, gibt es doch einige. Wenn Sie also progressive JPEGs verwenden wollen, behalten Sie diese Unverträglichkeit im Hinterkopf.



Werkzeuge zum Erzeugen von GIF-Dateien mit Interlacing und Transparenz

Viele Bildverarbeitungsprogramme ermöglichen es Ihnen, GIF-Dateien mit Interlacing und/oder Transparenz, sowie JPEGs als progressive JPEGs abzuspeichern. Wenn das in Ihrem Programm nicht möglich ist, sollten Sie mit dem Hersteller Verbindung aufnehmen. Interlacing und Transparenz für GIF-Dateien werden immer häufiger verwendet, vielleicht gibt es ja schon eine neuere Version Ihres Programms, das diese Funktionen unterstützt.


Viele dieser Programme zur Erzeugung von Interlace- bzw. Transparent-Bildern sind auf der CD-ROM enthalten, die diesem Buch beiliegt.

Unter Windows gibt es ein großartiges Shareware-Programm, LView Pro, das Sie auf fast jedem Site erhalten können, der Shareware-Programme verteilt (mir persönlich gefällt http:// www.shareware. com/). Mit Hilfe von LView Pro können Sie GIF-Dateien mit Transparenz und Interlacing erzeugen, und die neueste Version (1.C) ermöglicht es Ihnen, progressive JPEG-Dateien herzustellen. (Beachten Sie, daß 1.B nur auf Windows 3.1 läuft; 1.C läuft nur auf Windows 95 und NT.)


Für den Mac gibt es das Shareware-Programm Graphic Converter, das sowohl GIF-Bilder mit Interlacing und Transparenz erzeugen kann als auch progressive JPEG-Dateien (und es kann auch Photoshop-Dateien lesen). Den Graphic Converter erhalten Sie von einem der vielen Sumex-AIM-Mirrors (ich verwende http://hyperarchive.lcs.mit.edu/HyperArchive.html).


Für Unix gibt es das Programm GIFTool, mit dem Sie Bilder sowohl mit Interlacing als auch mit Transparenz erzeugen können. Darüber hinaus ermöglicht es, mehrere GIF-Dateien im Batch-Betrieb ins Interlaced-Format umzuwandeln (das ist praktisch, wenn man ganze Verzeichnisse auf einmal umwandeln will!). Informationen über die Binärdateien für mehrere gebräuchliche Unix-Plattformen und den Quellcode für GIFTool erhalten Sie unter http://www.homepages.com/tools/.


Ebenso für Unix und das X-Window-System gibt es ImageMagick, das eine riesige Vielfalt von Bildformaten unterstützt und mit allen diesen Optionen fertig werden kann. Näheres über ImageMagick erfahren Sie unter http://www.wizards.dupont.com/cristy/ImageMagick.html.



Bilder erzeugen und einsetzen

Zusätzlich zu den im vorangegangenen Abschnitt erwähnten Tools zur Erzeugung von Interlace- und Transparent-Bildern gibt es einige Tools für die Erstellung bzw. allgemeine Bearbeitung von Bildern. Diese stehen im Internet zum Download bereit:


Mit einem geeignetem Tool in Händen und einem fundiertem Wissen über Bildformate, Kompression, Farbe und andere wichtige Details sollten Sie gut vorbereitet sein, um viele Bilder für Ihre Webseiten zu erstellen. Richtig? Im folgenden finden Sie einige Anregungen, wo Sie Bilder herbekommen.



Machen Sie sie selbst

Auch wenn Sie nur wenig künstlerische Begabung mitbringen, sollten Sie in Betracht ziehen, Ihre eigenen Bilder für das Web zu zeichnen oder zu malen. Ihre eigenen Bilder geben Ihren Seiten immer eine besondere Note. Es gibt zahlreiche Bildverarbeitungsprogramme, die Ihnen dabei helfen, selbst wenn Sie nicht einmal dazu in der Lage sind, eine gerade Linie zu zeichnen (das macht der Computer für Sie).


Wenn das eigenständige Zeichnen nicht Ihr Ding ist, versuchen Sie es doch mit einem Scanner. Ein Scanner bietet Ihnen die Möglichkeit, die verschiedensten Bilder zu erzeugen. Neben der offensichtlichen Lösung, ganze Fotos einzuscannen, können Sie auch Zeichnungen, die Sie auf Papier gemacht haben, Muster von einem Papier oder anderen Objekten (Blättern, Holz, Haut) oder irgend etwas anderes nehmen und daraus interessante Muster oder Bilder erstellen.


Flachbettscanner sind in den letzten paar Jahren sehr preiswert geworden, und Sie brauchen keinen hochqualitativen Scanner, um Bilder für das Web einzuscannen. Die meisten Monitore verwenden nur 72 dpi. Sie brauchen also keinen Scanner, der 1200, 2400 oder mehr dpi schafft. Ein Scanner mit 300 dpi ist dafür völlig ausreichend.


Wenn ein Flachbettscanner für Sie zu teuer ist, können Sie auch mit einem Handscanner gute Ergebnisse erzielen, wenn Sie Geduld und etwas Zeit haben. Vielleicht hat aber auch der Copy-Shop um die Ecke einen Scan-Service, und Sie können Ihre Bilder dort hinbringen und sie einscannen. Sehen Sie sich um. Wenn Sie Bilder im Web haben wollen, stellt das Einscannen eine wirklich große Unterstützung dar.


Scannen macht Spaß, aber lassen Sie sich nicht hinreißen! Bilder aus Büchern und Zeitschriften unterliegen einem Copyright, und wenn Sie sie scannen, dann ist das so, als würden Sie sie klauen. Abhängig davon, wie netzversiert die Firma ist, die das Copyright hält, können Sie dadurch eine Menge Ärger bekommen. Beachten Sie also beim Scannen, daß Sie die Arbeit anderer nicht kopieren.


Kommerzielle Cliparts

Kein künstlerisches Talent? Haben Sie nicht genügend Selbstvertrauen, eigene Bilder zu malen oder wollen Sie keine eingescannten Bilder verwenden? Die beste Quelle für Bilder auf Webseiten sind oft die Clipart-Pakete, die es zu Tausenden auf dem Markt gibt. In jedem Software-Laden gibt es Disketten und CDs mit Cliparts. Entsprechende Adressen finden Sie auch in den Computerzeitschriften.


Sie sollten jedoch auch mit Cliparts vorsichtig sein und prüfen, ob Sie das Bild ins Web bringen dürfen. Lesen Sie sich die Lizenzbestimmungen für die Cliparts sorgfältig durch. Suchen Sie nach Begriffen wie Public Domain oder uneingeschränkt nutzbar. Wenn die Lizenz irgend etwas in der Art wie »Diese Bilder dürfen nicht veröffentlicht werden« enthält, dann dürfen Sie die Bilder im Web nicht verwenden. Das Web gilt als Veröffentlichung.


Wenn Sie sich nicht ganz sicher sind, dann fragen Sie. Für die meisten Clipart-Pakete gibt es einen technischen Support oder eine Service-Line. Rufen Sie an, und fragen Sie nach.



Clipart im Web

Mit der steigenden Nachfrage nach Bildern, Cliparts und Icons im Web sind mehrere Sites entstanden, die frei verfügbare GIF-Dateien archivieren, welche Sie auf Ihren Webseiten verwenden können. Hier stelle ich Ihnen einige davon vor, die ich besonders mag.


Barry's Clipart-Server bietet Hunderte von Bildern. Bei einigen davon fällt eine kleine Gebühr an den Autor an, aber die meisten sind Public Domain. Mit dieser Seite können Sie mehrere Stunden beschäftigt sein. Den Clipart-Server finden Sie unter http://www.barrysclipart.com/.


Wenn Sie insbesondere nach Icons suchen, dann sehen Sie doch in Anthony's Icon Library nach, http://www.cit.gu.edu.au/~anthony/icons/index.html.


Darüber hinaus gibt es mehrere Web-Indizes, in denen Sie Cliparts und Icons finden. Ich bevorzuge Yahoo. Dort gibt es einen ganzen Abschnitt über Icons im Web, http://www.Yahoo.com/Computers/World_Wide_Web/Programming/Icons/ und einen über allgemeine Cliparts und Bildarchive, http://www.yahoo.com/Computers/Multimedia/Pictures.



Andere Bilder im Web

Angenommen, Sie sind ein bißchen durchs Web gewandert und haben eine Seite gefunden, deren Autor phantastische 3-D-Pfeile als Navigationsschaltflächen verwendet, die Sie noch nie zuvor gesehen haben. Die Icons gefallen Ihnen, und Sie möchten Sie auf Ihren eigenen Seiten ebenfalls benutzen.


Was tun? Sie können die Dateien auf Ihren eigenen Server kopieren. Da sie im Web veröffentlicht wurden, können Sie sie ganz einfach kopieren (Sie finden die Datei-Namen im Quellcode für die Seite), indem Sie die Seite in Ihren Browser laden und sie dann speichern. Aber es ist moralisch und möglicherweise sogar rechtlich nicht korrekt, die Bilder eines anderen zu kopieren. Irgend jemand hat womöglich lange an den Bildern gearbeitet, und Sie wollen sich sicher nicht strafbar machen, indem Sie sie einfach stehlen.


Eine andere Möglichkeit, die Sie haben, ist die, einfach die URL des Bildes in Ihre Seite einzufügen, so daß Sie rein technisch gesehen überhaupt nichts kopieren - sondern nur einen Bezug auf dieses Bild in Ihre Seite einfügen. Der Künstler könnte dies natürlich noch wesentlich schlimmer finden als eine Raubkopie. Das Problem mit einem Verweis zu einem Bild auf einem anderen Site ist, daß jedesmal, wenn jemand Ihre Seite lädt, er das Bild von dem originalen Server bekommt und damit für diesen Server eine vielleicht ungewollte Belastung schafft. Auf diese Weise kann das Einsetzen eines Verweises noch schlimmer als das direkte Kopieren sein.


Am naheliegendsten wäre es, den anderen zu fragen, ob Sie die Bilder verwenden dürfen. Möglicherweise stehen sie ohnehin schon frei zur Verfügung, so daß es kein Problem mehr gibt. Oder der Künstler bittet Sie einfach um eine kleine Gebühr. Eine schnelle E-Mail an die Person, der die Seiten gehören, schafft Klarheit.



Zukunftsaussichten: PNG

Ende 1994, als die Diskussion über das GIF-Dateiformat und seinen patentierten Algorithmus die Runde machte, bemühten sich zahlreiche Grafik-Entwickler und Organisationen, ein Bildformat zu entwickeln, das GIF ersetzen könnte. Es gab mehrere Konzepte, unter anderem TIFF sowie ein modifiziertes GIF-Format mit einer anderen Komprimierung, aber sie alle hatten Nachteile, die sie für die komplexe Umgebung im Web unbrauchbar machten. Insbesondere sollte das neue Bildformat die folgenden Dinge beinhalten:


Im Frühjahr 1997 schien sich ein neuer Vorschlag als Favorit herauskristalisieren. PNG, das Portable Network Graphics Format, wurde von Grafikprofis und Web-Entwicklern entworfen. Es sollte viele der Anforderungen für die in einer Netzwerkumgebung verwendeten und angezeigten Bilder erfüllen. PNG ist insbesondere als GIF-Ersatz gedacht, nicht als allgemeines Allzweck-Grafikformat. Für Fotos und andere Bilder, wo ein leichter Verlust an Bildqualität akzeptabel ist, stellt JPEG immer noch die erste Wahl dar.


PNG (man sagt »ping«) bietet alle oben aufgeführten Eigenschaften und darüber hinaus noch vieles andere mehr:


Eine wesentliche Unterstützung für PNG kam von CompuServe selbst, das die Originalspezifikation für GIF veröffentlicht hatte und zwischen dem Patent von Unisys und der riesigen Menge von Grafikentwicklern hin- und hergerissen war. CompuServe wollte eigentlich ein eigenes Ersatzformat bereitstellen, GIF24, aber es kündigte bereits Anfang Februar die Unterstützung von PNG an.


Im Moment wird noch an der Spezifikation für PNG gearbeitet. Es hat den Status einer Empfehlung des World Wide Web Consortium, was im allgemeinen als der letzte Schritt vor der Anerkennung als allgemeiner Standard gilt. Die Spezifikation kann im Moment als stabil angesehen werden. PNG taucht im zunehmenden Maße in unterschiedlichen Programmen als unterstütztes Format auf, allerdings hat es bis jetzt noch lange nicht die Verbreitung von GIF erreicht. Allerdings unterstützen wichtige Programme wie Microsoft Internet Explorer 4, Netscape Communicator, NCSA Mosaic, CorelDraw 7, Macromedia's FreeHand und Adobe Photoshop PNG noch nicht.


Die neuesten Informationen über PNG finden Sie unter http://www.boutell.com/boutell/png/ oder auf der PNG Homepage unter http://quest.jpl.nasa.gov/PNG/. Sie können aber auch eine Mail an png-info@uunet.uu.net senden, um weitere Informationen zu erhalten.



Weitere Informationen

In einem Kapitel dieses begrenzten Umfangs kann man nur einige oberflächliche Informationen über Computergrafik und Bildtheorie bieten. Ich hatte jedoch auch nicht die Absicht, mehr als einen Überblick über die Funktionen von JPEG und GIF zu schaffen und wie man sie im Web am besten einsetzt. Informationen über die in diesem Buch angeschnittenen Themen finden Sie in mehreren FAQ-Dateien (Frequently Asked Questions) im Web, ebenso wie in einigen Büchern. Hier eine Liste der Quellen, die ich für dieses Kapitel genutzt habe:



Zusammenfassung

Bis vor kurzem war es ganz einfach, das Bildformat für die Bilder im Web auszuwählen, das für alle Plattformen gleichermaßen geeignet war. Es gab nur GIF. Seit die JPEG-Unterstützung immer verbreiteter wurde, gibt es eine Auswahlmöglichkeit, und die Dinge beginnen kompliziert zu werden. Sowohl GIF als auch JPEG bieten Vorteile für bestimmte Dateiarten und Applikationen. Je nachdem, welche Arten von Bildern Sie auf Ihren Seiten verwenden, benutzen Sie das eine oder das andere oder auch eine Kombination aus beidem. In diesem Kapitel habe ich einige der Aspekte beschrieben, die Sie dabei berücksichtigen sollten, und ich hoffe, ich habe Ihnen damit geholfen.


Tabelle 8.2 zeigt eine Zusammenfassung der Merkmale von GIF, PNG und JPEG.


Tabelle 8.2: GIF versus PNG und JPEG

Format

Browser-Unterstützung

Farben

Interlacing und Transparenz

Komprimierungsart

Komprimierung Logos/ Icons

Komprimierung Fotos

GIF

Ausgezeichnet

256

Ja

Verlustlos

Ausgezeichnet

Angemessen

PNG

Eingeschränkt

Millionen

Ja

Verlustlos

Ausgezeichnet

Gut

JPEG

Gut

Millionen

Nein

Mit Verlust

Schlecht

Ausgezeichnet


Fragen und Antworten

Frage:

Was ist mit der Bildauflösung?

Antwort:

Wenn Sie Bilder für Zeitschriften oder Bücher erzeugen, müssen Sie mehr auf die korrekte Bildauflösung achten, weil gedruckte Bilder mit 600 bis 1200 dpi und höher dargestellt werden. Im Web werden Ihre Bilder in der Regel auf normalen Monitoren betrachtet, die selten eine bessere Auflösung als 72 dpi bringen. Wenn Sie all Ihre Bilder mit 72 dpi scannen und erzeugen, sollte das ausreichen.

Frage:

Sie haben nichts über die Bit-Tiefe, Halbtöne, Resampling oder LAB-Farbe, Alpha-Kanäle oder Gammakorrektur gesagt.

Antwort:

Ich hatte nicht soviel Platz. Deshalb habe ich mich darauf konzentriert, was mir für das Erstellen von Bildern im Web am wichtigsten erscheint - und Halbtöne und Gammakorrektur sind in diesem Fall nicht so wichtig wie Farbtabellen und verlustlose Komprimierung. Es tut mir leid, wenn Ihr Lieblingsthema zu kurz gekommen ist.

Frage:

Viele Clipart-Pakete behaupten, ihre Bilder seien »royalty free«. Ist das dasselbe wie Public Domain?

Antwort:

»Royalty free« bedeutet, daß Sie dem Autor oder der Firma nichts zahlen müssen, wenn Sie die Bilder so verwenden, wie das vorgesehen ist. Es sagt nichts darüber aus, wie Sie die Bilder verwenden dürfen. Möglicherweise sind die Bilder kostenlos für gedruckte Medien, aber Sie dürfen sie nicht als Computerbilder veröffentlichen. Lesen Sie die Lizenzbestimmungen, und fragen Sie gegebenenfalls die Firma.

Frage:

Sie haben über HSB und RGB gesprochen, aber ich sehe andauernd CMYK. Was ist das?

Antwort:

CMYK steht für Cyan, Magenta, Yellow und Black (Cyanblau, Magenta, Gelb und Schwarz). Das CMYK-Farbmodell wird in der Druckindustrie eingesetzt. Vielleicht haben Sie ja schon vom Vierfarbendruck gehört. CMYK sind die vier Farben. Das Farbmodell ist eigentlich CMY, und verschiedene Kombinationen der drei bilden jede beliebige Farbe, die Sie auf Papier drucken können. Eine vollständige Kombination aller drei ergibt Schwarz, aber aufgrund verschiedener Qualitäten der Druckfarben ist es oft nur unzureichend (Sie erhalten meistens ein dunkles Braun oder Grün). Aus diesem Grund wird auch schwarze Tinte in das Modell eingeführt, so daß Schwarz wirklich Schwarz ist.


Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisIndexInfoseitenächstes Kapitel