GIF-Optimierung

Im Abschnitt Grafikformate bin ich bereits auf die bevorzugten Einsatzgebiete der GIF-Komprimierung eingegangen.

Nun will ich mich dranmachen, die GIF-Optimierung anhand eines konkreten Beispieles zu zeigen. Dazu habe ich mir auch schon ein passendes Motiv zurecht gelegt: Die rechts abgebildete Aprikose.

Zunächst ist es immer wichtig, das Motiv einem kritischen Blick zu unterwerfen. Wir sehen: Es handelt sich um ein flächige Grafik mit einer reduzierten Farbanzahl, eben um eine Illustration. Und damit hätten wir einen typischen Kandidaten für eine GIF-Komprimierung.

Eine JPEG-Optimierung wäre zwar auch möglich, aber aufgrund der Flächigkeit der Grafik würden hier die quadratischen JPEG-Artefakte unschön hervortreten.

Wir begeben uns nun in das GIF-Optimierungs-Menü, das wir hier finden: →Datei → Exportieren → Gif-Export...

Das Gif-Optionen-Menü (klicke auf Bereiche für Erklärung)


• Allgemeine Einstellungen bei den »GIF-Optionen«

Bevor wir uns der konkreten GIF-Optimierung zuwenden, werde ich zunächst auf ein paar allgemeine Einstellmöglichkeiten des GIF-Optionen-Menüs eingehen.




Diese vier Buttons wirken sich gleichermaßen auf das Vorschau-Fenster wie auf das Originalbild-Fenster aus. Mit der »+«-Lupe kann man eine Stufe hineinzoomen, mit der »-«-Lupe eine heraus. Über den zweiten Button von rechts gelangt man wieder zur Gesamtansicht. Schade ist, dass nicht bereits hier eine »1:1-Ansicht« möglich ist, also eine Anzeige in der Größe, in der sie der Besucher auch tatsächlich zu sehen bekommt. Will man eine Vorschau in Originalgröße haben, dann klickt man auf den rechten Monitor-Button. Das Bild wird dann mit der aktuellen Kompressionseinstellung im Vollbildmodus und in realer Größe gezeigt. Mit der Esc-Taste gelangt man wieder zurück ins Menü.




Durch Klick auf den Button »Ansichtsoptionen« gelangt man in ein kleines Untermenü. Hier kann man zum einen die Modemgeschwindigkeit einstellen, welche bei der Berechnung der Ladezeit zu Grunde gelegt werden soll. Die zur Wahl gestellten Modems sind aber alles andere als repräsentativ für das Jahr 2000+ und die Ladezeit einer Grafik nicht immer ausschließlich der Modem-Art unterworfen>. Gut gedacht, aber leider veraltet. Weiter kann man einstellen, ob bei der Transparenz-Vorschau das GIF vor einem einfarbigen Hintergrund zur Kontrolle eingeblendet werden soll, oder vor einem Hintergrundmuster. Das ist reine Geschmacksache, ich selbst bevorzuge den einfarbigen Hintergrund.


Durch das Aktivieren der Checkbox »Interlace-Bild« wird das GIF-Bild im Browser stufenweise dargestellt. Dadurch erhöht sich zwar die Dateigröße geringfügig, aber die subjektive Ladezeit für den Besucher kann sich u.U. verringern, da er an Stelle eines Platzhalters sofort etwas zu sehen bekommt. Die Checkbox »Optionen beim Speichern immer anzeigen« bezieht sich auf das normale Abspeichern unter → Datei → Speichern unter... Ist sie aktiviert, dann wird dieses Menü bei jedem GIF-Abspeichern angezeigt.


• GIF-Optimierung durch Farbreduktion

Bei der GIF-Optimierung wird nichts anderes gemacht, als die Farbanzahl soweit zu reduzieren und die Farbanzeige so einzustellen, dass eine minimale Dateigröße bei akzeptabler ästhetischer Qualität dabei herausspringt.

Betritt man die GIF-Optionen, dann ist im Picture Publisher immer die maximale Farbanzahl von 256 (mehr Farben kann ein GIF nicht haben) eingestellt, bei optimierter Palette (d.h. die Palette beinhaltet nur Farben, die auch im Motiv vorkommen) und Dithering (Zwischentöne, die nicht durch Echtfarben dargestellt werden können, werden durch das Zusammenmischen verschiedenfarbiger Pixel simuliert.)Das Resultat in unserem Beispiel ist rechts zu sehen. Es gilt nun, die Farbzahl soweit wie möglich zu reduzieren, wobei die Qualität gut bleiben soll. Wir klicken nun auf den folgenden Button ...




Nach Klick auf diesen Button gelangen wir in das Herzstück der GIF-Optionen, denn die Dateigrößenreduktion ist alleine über dieses Menü zu erreichen.

Vorab ein wichtiger Hinweis: Ich weiß nicht, ob das nur bei meiner Programm-Version der Fall ist, aber dieser Assistent verkraftet es nicht, wenn man direkt verschiedene Einstellungen nacheinander ausführt. Da gibt 's Probleme in der Darstellung des Vorschaubildes. Deshalb muss man bei jedem neuen Optimierungsversuch zunächst den Button »Zurücksetzen« klicken. Nur dann kann man einigermaßen sicher sein, dass die Vorschau auch stimmt. Hinzukommt, dass die Palettenoptionen nicht mit der aktuellen Einstellung geöffnet werden, sondern immer nur mit der Grundeinstellung. Und das ist nun wirklich unnötig, da wurde beim Programmieren geschlampt ...

Folgendes Menü erwartet uns:

Das Paletten-Optionen-Menü mit Anfangseinstellung

Auf jede einzelne Einstellmöglichkeit einzugehen, das würde hier ins Uferlose gehen. Ich will mich auf einige markante Einstellungen beschränken.


• Bildtyp »8 Farben«, Dithern »ohne«, Palette »Optimiert«

Die 256 Farben sind bei diesem Motiv eindeutig übertrieben, deshalb wähle ich zunächst einmal die voreingestellte Farbzahl von 8 und schalte das Dithering aus (spart ebenfalls einige Kilobyte):


Das Ergebnis dieser Einstellung ist gar nicht schlecht: Größe nur 2 Kilobyte bei mäßiger Qualität. Da wir nur 8 Farben zur Verfügung haben, entfällt natürlich die Kantenglättung, die Linien sehen gezackt aus. Da müssten wir noch ein paar Farben dazugeben, damit das Anti-Aliasing ausgeführt werden kann.


• Benutzerdefinierte Palette»Netscape«, Dithern »Streuraster«

Die »berühmteste« aller standardisierten Paletten ist die Netscape-Safe-Browserpalette. Die in dieser enthaltenen Farben haben die Besonderheit, dass sie auf allen Browsern und plattformübergreifend identisch dargestellt werden. Beim Picture Publisher stellt man diese ein, indem man wählt: Palette »Beutzerdefiniert«, Einstellung »Netscape«.


Das Ergebnis ist nicht befriedigend. Zwar ist der Orange-Ton in der Palette enthalten und wird "rein" dargestellt, nicht jedoch der Rot-Ton und der Braun-Ton. Diese werden mit unschönen Punkten simuliert. Auch die Dateigröße ist mit 6 KByte vergleichsweise groß, wenn auch nicht zu groß.


• Benutzerdefinierte Palette»Grüntöne«, Dithern »Streuraster«

Es müssen nicht unbedingt immer Original-Farben sein. Man kann sich auch eigene Paletten erstellen oder vordefinierte Paletten einsetzen. Dadurch lassen sich mitunter interessante "künstlerische" Effekte erzielen. Für die Demonstration habe ich mir unter Palette die "Grüntöne" ausgesucht. Unsere Aprikose ist noch nicht reif für die Ernte ...


Das Ergebnis ist natürlich für unser Ziel, die Grafik möglichst qualitativ hochwertig bei geringer Dateigröße zu bekommen, nicht annehmbar. Der Browser kann eben bei der Darstellung nur auf Grüntöne zurückgreifen, entsprechend sieht das Ergebnis aus...


• Bildtyp »Benutzerdefiniert« Farbenanzahl »32« Dithern »kein«

Nachfolgend die Einstellung, für die ich mich entschieden habe: 32 Farben, damit auch ein wenig Kantenglättung betrieben werden kann. Außerdem kein Dithering, weil bei dies bei dieser geringen Farbzahl nicht notwendig ist.


Man kann natürlich immer noch weiter und weiter optimieren, sich sogar eine eigene Palette zusammenstellen. Letztendlich bleibt es aber immer dem persönlichen Geschmack des Grafikers überlassen, wann die Optimierung gelungen ist und wann noch nachgebessert werden muss.

Hat man sich für eine Optimierungseinstellung entschieden, dann gelangt man mit einem Klick auf OK in das Speichern-Menü und braucht nur noch den Dateinamen festzulegen.