GIF vs WebM

GIF ist so fest mit der Web-Kultur der 90er Jahre verbunden wie kaum eine andere Technologie. Die alten Homepages waren voll von blinkenden Sternen, glitzernden Herzen und komischen "Under Construction"-Schildern. Während man gerade erst MPEG-Videos entdeckte, die man dann downloaden konnte, sich aber nicht wirklich in HTML-Seiten integrieren ließen, brachten GIF-Animationen Bewegung in Seiten und ließen alles nicht ganz so statisch wirken.
Auch heute sind GIF-Animationen weit verbreitet und eine eigene kleine Kunstform. Während früher kleine gezeichnete Animationen den größten Teil davon ausmachten sind es heute oft kurze Szenen aus Videos und Filmen aller Art.

Doch GIF ist nicht wirklich das beste Format für Animationen. Mit dem Video-Tag aus HTML5, bei dem man ohne Probleme die Controllers ausblenden kann, einen Autostart festlegt und eine Loop festlegt, kann man nun auch moderne Video-Formate verwenden. Die Vorteile sind schnell genannt:

- mehr Farben
- höhere Framerate
- moderne Kompression und damit kleine Dateien
- höhere Auflösungen

Natürlich gibt es auch viele Vorteile:

- kompatibel bis in die "Steinzeit"
- keine zusätzlichen Codecs, weil fast alle Webbrowser sie nativ unterstützen
- viele Programme zum erzeugen von GIFs
- laufen selbst auf einem alten Win95 Rechner mit Pentium 90
- einfach zu erzeugen

Das größte Problem sind nicht mal die 256 Farben, da es ja nicht so ist dass man nur insgesamt 256 Farben zur Verfügung hat, sondern nur 256 verschiedene Farben aus der Palette der 24-Bit Farben wählen kann. Man hat also eine Tabelle mit Index mit maximal 256 Einträgen in der ja Eintrag eine 24-Bit Farbe (True-Color) hinterlegt ist. Das hat den Vorteil, dass der Eintrag "5" natürlich weniger Speicher verbraucht als "[255,255,255]", aber führt natürlich dazu, dass man die Anzahl der Farben eines Frames eine MP4 Videos auf 256 Farben reduzieren muss. Das geschieht mit der Quantization. Das an sich funktioniert sehr gut und 256 Farben sehen besser aus, als man denkt, solange alle verwendeten Farben nahe bei einander liegen in er 24-Bit Palette. Nur wenn man einen großen Bereich der 24-Bit Palette abbilden will, wirken die Farben fleckig und unpassend.

Früher liefen die Animationen auf auf einen 486er und man brauchte nur ein Modem. Das hatte seine Gründe. Einmal waren sehr wenig Farben in den Bildern (max. 8-10) und man hatte maximal 12 Bilder (das war schon eine aufwendige Animation) und hohe Delay-Werte welche Frameraten von 2-3 Frames pro Sekunde zur Folge hatten. Ich habe gelernt, dass man mit 6 fps man schon gute Animationen erzeugen kann, wenn man ein Video als Ausgangsmaterial hat, aber man dann schon schnell in den Megabyte-Bereich kommt bei der Datei. Weniger Farben ist meistens keine Option.

Eine Alternative zu GIF ist WebM, wo man nicht 10MB für die Animation hat sondern ~900KB und dabei noch mehr Farben hat. Leider funktioniert WebM nicht im IE, sondern nur im Firefox und Chrome/Blink-Browsern. Es können schon viele Programme WebM erzeugen, aber man kann nicht einfach ein paar Layer in GIMP anlegen und das als WebM-Video speichern. Als GIF-Animation könnte man es speichern.

Trotzdem würde ich WebM heute immer vorziehen, wenn ich eine Animation einbauen müsste. Erzeugen im Webbrowser geht im Chrome oder Vivaldi aufgrund der nativen WebP-Unterstüzung sehr schnell, was ich mit MP4toGIF.com gut zeigen kann. Firefox ist da sehr viel langsamer, weil noch eine extra WebP-Codierung in JavaScript erfolgen muss.

Um GIF wieder etwas konkurrenzfähiger in MP4toGIF.com zu haben werde ich mich daran machen einen alten Trick einzubauen. Der nicht gerade neue Trick besteht darin nicht jedes Frame der Animation voll zuspeichern, sondern immer nur die Unterschiede zum vorher gehenden Frame zu speichern und den Rest des Frames mit der Transparenz-Farbe aufzufüllen. Damit reduziert man die Farbanzahl und die Speichergröße des Frames. Früher wo das Bild aus großen Farbflächen bestand ging das sehr gut. Jetzt muss sich zeigen, ob bei einem Videobild wirklich noch genug Bildbereiche statisch bleiben um einen ähnlichen positiven Effekt zu erhalten.

Ich werde berichten...
User annonyme 2016-07-20 21:39

write comment:
Five + = 11

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?