Bilder fürs Web

Bilder indizieren

GIF speichert in den Bildern eine Farbpalette, die bis zu 256 Farben umfasst. In den eigentlichen Bilddaten werden dann nur noch Querverweise in die Farbpalette gespeichert. Über diese Bilddaten wird dann zeilenweise die LZW-Kompression gejagt. Diese funktioniert am besten mit großen einfarbigen Flächen, wobei "einfarbig" hier nicht "ähnliche Farben", sondern "identische Farbe" heißt.

Um mit Gimp ein Bild auf 256 oder weniger Farben zu reduzieren, müssen sie es über <Bild>/Bild/Modus/Indiziert in den "indizierten Modus" umrechnen. Im erscheinenden Dialog (Abbildung 4) können Sie im oberen Teil auswählen, nach welcher Strategie Gimp die Farbpalette erzeugen soll. Sie können auswählen, ob Gimp eine auf das Bild zugeschnittene Farbpalette erzeugen soll (die die angegebene Anzahl von Farben hat) oder eine schon vorhandene Farbpalette nutzen soll; sehr typisch ist hier der Einsatz der Web-Palette (siehe unten). Oder nur die Schwarz-weiße Palette, die wohl eher selten gebraucht wird.

Abbildung 4: Farben reduzieren

Im zweiten Bereich des Dialogs kann nun festgelegt werden, ob Gimp den einzelnen Pixeln einfach stur die ähnlichste Farbe zuordnet (Keine Farbrasterung) oder ob er sogenannte Dithering-Techniken verwendet, um den Gesamteindruck des Bildes besser zu bewahren. Stünden beispielsweise nur die Farben Schwarz und Weiß zur Verfügung, würde ein Grau durch ein Raster angenähert. Abbildung 5 zeigt verschiedene Rastermethoden, die Anordnung entspricht der im Dialog, der untere Streifen ist das Original.

Abbildung 5: Verschiedene Modi um Graustufen in Schwarz-Weiß umzuwandeln

Aber auch hier hat alles seine zwei Seiten. Auf der einen Seite können Sie die Farben reduzieren - wenn sie Rasterung einsetzen, sieht das Bild eventell besser aus. Auf der anderen Seite kommt die Rasterung dem Kompressionsalgorithmus in die Quere. Das Bild von Mitch (einem der Kern-Gimp-Entwickler, Abbildung 6) auf 32 Farben reduziert und als GIF abgespeichert ist mit Rasterung etwa 68 KB, ohne Rasterung aber nur etwa 50 KB groß (übrigens: Als JPEG kann man es noch einmal ohne Probleme auf die Hälfte bringen, aber das ist hier nur ein Beispiel…)

Abbildung 6: Mitch: Links gerastert, rechts ungerastert

Ich habe weiter oben beschrieben, dass man bei Design-Elementen mit harten Kontrasten an die Grenzen des JPEG-Formats stößt. Hier ist nun das GIF-Format deutlich besser dran, da diese Design-Elemente typischeweise wenige Farben haben. Abbildung 7 zeigt ein Beispiel, das drei Grundfarben hat. Wenn man das Bild aber in den indizierten Modus umrechnen lässt, erkennt man, dass das Bild in Wirklichkeit 60 Farben hat, da die Kanten geglättet sind. Um einen guten Glättungseffekt zu erreichen, sind derartig viele Farben nicht notwendig, als grobe Schätzung kann man sagen, das für eine gut geglättete Kante zwischen zwei Farben etwa vier Zwischenstufen erforderlich sind. In unserem Fall ergibt das 11 Farben (3 Grundfarben, je 4 Farben für den Übergang Türkisgrün-Schwarz und Türkisblau-Schwarz).

Abbildung 7: Ein Design-Element einer Web-Seite: 11 Farben reichen

GIF und Transparenz

Wenn Sie GIFs erstellen wollen, die teilweise durchsichtig sind, sollten sie das immer im Hinterkopf behalten. GIF hat nur eine Transparenzstufe zur Verfügung: Ein Pixel ist entweder durchsichtig, oder es hat eine Farbe. Gimp hingegen kann mit mehreren Transparenzgraden umgehen und geht bei der Umrechnung in den indizierten Modus recht brutal vor. Sie sollten also vor dem Indizieren dafür sorgen, dass Gimp nicht eingreifen muss. Am einfachsten geht dies mit dem Plugin <Bild>/Filter/Farben/Semi-Flatten, das allen halbtransparenten Pixeln die aktuelle Hintergrundfarbe (sinnvollerweise sollte das die "durchschnittliche" Hintergrundfarbe der Web-Seite sein) hinterlegt. Dann kann man das Bild beruhigt indizieren und muss nicht befürchten, dass alle sauber geglätteten Kanten plötzlich wieder schartig werden.

Auf animierte GIFs gehe ich nicht weiter ein, da ich diese bereits im letzten Teil ausführlicher behandelt habe.