Transparente Hintergrⁿnde und Bild-Interlacing
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. |
Abbildung 8.1: |
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).
Abbildung 8.2: |
|
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).
|
Abbildung 8.3: |
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½).
Abbildung 8.4: |
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). |
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.
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).
Abbildung 8.5: |
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.
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.)
Abbildung 8.6: |
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.
Abbildung 8.7: |
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.
Abbildung 8.8: |
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).
Abbildung 8.9: |
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.
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.
Abbildung 8.10: |
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).
Abbildung 8.11: |
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.
Abbildung 8.12: |
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.
Abbildung 8.13: |
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.
Abbildung 8.14: |
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.
Abbildung 8.15: |
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.
Abbildung 8.16: |
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.
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.
Abbildung 8.17: |
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.
Abbildung 8.18: |
Abbildung 8.19: |
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.
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.
Da CMYK fⁿr gedruckte Bilder und nicht fⁿr Anzeigemedien verwendet wird, habe ich es in diesem Kapitel nicht berⁿcksichtigt. Wenn Sie daran interessiert sind, lesen Sie die Bⁿcher und FAQs, die ich im Abschnitt ╗Weitere Informationen½ vorgestellt habe.
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
