GIFs werden bisher vor allem in sozialen Netzwerken, als Werbebanner und auf Webseiten eingesetzt, um ein wenig mehr Emotion und Dynamik einzubringen. Das Animations-Format ist flexibel einsetzbar, verbraucht im Gegensatz zu klassischen Videos weniger Speicher und damit Ladezeit. Dabei lässt ihre Qualität jedoch leider des Öfteren zu wünschen übrig. Diese Schwäche macht sich Lottie zunutze: Warum immer mehr professionelle Webseiten auf Lottie statt GIF setzen, erklären wir in unserem Vergleich Lottie vs. GIF.
Was sind Lottie Animationen?
Lottie Animationen sind nichts anderes als Animationen, die in Adobe After Effects erstellt und danach in Code umgewandelt wurden. Das Framework macht das Nachbauen der Animation durch den Entwickler überflüssig, weil die Animation in Echtzeit gerendert wird. Wie schneidet dieses Webdesign-Format in Sachen Dateigröße, Qualität, Anwendung und Workflow gegenüber GIFs ab? Unser Vergleich zeigt die Unterschiede an einem Beispiel.
DATEIGRÖSSE
Während das GIF 4.1 MB aufweist, nimmt Lottie mit nur 137.71 kB deutlich weniger Speicher in Anspruch. Dadurch wird die Animation auf Webseiten deutlich schneller geladen und verbessert so die Nutzer-Erfahrung.
QUALITÄT
Schon beim Vergleich der beiden Animationen erkennt man einen deutlichen Unterschied. Bei GIFs sieht man vor allem bei Farbverläufen einen mächtigen Unterschied zu Lotties. Auch beim Skalieren der Animationen erkennt am, wie scharf Lotties bleiben.
Eine weitere Stärke des Lottie Formats zeigt sich bei Animationen, die einen transparenten Hintergrund aufweisen. Bei Lottie Animationen wird der Alpha-Kanal problemlos erkannt, GIFs dagegen weisen oft stufige oder pixelige Kanten auf.
ANWENDUNG
Während GIFs meist einfach in Endlosschleife laufen, sind Lotties ein guter Weg, Webseiten interaktiver zu machen. Durch sämtliche Einstellungsoptionen lässt sich ihr Abspielen durch den Nutzer beeinflussbar machen. Zum Beispiel indem man das Abspielen vom Scrollen oder Hovern abhängig macht.
WORKFLOW
Zahlreiche Online-Editors helfen, kurze Videos oder Bild-Sequenzen als GIF zu exportieren. Außerdem besteht die Möglichkeit, GIFs über Photoshop, After Effects oder Premiere Pro zu erstellen. Der Workflow ist sehr intuitiv, da es eine Vielzahl an Anbietern gibt, die den Prozess auch für Laien leicht verständlich machen.
Bei Lottie ist das gerade noch anders. Der Workflow umfasst mehrere Schritte, die für Anfänger zu Beginn etwas kompliziert scheinen. Um eine Animation beispielsweise über Adobe After Effects zur Lottie umzuwandeln, müssen einige Schritte durchlaufen werden. Zuerst muss das Video als Bild-Abfolge exportiert werden, dann können diese als Sequenz wieder in After Effects eingesetzt werden. Mit einem Plugin wird sie dann in eine JSON- Datei gerendert. Wenn dieser Vorgang abgeschlossen ist, kann der Code in den Webplayer implementiert werden.
Ist man auch mit vorgefertigten Lotties zufrieden , gibt es einige Plattformen, bei denen man sich bedienen kann.
FAZIT: Lottie wird GIFs überholen
Vor allem im Social Media Bereich werden uns GIFs weiterhin begleiten. Die Animationen lassen sich schnell und leicht von einer großen Zielgruppe erstellen. In den sozialen Netzwerken bleiben GIFs Trend, denn dort zählt eher Zugänglichkeit als Qualität.
Im professionellen Umfeld führt dagegen nichts an Lottie vorbei: Schon jetzt werden sie auf Unternehmens-Webseiten den GIFs vorgezogen, da sie bei höherer Skalierung viel bessere Qualität bieten, wobei die Dateigröße nur einen Bruchteil der GIFs ausmacht. Durch das Verbreiten von kostenlosen Online-Tools rücken Lottie Animation aber auch im privaten Bereich immer mehr in den Vordergrund.
Unsere Grafikerinnen und Grafiker sind stets auf der Suche nach neuen Formen der Darstellung, die wie Lottie auch im SEO-Kontext eingesetzt werden können. Sowohl GIFs als auch Lotties erstellt unsere professionelle Grafik- und Design-Agentur.
SEO-Lottie von DavidLi
