Aufmacher Artikel

Bilder fürs Web

Bildbearbeitung mit Gimp, Teil 6

01.09.2001 Konzentrieren wir uns im sechsten Teil der Serie einmal auf das WWW. Ich bespreche diesmal die klassischen Web-Formate Gif, Jpeg und Png und werde Ihnen dabei helfen, für jedes Bild und jeden Zweck das richtige Format auszuwählen.

Werfen wir zuerst einmal einen Blick darauf, was bei einer falschen Formatwahl eigentlich passieren kann. In Abbildung 1 sehen Sie eine Überschrift, die als Jpeg-Datei abgespeichert wurde. Deutlich sind um die Schrift herum sogenannte Artefakte - also Strukturen, die nicht zu dem eigentlichen Motiv gehören - zu erkennen. Um den Effekt deutlich zu machen (und um eine kleine Datei zu bekommen) habe ich eine sehr niedrige Qualität gewählt. Aber wenn man mit offenen Augen im WWW stöbert, stößt man früher oder später auf vergleichbare Bilder.

Abbildung 1

Abbildung 1: Harte Kontraste stören die JPEG-Kompression

JPEG

Um dieses Phänomen zu verstehen, müssen wir erst etwas Hintergrundwissen verdauen. JPEG steht für "Joint Photographic Experts Group", eine Expertenrunde, die sich mit Bildkompressionsalgorithmen beschäftigt (http://www.jpeg.org/. Das, was wir im Alltag als "JPEG-Format" kennen, ist eigentlich das JFIF-Format ("JPEG File Interchange Format"), welches zur Kompression von Fotos entwickelt wurde. Ich werde aber der Verständlichkeit halber beim Begriff "JPEG" bleiben.

Das JPEG-Format nimmt leichte Verluste in Kauf, um gute Kompressionsraten zu erreichen. Während die Verluste bei Fotos normalerweise nicht ins Gewicht fallen, sind Bilder mit sehr harten Kontrasten (wie eben unsere Überschrift) in der Regel nicht für das JPEG-Format geeignet. Die der Kompression zugrundeliegende Diskrete Cosinus-Transformation kann scharfe Kanten nur dann einigermaßen gut abbilden, wenn in den umgebenden Pixeln (JPEG legt hier eine Aufteilung des Bildes in 8 x 8 Pixel große Bereiche zugrunde) Abweichungen zugelassen werden. In Abbildung 2 habe ich dieses Raster und die Abweichungen hervorgehoben. Man sieht deutlich, wie sich die Abweichungen, die durch die Kanten provoziert werden, von Kasten zu Kasten unterscheiden.

Abbildung 2

Abbildung 2: Artefakte in Blöcken

Wenn man ein Bild im JPEG-Format abspeichert, muss man selber abwägen, was einem wichtiger ist: kleine Dateien oder originalgetreuere Bilder. Das JPEG-Plugin für Gimp (Abbildung 3) unterstützt uns bei der Auswahl: Im Bildfenster können sie sehen, wie sich die JPEG-Kompression auf das Bild auswirkt. Mit dem Schieberegler Qualität können Sie die Stärke der Kompression selbst bestimmen. Allerdings ist auch bei maximaler Qualität immer noch ein leichter Qualitätsverlust festzustellen. Um die Artefakte abzuschwächen, kann man mit dem Schieberegler Glättung dafür sorgen, dass das Bild noch etwas weichgezeichnet wird. Oben links können Sie immer sehen, welche Dateigröße das Bild nach dem Abspeichern haben wird.

Abbildung 3

Abbildung 3: Gimps Dialog zum Abspeichern von JPEGs

Das JPEG-Format ist geeignet für Bilder, die überwiegend aus weichen Farbübergängen bestehen. Auch die Fotos, die man eben mit der Digitalkamera geschossen hat und ins Web stellen will, sind im JPEG-Format gut aufgehoben - daher werden diese meistens auch von der Digitalkamera im JPEG-Format gespeichert. An die Grenzen von JPEG stößt man mit Bildern, die große, einfarbige, von Konturen umgebene Flächen beinhalten - also typische Design-Elemente. Die JPEG-Unterstützung durch die verschiedenen grafischen Web-Browser ist ziemlich lückenlos.

GIF

Das GIF-Format habe ich schon mehrfach in dieser Serie angesprochen, auch diesmal soll der Hinweis auf die Lizenzproblematik nicht fehlen: Wenn Sie das GIF-Format legal benutzen wollen, müssen Sie eine Lizenz von Unisys erwerben, die ein Patent auf den im GIF-Format eingesetzten LZW-Kompressionsalgorithmus besitzen. Die Windows-Version von Gimp liefert aus diesem Grund die entsprechenden Plugins nicht mit - Sie müssen sie dort nachträglich installieren. Auch Debian-Benutzer müssen ein separates Paket aus dem nonfree-Bereich installieren, bevor sie das GIF-Format (und auch das TIF-Format) lesen und schreiben können. Alternativ können Sie auf die Kompression verzichten, was dann allerdings wieder lange Download-Zeiten erzeugt…

Kommen wir nun zum technischen Teil. GIF hat eine große Beschränkung: Es kann normalerweise nur 256 Farben in einem Bild darstellen. Wenn man also Fotos darstellen will, stößt man Ruck-Zuck an eine Grenze. Man kann diese Beschränkung umgehen - erhält dann aber wieder riesige Dateien, und die Unterstützung durch die verschiedenen Browser ist nicht sichergestellt. Außerdem lassen sich solche Bilder nicht mit Gimp erzeugen, daher gehe ich jetzt nicht weiter darauf ein.

Es gibt drei Gründe, warum GIF heute auch trotz der angesprochen Lizenzproblematik immer noch verwendet wird: Es wird von allen grafischen Browsern unterstützt, es kann Transparenzinformationen speichern, und es unterstützt Animationen. Gerade letzteres ist nach wie vor ein Killer-Argument.

Wie erzeugt man nun ein möglichst optimales GIF? Natürlich kann ich hier keinen allgemeingültigen Weg beschreiben, es hängt immer vom Motiv ab. Betrachten wir zunächst nur ein ganz normales Bild ohne Transparenz oder Animation.

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

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

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

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

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.

Die unsägliche Web-Palette

Sie werden vermutlich schon einmal über die sogenannte Web-Palette gestolpert sein. Das ist eine standardisierte Palette, die von nahezu allen Browsern verwendet wird, wenn die Grafikkarte (oder deren Einstellung) nicht mehr als 256 Farben auf dem Bildschirm zulässt (8-Bit-Displays). Sie besteht aus 216 Farben, die den RGB-Farbraum gleichmäßig unterteilen: Die Rot-, Grün- und Blauwerte nehmen von den je 256 möglichen Schattierungen nur die Werte 0, 51, 102, 153, 204 und 255 (hexadezimal 00, 33, 66, 99, cc, ff) an, was nach Adam Riese 6*6*6 = 216 Farben ergibt. Die restlichen Farben werden je nach System (Linux, Windows, Mac) unterschiedlich genutzt.

Dieser Ansatz hat leider das Problem, dass er die Wahrnehmung durch das Auge ignoriert. Das Auge ist bei helleren Farben wesentlich empfindlicher. Durch die gleichmäßige Aufteilung des Farbraums gibt es also bei dieser Aufteilung einige dunkle Farbtöne, die quasi nicht voneinander zu unterscheiden sind, während man sich in den hellen Farbtönen doch manchmal eine feinere Unterteilung wünscht (Abbildung 8).

Abbildung 8

Abbildung 8: Die Web-Palette

Nun ja, die Web-Palette ist Quasistandard, und es ist relativ müßig, sich jetzt noch über diesen Design-Fehler aufzuregen. Worüber man sich viel besser aufregen kann: Die Webpalette wird häufig schlicht falsch eingesetzt. Immer wieder stolpert man über Bilder oder kleine Fotos, die in die Web-Palette konvertiert worden sind, obwohl niemand etwas davon hat: Der Web-Designer hat mehr Arbeit, die Leute mit den oben angesprochenen 8-Bit-Displays gewinnen nichts, da ihr Browser das Bild sowieso in diese Palette konvertiert hätte. Alle anderen - und das ist inzwischen die überwiegende Mehrheit - ärgern sich, dass das Bild die Möglichkeiten der Grafikkarte nicht ausnutzt. Zudem ist vermutlich meistens eine JPEG-Variante des Bildes platzsparender…

Also: Wenn sie ein Bild indizieren müssen (weil es etwa transparente Bereiche haben soll) ignorieren Sie bitte die Web-Palette. Lassen sie Gimp die optimale Palette für das Bild finden und vertrauen Sie darauf, dass der Browser das Bild auf 8-Bit-Displays akzeptabel darstellen wird.

Es gibt nur einen einzigen legitimen Nutzen für die Web-Palette: Wenn sie die Grundfarben für das Design ihrer Web-Seite festlegen, sollten Sie Farben aus dieser Palette auswählen. Dies stellt sicher, dass großflächige Bereiche in diesen Farben auch auf 8-Bit-Displays nicht gerastert werden. Zudem können Sie sich darauf verlassen, dass sie an dem Übergang zwischen einem Bild und der Hintergrundfarbe einer Tabellenzelle (oder der Seite) keine Überraschungen erleben.

PNG

Wenden wir uns nun einem tapferen Streiter zu, der seit Jahren unermüdlich gegen die widrigen Umstände im Browser-Markt ankämpft, sich für die Erweiterung des Transparenzhorizonts einsetzt und - last but not least - unbelastet von Patenten für die Freiheit steht. Die Rede ist von PNG (Portable Network Graphics).

Die Entwicklung von PNG wurde durch die LZW-Probleme des GIF-Formats angestoßen. Leider hat es bis heute noch nicht so recht geklappt, GIF als Standard abzulösen - es gibt immer noch zu viele Browser, die das PNG-Format sehr stiefmütterlich behandeln.

PNG ist ein verlustfreies Format. Im Gegensatz zu JPG kann man sich sicher sein, dass das abgespeicherte Bild alle Bildinformationen enthält - die Dateien sind dann allerdings auch deutlich größer. PNG kann aber auch indizierte Dateien abspeichern. Vergleicht man es auf dieser Ebene mit GIF, sind die Kompressionsraten deutlich besser. Das Design-Element von eben braucht mit 11 Farben im GIF-Format 827 Bytes, als PNG-Datei nur noch 415 Bytes.

Alle "großen" Browser können heutzutage PNG-Dateien anzeigen - wenn es wirklich reine PNG-Dateien ohne jeden Schnick-Schnack sind. Leider scheinen sich aber nahezu alle Browser (positive Ausnahme: Mozilla, siehe Abbildung 9) darin einig zu sein, dass kein Mensch Transparenz braucht. Dabei würde eine vernünftige Unterstützung der PNG-Transparenz so viele Probleme lösen. Das PNG-Format (und Gimp) unterstützen nämlich einen echten Alpha-Kanal, also nicht nur die halbseidene Lösung von GIF, sondern echte verschiedene Transparenzgrade. Damit wäre es für Web-Designer kein Problem, saubere Kantenglättung vor beliebigen Hintergründen zu erzeugen. Nur die Browser spielen hier nicht mit. Netscape 4.7 ignoriert beispielsweise sämtliche Transparenzinformationen…

Abbildung 9

Abbildung 9: Mozilla: Ein- und dasselbe PNG-Bild vor verschiedenen Hintergründen

Leider sind diese Browser noch zuhauf unterwegs, und man kann sie nicht ignorieren. Wie auch in den letzten Jahren bleibt einem nichts anderes übrig, als zu hoffen, dass irgendwann…

Auch in Punkto Animationen kann PNG nicht mit GIF mithalten. Im Design von PNG wurde auf Animationen explizit verzichtet. Es gibt ein Schwesterformat namens MNG (Multiple Network Graphics), das bewegte Bilder unterstützt. Mit der Unterstützung durch Web-Browser sieht es hier aber noch schlechter aus als bei PNG.

PNG kann man inzwischen fast bedenkenlos für rechteckige Grafiken ohne Transparenz einsetzen. Je nach Bildmotiv sollte man allerdings JPG als platzsparende Alternative erwägen. Bei Bildern im indizierten Modus kann man mit PNG meist gegenüber GIF noch einige Bytes herausholen - und das ohne Lizenzprobleme.

Brummt der Schädel?

Leider gibt es das ideale Format für das WWW noch nicht, jedes der hier besprochenen Formate trägt ein Problempäckchen mit sich herum. JPEG versagt bei harten Kontrasten, ist aber ungeschlagen, wenn es um große Fotos geht, GIF trägt schwer am Lizenzproblem, ist aber das einzige Format, mit dem man zur Zeit zuverlässig Transparenz und kleine Animationen handhaben kann, und PNG ist zur Zeit der Prinz Charles der Bildformate: Ewiger Thronfolger… Die gute Unterstützung durch Mozilla ist ein wichtiger Schritt in die richtige Richtung, die weite Verbreitung anderer Browser ist hier aber noch ein Showstopper.

Es war diesmal etwas technisch, ich glaube, das Wort Gimp ist so selten wie nie aufgetaucht. Ich hoffe, dass es aber dennoch eine Idee davon vermittelt hat, wie man sinnvoll welches Format einsetzt. Für das nächste Mal verspreche ich wieder etwas mehr Einblicke in Gimp.

Der Autor

Simon Budig beschäftigt sich seit gut drei Jahren mit Gimp, den Anstoß dazu hat er in der Unix-AG an der Uni-GH Siegen bekommen. Während er eher selten in die Untiefen der Programmierung einsteigt, krittelt er um so lieber an Kleinigkeiten der Oberfläche herum und hofft, dass sich irgendjemand dieser Probleme annimmt. Manchmal klappt das sogar…

Tip a friend    Druckansicht beenden Bookmark and Share
Kommentare