GIF-Optimierung zur Verbesserung der Performance einer Website

Das GIF (Graphics Interchange Format) wurde 1987 von Steve Wilhite entwickelt und als Farbformat eingeführt. Aufgrund seiner weitläufigen Unterstützung und vor allem weil Animationen daraus kreiert werden konnten, wurde das Format sehr schnell sehr populär und ist heute das älteste verwendete Bildformat. Trotz dieser Allgegenwärtigkeit sind GIFs nicht die leistungsstärkste Bildoption und können die Performance einer Website einschränken. Um das zu verhindern, gibt es in diesem Blogbeitrag einige Tipps, wie GIF-Dateien optimiert werden können.

Wieso sollten GIFs optimiert werden?

Obwohl es hauptsächlich für Animationen verwendet wird, ist das GIF-Format grundsätzlich nicht zu diesem Zweck entwickelt worden. GIF-Animationen benötigen deshalb deutlich mehr Speicherkapazität als andere Bildformate und können somit die Ladezeiten einer Website und folglich das Nutzererlebnis einschränken.

Leistungsstarke Seite trotz GIFs?

Wie ist es also möglich, trotz Einsatz von GIFs, die Performance der Website hoch zu halten oder gar zu verbessern? Ganz allgemein gibt es dafür zwei Methoden.

• Lossy compression: Mit “lossy compression” wird das Komprimieren unter Datenverlust verstanden. Die neue Bilddatei wird dadurch kleiner, büsst aber in der Regel auch an Qualität ein.
• Lossless compression: Mit der “lossless compression” bleibt die Datenmenge des Originals erhalten. Zwar kann dadurch die Bildgrösse nicht so stark reduziert werden wie bei der ersten Methode, die Qualität bleibt jedoch unverändert.

Statische GIFs zu PNG umwandeln

Um die schlechte Performance einer Website zu verbessern, ist es am einfachsten, alle GIF-Bilder zu PNG-Dateien zu konvertieren. Da sich die Qualität der beiden Formate kaum unterscheidet, ist PNG eine geeignete Alternative um Speicherplatz einzusparen, da sich diese Bilder um 5-25% kleiner komprimieren lassen als GIFs. Für die Umwandlung gibt es online eine Reihe von Gratistools, wie Pic.io oder Convertio.

Performance von animierten GIFs verbessern

Viel populärer als statische GIFs sind animierte GIFs. Da diese aus mehreren Bildern bestehen, kann deren Grösse unter Umständen für eine Website sehr problematisch sein. Eine GIF-Animation die nur wenige Sekunden lang ist, kann nämlich bereits mehrere Megabytes gross sein.

Da die meisten animierten GIFs eine Serie von grafischen Elementen beinhalten, können sie nur unter Daten- und somit Qualitätsverlust komprimiert werden. Diese Bildelemente sind jedoch nur leicht unterschiedlich, z.B. verschiedene Farbtöne, wodurch Veränderungen nur selten vom menschlichen Auge wahrgenommen werden.

Weiter können die einzelnen GIFs, aus denen animierte GIFs bestehen, komprimiert werden. Dadurch wird die ganze animierte Datei ebenfalls kleiner. Gratissoftware, wie z.B. lossy GIF compressor, findet man online.

Animierte GIFs zu HTML5 Videos umwandeln

Eine zweite Möglichkeit animierte GIFs zu optimierten, ist jene, sie zu HTML5 Videos zu konvertieren. Mit diesem Vorgehen kann die Grösse der Animationen um bis zu 95% reduziert werden. Ein “HTML5 Video” ist ein Video, das direkt über den Webbrowser innerhalb des <video>-Tags abgespielt werden kann, ohne externe Plugins dafür zu verwenden. Die abgespielte Datei ist dabei ein MP4-File. Neben der kleineren Grösse hat diese Datei auch eine viel bessere Qualität als ein GIF, da es sich dabei um ein eigentliches Videofile handelt und nicht um ein Bildfile. Auch für diese Umwandlung gibt es verschiedene Onlinetools, wie ffmpeg oder Cloud Convert.

Das Ende des GIFs

Dank seiner Vielseitigkeit und der Möglichkeit daraus Animationen zu kreieren, wird das GIF-Format nach 30 Jahren noch immer verwendet – bzw. hat für die Nutzung im Social Media Kontext ein Revival erlebt. Aus SEO-Sicht muss trotz dieser positiven Aspekte jedoch ernsthaft über die Einstellung des Formats nachgedacht werden. GIF-Dateien sind in der Regel zu gross und können sich negativ auf die Performance einer Website und somit aufs Nutzererlebnis auswirken. Deshalb muss deren Optimierung zwingend in Betracht gezogen werden. Statische GIFs sollten zu PNG-Files umgewandelt werden, während animierte GIFs durch HTML5/MP4 Videos ersetzt werden sollten.