So nutzt du: Lottie JSON Optimierer
- Exportiere deine Animation als Lottie JSON (Bodymovin/LottieFiles) und zieh die Datei hier hinein.
- Behalte 3 Nachkommastellen für ein sicheres Ergebnis. Probier 2 für mehr Ersparnis und vergleich danach die Animation.
- Lade die optimierte Datei herunter und lade sie in dein Webflow-Lottie-Element (oder deinen Player) hoch.
Warum Lottie-Dateien so groß werden
Lottie-Animationen, die aus After Effects exportiert werden, speichern jeden Keyframe-Wert mit bis zu 15 Nachkommastellen, behalten die originalen Layer- und Formnamen, enthalten Exporter-Metadaten und liefern manchmal versteckte Hilfsebenen mit. Nichts davon verändert das Aussehen der Animation, aber alles muss heruntergeladen und verarbeitet werden, bevor die Animation abgespielt wird. Das verlangsamt Seiten und schadet den Core Web Vitals.
Was der Optimierer entfernt
| Optimierung | Effekt |
|---|---|
| Zahlen runden (z. B. 80.0000001 → 80) | Meist der größte Gewinn; 3 Nachkommastellen sehen identisch aus |
Namen entfernen (nm, mn, cl, ln) | Entfernt lesbare Bezeichnungen (Marker-Namen für Abschnitte bleiben erhalten) |
| Metadaten entfernen | Entfernt Angaben zu Exporter, Autor und Schlagwörtern |
| Versteckte Ebenen/Formen entfernen | Löscht Elemente, die als versteckt markiert sind (hd: true) |
Lottie in Webflow verwenden
Das Lottie-Element von Webflow (Add-Panel → Media → Lottie) akzeptiert hochgeladene JSON-Dateien und steuert die Wiedergabe über Interactions. Kleinere Dateien laden schneller, besonders wenn mehrere Animationen auf einer Seite laufen. Wenn deine Animation eingebettete Pixelbilder (Base64 PNG/JPG) enthält, machen diese meist den Großteil der Dateigröße aus. Komprimiere sie daher vor dem Export oder ersetze sie durch Vektoren. Wenn du Layer-Namen im Code referenzierst (z. B. dynamische Eigenschaften von lottie-web), lass die Option „Layer- & Formnamen entfernen“ deaktiviert.
Auch gesucht als: lottie komprimieren, lottie optimierer, bodymovin, lottie json größe, lottie json verkleinern, webflow lottie, animation optimierung.
Passende Tools zu: Lottie JSON Optimierer
- SVG zu Webflow — Füge ein SVG aus Figma ein und kopiere es als echte Webflow Custom Elements – jedes <svg>, <path> und <g> wird zu einem Element, das du im Navigator auswählen, mit Klassen versehen und bearbeiten kannst.
- Bildkompressor — Verkleinere Fotos und Grafiken um 50–90 % ohne sichtbaren Qualitätsverlust.
- JSON Formatierer — Füge JSON ein, um es zu formatieren, zu minifizieren oder zu prüfen.
- HTML zu Webflow Rich Text — Füge unsauberes HTML ein, etwa von einer alten Website, einem WordPress-Export, aus Google Docs oder Word.