Wir schreiben das Jahr 2010.
Elektronische Tinte, OLEDs, HD-Videostreams, Handies mit 7,2 Mbit Internetanbindung, Flash- und Silverlightanimationen an jeder Ecke des “Web 2.0″… und trotzdem gibt es sie noch:

Animierte GIFs.

Es ruckelt und zappelt wie vor etwa 23 Jahren, als GIF entstand.

Sind GIFs heute noch relevant?

Ja. Als Avatare und Icons in Foren, für Werbebanner und E-Mails sind sie weiterhin im Einsatz.

Flash und Co erobern diese Bereiche eher zaghaft, warscheinlich auch deshalb da Flash in diesen Bereichen nicht sicher wäre, da Eingaben abgefangen und übertragen werden könnten, Links automatisch geöffnet werden und die nervige Animation noch mit Ton untermalt wird.

GIF ist also weiterhin daseinsberechtigt, wenn auch zugegebener Maßen leicht eingestaubt. Aber genau diese Begrenzung auf wenige ablaufende Bilder ist eben Ihr vorteil. Zudem geht dies viel flotter als beispielsweise ein H.264-Video zu dekodieren und darzustellen.

Nun aber genug der Theorie, der folgende Teil beschäftigt sich mit der Anwendung des GIFs in Foren, beispielsweise als Avatar.
Hierzu gibt es folgende Punkte zu bedenken:

– Womit erstelle ich GIF-Animationen?
– Wie bekomme ich meine Animation ins Forum trotz Dateigrößenbeschränkung?
– Ist ein animiertes GIF als Avatar nicht zu nervig?
– Wie kann man die Grafiken optimieren, da GIF nur 256 Farben darstellt und diese oft Abstufungen bekommen?

GIF erstellen

Es gibt eine ganze Reihe von Programmen die Gif erstellen können. Auf Seiten wie Freeware.de, All4You/Freeware World Team oder Versiontracker (auch für Mac) finden sich viele Programme.
Wer weder ein Grafik- noch ein Animationsprogramm hat, kann sich das kostenlose Grafikprogramm GIMP einmal ansehen, mit dem Teile der Beispiele auf den Folgenden Bildern entstanden.

http://de.wikipedia.org/wiki/GIMP

Anleitungen um mit GIMP animierte GIFs zu erstellen gibt es unter anderem auf
1 http://blog.arminaugustalexander.de/?page_id=124
2 http://www.lernnetz-sh.de/kmLinux/doc/G…enmitgimpok.html
3 http://www.novell.com/coolsolutions/feature/1664.html
und würde den Rahmen dieses Artikels sprengen.
Kurz zusammengefasst fügt man einfach jedes Bild in eine eigene Ebene und wählt beim speichern des GIFs aus, eine Animation zu erstellen.

Dateigrößenoptimierung von GIF

Bevor es um animierte GIF-Bilder geht, muss man sich klar werden wie GIF funktioniert. Es handelt sich hierbei lediglich um ein Daumenkino mit verschiedenen Einzelbildern, die man unterschiedlich schnell ablaufen lassen kann. Der Schlüssel ist also, die Dateigröße der Einzelbilder so klein wie möglich zu bekommen und einen Kompromiss zwischen Ruckeln und Anzahl der Zwischenbilder zu finden.
Zudem lässt sich das Format, also die Größe reduzieren, was aber nicht immer in Frage kommt.

Die folgenden Beispiele sind nicht immer optimal und zum Teil überoptimiert um den Effekt besser darzustellen.

Betrachten wir nun einmal ein Bild mit verschiedenen Farbtiefen und die daraus resultierenden Ergebnisse:

Auffallend ist, dass durch die Farbreduzierung mit automatischen Algorythmen die Farbsättigung leided. Dies geschieht da ein Mittelwert der Farben benutzt wird. Oft reicht es die Sättigung wieder nach oben zu korrigieren und auffällige Farbflecken mit dem Farbtausch-Werkzeug/Pinsel in bestimmten Bereichen durch eine dunklere Palettenfarbe zu ersetzen.

Auch gut zu sehen ist, dass Raster/Diffusionsbilder immer etwas größer sind. Diese sehen vorallem bei Farbverläufen in größeren Bildern zwar schöner aus da sie Farbabstufungen vermindern (Siehe auch das Himmelbeispiel weiter unten), aber die Kompression von GIF legt gleiche Farbbereiche zusammen. Vereinfacht:
Ist eine Fläche durchgehend Blau, speichert der Computer sozusagen nur “Hier kommen 5 Blaue Bildpunkte”, anstelle wie beim Bildformat BMP “Blau, blau, blau, blau”.
Durch das Raster (in etwa Vergleichbar mit Druck in Zeitungen) entstehen durch dichte Anordnung von zwei Farben der Eindruck dass eine dritte Farbe vorhanden ist:

Allerdings speichert der Computer nun
“Rot Gelb Rot Gelb Rot Gelb” was sich nicht so leicht vereinfachen lässt, vorallem wenn das Raster unregelmässig ist (was oftmals anschaulicher ist, da die Rasterung dann nicht so schnell ins Auge fällt).
Schön sieht man hier auch, dass beim Rastern der harte Übergang zwischen Farbfelder reduziert wird. Bei größeren Bildern mit mehr Farben wird dies sogar noch besser sichtbar.

Hier nochmal ein Bild mit viel blauer Fläche. Zum einen sieht man gut den Unterschied zwischen Raster und Vollfarben, als auch die Auswirkung auf die Dateigröße.

Flächen lassen sich also besser komprimieren und man kommt mit weniger Farben aus. Je weniger Farbinformation das Bild von vorne herein hat, desto weniger sieht man den Verlust beim reduzieren der Farbpalette.
Dies lässt sich ganz gut nutzen:
Man kann vor der Farbtiefenreduzierung unwichtige Bereiche wegnehmen, bspw. durch Kontrast/Helligkeit/Gamma dunkle Flächen bewusst “absaufen lassen”, oder die Unter/Überbelichtenfunktion des Grafikprogrammes benutzen:

Die Zeichnung (Details) des Waldes verschwindet. Dadurch benötigt man weniger Farben UND es handelt sich um einfarbige Flächen, die sich leichter komprimieren lassen. So spart man (in diesem Fall) 1/3 der Dateigröße.

Ganz zur Not kann man auch Graustufen oder Sepia-Bilder aus einem Farbbild machen. Das kann unter umständen künstlerisch wirken, und man kommt idR: mit 4-16 Farben/Abstufungen aus.

Selbst wenn ein solch reduziertes Bild als Standbild niemals in Frage kommen würde, so ist es in einer Animation doch praktikabel. Das Bild verweilt nur für den Bruchteil einer Sekunde, so dass das Auge eher die Konturen als die Farben warnehmen kann.

Überblendeeffekte wie Auflösen, Transformieren und andere sind nette spielerreien aber erzeugen große Dateien. Hier kann man zum einen weniger Zwischenbilder nehmen (und ggf. den Ablauf etwas beschleunigen damit es nicht ruckelt) und zum anderen sind die Zwischenschritte nur so kurz sichtbar dass man Bildinhalte getrost auf wenige Farben reduzieren kann da es hier kaum oder garnicht auffällt.

451kb, 256 Farben, “Median Cut”
Übergänge: 2 Sekunden x 12 Bilder pro Sekunde = Je 24 Bilder

328kb, wie oben, jedoch mit den folgenden optimierungen (genaueres später):
-Minimale Framegröße
-Identische Frames zusammenlegen
-Identische Folgepixel transparent definieren
-Browserspezifische optimierungen

182kb: Verkürzung der Übergänge und weniger Bilder pro Sekunde
ca. 1x9FPS

68kb
Starke Farbtiefenreduzierung, insbesondere der Übergangsanimation

"Per Hand" kann man immer noch eine ganze Menge herrausholen, sowohl qualitativ als auch von der Dateigröße her. Es wird aber schnell klar, wie ein Kompromiss aus Abspieldauer, Zwischenbilder und Farbreduzierung die Dateigröße beeinflusst.

Hier nun ein Beispiel aus der Praxis. Ein Forenmitglied hat mit der GIMP-Anleitung aus einem Videoclip eine kurze Animation erstellt:

Diese ist mit 15,5kb schon fast an der Grenze, denn das Forum lässt nur 16kb große Avatare zu.
Die Bilder noch kleiner zu machen ist keine Option, bereits jetzt ist der Avatar recht klein.

Diese Animation hat 5 Einzelbilder und im original 100 Farben:

Das reicht gerade so um den Sinn der Animation zu übermitteln.
Wie kann man dies nun optimieren?

Leider stand mir der Originalfilm nicht zur Verfügung, aber selbst mit dem Vorhandenen konnte man arbeiten.
10,6KB, 32 Farben max.; Kaum ein Unterschied:

Fazit: Noch genug Platz für weitere Animationsbilder.

Idealerweise könnte man den Teilbereich der Lunte ausschneiden, so dass sich nur dieser kleine Bereich ändert während der Hintergrund identisch bleibt. Das spart enorm viele Daten.
Je nach Wackler der Kamera müsste man ggf. etwas per Hand nachpositionieren oder vorher Deshaker oder ein anderes Video-Entwacklungstool drüber laufen lassen.

Hier sieht man 9 Zwischenbilder einer brennenden Lunte, mangels Bildmaterial aus den zwei Originalframes in Wiederholungsschleife:

Auf den Bildebenen wird nur der sich zu ändernde Teil eingefügt.
Beim Speichern als animiertes Gif in Gimp dann folgendes einstellen:
“Einzelbildübergang, wo nicht angegeben: Kumulative Ebenen (Kombinieren)”

Resultat:
5,72kb mit Gimp

Im Vergleich mit Vollbildern:
26,8kb (!) mit Gimp als Komplette Einzelbilder

Es lohnt sich also wirklich.
Aber selbst ohne diese Technik hat die gesamte Animation jetzt ca. 14 KB, trotz Einzelbilder:

Mit dem Original könnte man also eine schöne brennende Lunte und eventuell noch ein paar Fetzen zeigen, und das alles unter 16KB.

Doch jeder Forumsadministrator/Moderator wird bei solch einem Avatar die Kriese bekommen…
Deshalb ist die Lösung, das ganze etwas subtiler zu gestalten, und die anderen Forenteilnehmer eventuell noch mit einem Überraschungseffekt zum schmunzeln zu bekommen.

Anstelle die Animation ständig in Endlosschleife abspielen zu lassen, setzt man die Abspieldauer des ersten Bildes auf bspw. 60 Sekunden.
Liesst nun jemand den Forenbeitrag neben dem Avatar, macht es plötzlich “Peng!” und der Leser wird garantiert eine Weile auf das wieder statische Bild schauen um herrauszufinden was er dort aus den Augenwinkeln gesehen hat.

Zum Abschluss das ganze als 15-Sekunden-Beispiel. Mangels Originalbilder habe ich schnell leeren Hintergrund und unangezündeten Böller aus anderen Bildern retouchiert:

Übergänge mit Transparenz oder transparentem Pixelraster?
Überblendungen zweier Bilder, wie in den Fotobeispielanimationen weiter oben, benötigen mehrere Vollbilder und erzeugen große GIF-Dateien.

Übergänge mit Transparenz, wenn die Dateigröße nebensächlich ist:
Ein zweites Projekt, zwei Layer.
Unterer Layer: Böllerbild, oberer Layer: Straße ohne Böller.

Den Transparenzregler des Straßenlayers nun beispielsweise auf 20, 40, 60 und 80% ziehen und jeweils ein Bild exportieren.
(Transparenz geht nur mit Bild->Modus->RGB, nicht bei Palettenreduzierten GIFs! Ggf. ändern und später wieder die Palette rduzieren.)

Speicherschonenden Variante:
Wie schon geschrieben ist es “Platzsparender” wenn sich nur Teilbereiche des Bilds ändern.
Einfach aus einem Bild den Böller wegretouchieren oder einen Teilbereich mit weichen Übergängen zum zweiten Frame schaffen.

Diesen muss man jetzt mit einem Pixel- oder Zeilenraster auflösen (Bspw. jede zweite, dann jede dritte, dann jede vierte Zeile transparent).

So entsteht ebenfalls der Eindruck einer Überblendung, jedoch mit wesentlich kleineren Dateigrößen.

Fragen zum Thema?
Ab in den Kommentarbereich damit!