Optimierung von GIF-Dateien

Grafiken im Internet werden häufig als Dateien im Graphic-Interchange-Format (GIF) gespeichert. Insbesondere, wenn es sich um animierte Grafiken handelt, bietet dieses Format viele Vorteile, die gezielt genutzt werden sollten.

Aufbau einer animierten GIF-Datei
allgemeine Angaben	Geltungsbereich: für alle Einzelbilder gemeinsam
Angaben zur (äußeren) Rahmengröße	erfolgt in Pixeln, zur Berechnung des Platzbedarfs bei der Anzeige im Browser
zu verwendendeFarbpalette, transparente Farbe (d.h. Farbe, welche nicht dargestellt wird)	Angaben zum Rot/Grün/Blau-Anteil der Pixel. Es können 2, 4, 8, 16, 64, 128 oder 256 Farben berücksichtigt werden.
Kontrollangaben zur folgenden Grafik	je ein Eintrag pro darzustellendem Bild
Zeitangabe (in Hundertstel Sekunden) bis zur Darstellung der nachfolgenden Grafik	Unterschiedliche Reaktionszeiten müssen also nicht durch wiederholtes Anzeigen der gleichen Grafik realisiert werden.
Art des Übergangs zur nächsten Grafik	Die Grafik kann nach ihrer Darstellung weiterhin angezeigt oder durch den bisherigen Hintergrund wieder verdeckt werden
Angaben zur eigentlichen Grafik	je ein Eintrag pro darzustellendem Bild
Breite und Höhe der Grafik	Diese Angaben können innerhalb der äußeren Rahmengröße liegen
Verschiebung der Grafik (Offset) bezüglich der äußeren Rahmengröße (in Pixeln)	Bewegungen können durch veränderte Offsetangaben erzeugt werden
Text zum Grafikblock	Im Allgemeinen wird hier der Name der Grafikdatei gespeichert
Die Farbangaben zu den einzelnen Bildpunkten	Die Angaben beziehen sich auf die allgemeine Farbtabelle oder auf eine zusätzliche lokale Farbtabelle

Optimierung einer GIF-Dateien anhand eines Beispiels aus dem Internet:

Auf der Homepage des Kulturvereins Prenzlauer Berg e.V. befindet sich das Logo des Vereins, welches als animierte GIF-Datei vorliegt. Diese Grafik wird mittels des GIF-Constructionsets analysiert. Das Logo nimmt einen Platz von 350 x 140 Pixeln ein. Es werden einzelne (schwarze) Bildelemente nacheinander aufgebaut, sowie ein sich bewegender (blauer) Punkt dargestellt. Der Grafikhintergrund ist transparent.

Ursprungsvariante:
Die Grafikdatei besteht aus 63 Bildrahmen (Frames), jeweils in voller Bildgröße (d.h. 350 x 140 Pixel) mit allen jeweiligen Bildbestandteilen und Blocktexten, sowie einer Farbpalette aus 64 Farben (177.098 Bytes)

Reduzierung der Farbpalette:
In der Originalgrafik werden die Farben schwarz, weiß und blau benötigt. Zur Vermeidung von unschönen Pixeltreppen bei schrägen Linien bzw. am Rand des sich bewegenden Punktes (Alias-Effekt) werden Farbabstufungen benötigt. Wenn zum Schwarz noch 4 Graustufen und zum Blau noch 4 Hellblaustufen hinzukommen, sollten also insgesamt 16 Farben ausreichen.

Reduzierung der Anzahl von einzelnen Bildrahmen:
Die Gesamtgrafik wird als Abfolge von 5 schwarzen Flächen, 10 Positionen des sich bewegenden blauen Punktes, 10 Textbestandteilen und einer (transparenten) Startfläche dargestellt. Dies sind insgesamt 26 verschiedene Frames. Somit können gegenüber der Ursprungsvariante 37(!) Frames eingespart werden.

Reduzierung der Größe der einzelnen Bildrahmen:
Da die schwarzen Flächen nacheinander aufgebaut werden, ist es nicht notwendig, daß jeder Bildrahmen in der vollen Größe von 350 x 140 Pixel dargestellt wird. Vielmehr kann innerhalb des ersten (transparenten) Rahmens die jeweils hinzukommende Fläche mit dem entsprechenden Offset eingeblendet werden. Hierdurch beschränkt sich die konkrete Rahmengröße auf die darzustellende Flächengröße. Analog wird beim einzublenden Text verfahren. Auch der sich bewegende blaue Punkt wird nur in der Größe des Punktes als Grafik mit dem entsprechenden Offset eingeblendet und nach Ablauf der Verzögerungszeit wieder ausgeblendet. Die Einsparung an Speicherbedarf ist hier jeweils proportional zur tatsächlichen Grafikgröße zu sehen. Die Übergangszeiten zwischen den Bildrahmen sind entsprechend anzupassen.

Löschen von Blocktexten und Kommentaren:
Die meisten Grafikprogramme, welche das erstellen von animierten Grafiken unterstützen, tragen in die GIF-Datei zu jedem Einzelbild den Dateinamen samt der Verzeichnisangaben ein, sowie eventuelle zusätzliche Kommentare. Durch Streichen dieser Blöcke wird die Grafikdatei um die Gesamtlänge der Dateinamen und Kommentare kürzer.

Ergebnis:
Durch konsequente Anwendung der obigen Reduzierungsmöglichkeiten wird der Speicherbedarf für die GIF-Datei reduziert.
Am konkreten Beispiel läßt sich die GIF-Datei auf eine Größe von unter 6(!) Kilobyte bringen. Das bedeutet für den Seitenanbieter: weniger Speicherverbrauch beim Provider und für den Seitenbesucher: schnellerer Bildaufbau.

Ursprungsvariante mit 63 Frames, jeweils mit 350 x 140 Pixel, bestehend aus 64 Farben und mit Blocktexten (177.098 Bytes)

Optimierte Variante: 26 Frames, davon 1 Frame mit 350 x 140 Pixel, alle anderen nur in der Größe des Bildausschnitts, mit 16 Farben ohne Blocktexte (5.942 Bytes)

E-Mail an Horst@holyware.de