Bilder fürs Web

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: 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: 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: 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.