Dadurch, dass die Performance von Webseiten immer mehr in den Fokus von Suchmaschinen gerät und auch die generelle Aufmerksamkeitsspanne immer weiter sinkt, zählt jede Sekunde um keine wertvollen Besucher zu verlieren. Zwischen schönen Animationen und der Performance herrscht seit jeher jedoch ein Zielkonflikt. Das eine war nicht gleichzeitig erreichbar mit dem anderen, jedoch verändern neue Technologien in der Hinsicht nun alles!
Wer kennt es nicht: man sucht nach Informationen, einem Anbieter für irgendeine Dienstleistung oder nach irgendwelchen Katzenvideos. Das endlose Herumgesuche im Internet kann sehr langweilig werden, doch dann kommt eine Seite, die gleich durch eine nette Animation Ihre Aufmerksamkeit gewinnt. Aber woran liegt das? Zum einen daran, dass wir ganz animalisch gesehen auf Bewegungen sofort achten. Das konnte früher unser Überleben sichern und ist somit fundamentaler Bestandteil unseres Gehirns. Zudem drückt eine Animation direkt Professionalität aus, da man davon ausgeht, dass ein hoher Aufwand dahinter stecken muss, oder etwa doch nicht? Und hier kommt Lottie ins Spiel!
Was ist Lottie?
Lottie ist ein öffentliches Projekt des Unternehmen AirBnB – hat aber nicht viel mit irgendwelchen Unterkünften zu tun. Es handelt sich hierbei um eine Bibliothek für Android, iOS, Web und Windows, die mit Bodymovin als Json exportierte Adobe After Effects Animationen analysiert und nativ auf Mobilgeräten und im Web rendert. Sie haben kein Wort verstanden? Kein Problem, das bedeutet mehr oder weniger nur, dass ein Lottie nicht in aufwändiger Handarbeit von Animateuren entsteht, sondern eine Grafik in After Effects animiert wird und im Web und auch Apps dargestellt werden kann. Das ist eine massive Zeiteinsparung in der Erstellung, was sich auch in den Kosten für die Erstellung einer Lottie-Animation zeigt. Das ist aber noch nicht alles! Durch die Architektur der Lottie-Dateien benötigen diese nur eine geringe Dateigröße und sind somit für Webanimationen bestens geeignet, da sie die Ladezeiten kaum beeinflussen!
Das ist eine Lottie-Animation:
Die Performance im Vergleich zu Alternativen:
Lottie vs. PNG Sequenzgrafiken
Einer der größten Nachteile von PNG-Sequenzgrafiken ist, dass sie ziemlich groß sind, was den Export und die Benutzbarkeit auf verschiedenen Schnittstellen zu einem ziemlichen Problem machen kann. Lottie-Dateien sind im Vergleich dazu extrem klein und bequem zu handhaben (etwa 30-50 Mal kleiner!!!), verbrauchen sehr wenig Speicherplatz, haben eine schnelle Download-Geschwindigkeit und halten den Betrieb Ihrer Website oder Anwendung dank minimaler Störungen so reibungslos wie möglich.
Lottie vs. GIFs
Obwohl sie kleiner als PNG-Grafiken sind, sind GIFs immer noch ein ziemlich platzraubendes Format, das im Vergleich zu einer einfachen Lottie-Animation doppelt so groß ist. GIFs werden in der Regel auch auf eine feste Größe skaliert. Das bedeutet, dass Sie sie nicht modifizieren können, um sie besser an die Skalierung auf einer anderen Oberfläche anzupassen als dort, wo sie ursprünglich erstellt wurden. Lottie-Animationen geben Ihnen den Raum, den Sie benötigen, um sie sowohl an großformatige Lösungen als auch an kleinere Projekte anzupassen.
Lottie vs. klassische Videos
Wenn es darum geht, visuelle Inhalte zur weiteren Verbesserung digitaler Strategien zu nutzen, werden Videoinhalte häufig mit Animationen in Konflikt gebracht. Für Videoinhalte, insbesondere für Live-Action-Material, müssen Sie eine Vielzahl von Ressourcen wie Requisiten, Schauspieler und Drehorte bereitstellen. Animationen sind relativ einfachere und preiswertere Alternativen, die die Arbeit trotzdem erledigen. Ganz zu schweigen davon, dass eine gute Animation Ihre Besucher beschäftigt und sie nicht dazu bringt diese wegzuklicken.
Lottie vs. kodierte Animationen
Als Designer möchten Sie den Entwicklungsprozess rationalisieren und ihn so effizient und kosten- bzw. ressourcensparend wie möglich gestalten. Das Schreiben von Animationen in Code kann ein zeit- und fähigkeitsintensiver Prozess sein, ganz zu schweigen davon, dass man beim Schreiben des Codes auf eine Vielzahl von Problemen stoßen kann. Anstatt wertvolle Ressourcen, entweder für die Auslagerung des Projekts oder die Einstellung von Fachkräften aufzuwenden, sollten Sie ein alternatives Animationstool in Form von Lottie verwenden, das intuitiv, skalierbar und mit mehreren Plattformen kompatibel ist.
Fazit
Wenn Sie auf der Suche nach preiswerten Animationen für die Zukunft sind, sollten Sie auf Lottie setzen. Sie überzeugen durch Preis, Performance und Skalierbarkeit. Einziger Nachteil von Lottie ist, dass durch das native Rendern beim Endgerät ein höherer Energie-und Arbeitsspeicher-Verbrauch entstehen kann. Das stellt aber in der Regel kein Problem dar, da die Leistung unserer Endgeräte sowieso massiv zugenommen hat und auch in Zukunft weiter zunehmen wird!
Quellen:
https://lottiefiles.com/what-is-lottie
https://drawer.design/blog/why-we-prefer-lottie-over-other-animation/
Externe Animationen: SVGenius @LottieFiles
Externe Bilder: Mehaniq @20twenty