Neues Format für Animationen: GIFs vs. Lottie

Scroll  ____
Share
| | 01. Februar 2021
Allgemein | Design | News

GIFs kennt jeder! Doch was ist Lottie? Unser Vergleich zeigt die Stärken und Schwächen dieser beiden Formate für Online-Animationen.

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

Kostenlose Erstberatung!
  • This field is for validation purposes and should be left unchanged.
That must be interesting!
Die seowerk News halten jede Woche interessante Beiträge, rund um die Themen SEO, SEA, Social Media, Storytelling, UX und vieles mehr für Sie bereit.
  • This field is for validation purposes and should be left unchanged.
Volle Säle bei Content-Themen: mit Storytelling interagieren & konvertieren Die Orga lief allerdings so reibungslos, dass es sich nicht anfühlte, […]
Weiterlesen
  |    |  
Das unterscheidet Twitter von anderen Plattformen Die 2006 gegründete Mikroblogging-Plattform Twitter zählt mit 139 Millionen aktiven Nutzer:innen pro Tag zu […]
Weiterlesen
Natürlich hätte es für eine Google AdWords Agentur oder schlicht Werbende Vorteile, wenn ihre Google AdWords Anzeigen künftig durch Bilder mehr auffallen […]
Weiterlesen
Unser Wolfgang Winter hat vor kurzem im Rahmen des Online Marketing Tags ein Webinar zum Thema Gewinnbringendes Affiliate Marketing für KMU gehalten. […]
Weiterlesen
Neues Update von Google kommt – was ändert sich für Suchmaschinenoptimierung? Mit dem neuen Update wird der Suchalgorithmus von Google […]
Weiterlesen
So kommt das virtuelle Klassenzimmer online zu den Entscheidern Am 11. März 2020 schlossen die ersten Schulen, bevor Bayern nur […]
Weiterlesen
Clubhouse: Was ist das genau? Clubhouse ist ein Audio Network aus den USA, bei der Anwender Gesprächen und Diskussionen wie […]
Weiterlesen
Was ist dieser Cyber Monday? Für die Amerikaner war wohl Halloween noch nicht genug. Sie erfanden auch noch den Black […]
Weiterlesen
  |  
Google Core Update 2020: Was hat sich verändert? Veränderungen im Sichtbarkeitsindex zeigen sich bei Webseiten aus den Bereichen Affiliate, Finance, […]
Weiterlesen
Was zeichnet die Generation Z aus? Die Generation Z ist ständig online. Laut der ARD/ZDF Online Studie 2019 waren mehr […]
Weiterlesen
  |    |  
Der Customer Lifecycle – ein Begriff, den man im Bereich Marketing häufig hört. Was ist der Customer Lifecycle? Und wie […]
Weiterlesen
LinkedIn schaltet ein Algorithmus-Update und die ersten Fragen, die man sich stellt, sind erfahrungsgemäß: „Was hat sich verändert?“ und „Was […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram