Neues Format für Animationen: GIFs vs. Lottie

| | 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!

*“ zeigt erforderliche Felder an

Dieses Feld dient zur Validierung und sollte nicht verändert werden.
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.

*“ zeigt erforderliche Felder an

Dieses Feld dient zur Validierung und sollte nicht verändert werden.
  |  
Die KI-Revolution wurde am 30.11.2022 durch die Veröffentlichung des populärsten KI-Chatbots „Chat-GPT“ weltweit eingeleitet, welcher auf einem Large Language Model basiert und innerhalb kürzester Zeit mehrere 100 Millionen Nutzer gewinnen konnte.
Weiterlesen
  |    |  
Ab 28. Juni 2025 müssen Webseiten und Apps laut Barrierefreiheitsstärkungsgesetz barrierefrei sein, indem sie unter anderem Leichte Sprache nutzen, um für alle zugänglich zu sein.
Weiterlesen
  |  
Auf der Suche nach einem benutzerfreundlichen und vielseitigen Design-Tool bist du sicherlich bereits auf Canva aufmerksam geworden. Canva hat zweifellos die Designlandschaft verändert und bietet eine beeindruckende Plattform für kreative Bearbeitungen.
Weiterlesen
  |  
Gender-Star, Gender_Gap und Binnen-I – was auf den ersten Blick kompliziert klingt, ist ein Schritt in eine gleichberechtigte Zukunft. Ob […]
Weiterlesen
  |  
Überwinde deine Schreibblockade Als Texter:in oder Content Creator hast du einen wichtigen Job: Du bringst Ideen und Gedanken auf Papier […]
Weiterlesen
  |  
10+1 Anwendungen, wie ChatGPT bei der Erstellung von SEO-Content hilft Seit November 2022 ist ChatGPT als Forschungsvorschau für die Öffentlichkeit […]
Weiterlesen
  |  
Was sind saisonale Suchbegriffe?  Es ist kurz vor Weihnachten: Die Feiertage stehen vor der Tür und die letzten Geschenke landen […]
Weiterlesen
  |  
Kürzlich ist eine Alternative zur Suchmaschine Google erschienen. Neeva heißt der neue Suchdienst, der Suchen ohne Werbung und Tracking verspricht. In diesem Beitrag möchten wir Euch die neue Suchmaschine vorstellen und erklären, warum SEO gerade auf Neeva so wichtig ist.
Weiterlesen
  |  
Menschen mögen den Komfort des hybriden Shoppings Die Kluft zwischen Online- und Offline-Handel zu überwinden, stellt viele Händler:innen vor neue […]
Weiterlesen
  |  
Was ist lokale Suchmaschinenoptimierung? Lokale Suchmaschinenoptimierung (Local SEO) ist ein Aufgabenbereich der klassischen Suchmaschinenoptimierung. Ziel ist es, lokale sowie regionale […]
Weiterlesen
  |  
Was bedeutet Omnichannel-Marketing? Der Begriff Omnichannel heißt übersetzt soviel wie "alle Kanäle". Das bedeutet, dass ein Unternehmen Kund:innen kanalübergreifend anspricht […]
Weiterlesen
  |  
Eine Infografik für soziale Medien zu erstellen, ist im Grunde genommen gar nicht so schwierig. Willst du die Reichweite deiner […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram