Was ist Lottie?
Lottie-Dateien sind eine Art animierte Datei, die mit Lottie, einer Open-Source-Bibliothek, erstellt werden.
Lottie-Dateien basieren auf dem JSON-Dateiformat und können mit einer Vielzahl von Tools erstellt und bearbeitet werden, einschließlich Adobe After Effects und Figma.
Die erste Anlaufstelle für das Thema Lottie ist die Website LottieFiles.com.
Hier erhältst du kostenfreie und auch kostenpflichtige Premium-Inhalte für deine Website.
Auch findest du hier wertvolle Integrationen und Plugins, wie Plugins für Adobe After Effects, Figma, WordPress und weitere nützliche Dinge.
Hierbei unterstützt dich die Lottie Website
Über die Lottie-Website kannst du dir die Lottie-Files nicht nur in folgenden Dateiformaten ausgeben lassen:
- Lottie JSON: Textbasiertes Format, welches für Entwickler leichter zu implementieren ist
- Optimierte Lottie JSON: Lottie Datei mit einer deutlich geringeren Dateigröße (im Schnitt 34% kleiner als herkömmliche Lottie JSON Dateien. In der Bildqualität gibt es keine Abzüge.
- dotLottie: Ein komprimiertes Format für dotLottie-Player
- Optimized dotLottie: Optimierte und komprimierte dotLottie-Datei
Du kannst zudem auch dein Lottie File mit folgenden und weiteren Funktionen anpassen.
- Farbpalette wechseln
- HTML-Code zur Einbettung anzeigen lassen
- Hilfestellung zur Einbettung unter iOS, Android, Wix, Webflow, Embed HTML und Framer
- Zoomen
- gemeinsames Arbeiten im Team
- Kommentare hinzufügen
- Versionshistorie ansehen
Größenunterschiede der einzelnen Lottie-Dateiformate
Um dir die Größenunterschiede bei den verschiedenen Formaten zu verdeutlichen, haben wir hier eine Tabelle für dich.
Lottie JSON | Optimiertes Lottie JSON | dotLottie | Optimiertes dotLottie | GIF | MP4 | WebM | MOV |
---|---|---|---|---|---|---|---|
33,1 KB | 21,7 KB (kostenpflichtig) | 3 KB | 2,7 KB (kostenpflichtig) | 68,5 KB | 16,3 KB | 23,2 KB | 16,3 KB |
Hierbei ist zu beachten, dass dir das Optimierte Lottie JSON und das optimierte dotLottie nur in der kostenpflichtigen Premium-Version zur Verfügung steht.
Außerdem kannst du die 4 weiteren Exportformate GIF, MP4, WebM und MOV lediglich in 150 x 150 Pixel un 60 fps exportieren.
Auch kannst du in der kostenlosen Version Transparenzen aktivieren.
Wie du sehen kannst, gibt es auch hier bei den verschiedenen Formaten teilweise große Unterschiede in der Dateigröße.
Preise von Lottiefiles.com
LottieFiles bietet ausschließlich Abonnements zur jährlichen Zahlung an.
Professional | Team | Enterprise |
---|---|---|
19,99$ / Nutzer / Monat | 24,99$ / Nutzer / Monat | 49,99$ / Nutzer / Monat |
Vorteile von Lottie Dateien
Lottie-Dateien bieten eine Reihe von Vorteilen gegenüber anderen Arten von animierten Dateien.
Aufgrund ihrer deutlich geringeren Größe können diese deutlich schneller geladen werden als GIFs oder MP4-Dateien.
Ladezeiten sind ein wichtiger Faktor für die SEO, da sie die Nutzererfahrung beeinflussen und dazu führen können, dass Nutzer deine Website verlassen, bevor diese vollständig geladen ist.
Hier sind weitere Vorteile von Lottie-Files gegenüber anderen “beweglichen” Dateiformaten.
- Kleiner: Lottie-Dateien sind viel kleiner als GIF- oder MP4-Dateien, was zu schnelleren Ladezeiten führt.
- Cross-Plattform: Lottie-Dateien können auf allen Plattformen mit einem Webbrowser angezeigt werden.
- Responsiv: Lottie-Dateien können sich an die Größe des Bildschirms des Benutzers anpassen.
- Einfach zu erstellen: Lottie-Dateien können mit verschiedenen Tools erstellt werden, einschließlich Adobe After Effects und Figma. Die offizielle Lottie-Website bietet für After Effects ein eigenes Plugin. Dieses findest du hier.
Lottie-Dateien werden zunehmend für eine Vielzahl von Zwecken verwendet, wie z. B.:
- Webdesign: Lottie-Dateien können verwendet werden, um animierte Elemente auf Websites hinzuzufügen, z. B. Menüs, Schaltflächen oder Header.
- App-Design: Lottie-Dateien können verwendet werden, um animierte Elemente in Apps hinzuzufügen, z. B. Benutzeroberflächen, Ladeanzeigen oder Spielgrafiken.
- Social-Media: Lottie-Dateien können verwendet werden, um animierte Inhalte in sozialen Medien zu erstellen, z. B. GIFs, Videos oder Stories.
Lottie-Dateien sind eine vielseitige und effektive Möglichkeit, Animationen zu erstellen.
Sie sind klein, cross-plattform-geeignet und einfach zu erstellen, was sie zu einer guten Wahl für eine Vielzahl von Zwecken macht.
Beispiele für die Verwendung von Lottie-Dateien für SEO
- Lottie-Dateien als Hintergrundbilder oder Header auf deiner Website: Dies kann dazu beitragen, deine Website ansprechender und interessanter zu gestalten und die Nutzerbindung zu erhöhen.
- Lottie-Files in deinen Blogbeiträgen oder Produktseiten verwenden, um Inhalte zu visualisieren: Dies kann dazu beitragen, dass deine Inhalte informativer und ansprechender sind und sich die Klickraten erhöhen.
- Lottie in Social-Media-Posts verwenden: Durch animierte Inhalte kannst du mehr Aufmerksamkeit erzeugen und die Nutzer zum Interagieren animieren.
In diesen Tools kannst du Lottie nutzen
Folgende Tools arbeiten mit Lottie zusammen bzw. machen eine Implementierung möglich
In diesen Tools kannst du Lottie Animationen erstellen
- Adobe After Effects
- Figma
- Lottie Creator
- SVG to Lottie
- Cavalry
- Fable
- Flow
- Glaxnimate
- Haiko Animator
- Inkscape
- Jitter
- Keyshape
- Synfig Studio
In diesen Produktivitätstools kannst du Lottie verwenden
- Notion
- Google Workspace
- Microsoft 365
- Camtasia
In diesen Web-Tools kannst du Lottie-Dateien verwenden
- WordPress
- Webflow
- Wix
- FlutterFlow
- Strapi
- Bubble
- Editor X
- Adalo
- Elementor
- Kodika.io
- STUDIO
Diese Designtools arbeiten mit Lottie
- Canva
- Figma
- Framer
- Wix
- Play
- Origami Studio
- ProtoPie
- Supernova
- Sketch
Fazit
Lottie-Dateien können dich positiv bei der SEO deiner Website unterstützen.
Die Dateien sind deutlich kleiner als JPG-, PNG-, GIF- oder MP4-Dateien, responsiv und können dich bei deinen Maßnahmen für SEO unterstützen.
So können sie auf verschiedene Weise verwendet werden, um deine Website ansprechender und informativer zu machen, um so neue Interessenten zu gewinnen.
Ist Lottiefiles kostenlos?
Du kannst unzählige Lottie Files kostenlos nutzen und die Dateien als Lottie JSON auf deiner Website einbetten. Für weitere Pro-Lotties und erweiterte Funktionen gibt es eine jährliche Mitgliedschaft.