Comment utiliser : Optimiseur JSON Lottie
- Exportez votre animation au format Lottie JSON (Bodymovin/LottieFiles) puis déposez le fichier ici.
- Conservez 3 décimales pour un résultat sûr ; essayez 2 pour gagner encore de la place, puis comparez l’animation.
- Téléchargez le fichier optimisé et importez-le dans votre élément Lottie Webflow (ou dans votre lecteur).
Pourquoi les fichiers Lottie sont-ils volumineux ?
Les animations Lottie exportées depuis After Effects stockent chaque valeur d’image clé avec jusqu’à 15 décimales, conservent les noms d’origine des calques et des formes, incluent des métadonnées d’exportation et contiennent parfois des calques guides masqués. Rien de tout cela ne modifie le rendu de l’animation, mais tout doit être téléchargé et analysé avant la lecture — ce qui ralentit les pages et dégrade les Core Web Vitals.
Ce que supprime l’optimiseur
| Optimisation | Effet |
|---|---|
| Arrondir les nombres (ex. 80.0000001 → 80) | Généralement le gain le plus important ; 3 décimales sont visuellement identiques |
Supprimer les noms (nm, mn, cl, ln) | Supprime les libellés lisibles (conserve les noms de marqueurs utilisés pour les segments) |
| Supprimer les métadonnées | Retire les informations sur l’exportateur, l’auteur et les mots-clés |
| Supprimer les calques/formes masqués | Supprime les éléments signalés comme masqués (hd: true) |
Utiliser Lottie dans Webflow
L’élément Lottie de Webflow (panneau Ajouter → Média → Lottie) accepte les fichiers JSON importés et pilote la lecture avec les Interactions. Des fichiers plus légers se chargent plus vite, surtout lorsque plusieurs animations sont présentes sur une même page. Si votre animation contient des images matricielles intégrées (PNG/JPG en base64), elles représentent généralement l’essentiel du poids : compressez-les avant l’export ou remplacez-les par des vecteurs. Si vous faites référence aux noms de calques dans le code (par exemple les propriétés dynamiques de lottie-web), laissez désactivée l’option « Supprimer les noms de calques et de formes ».
Aussi recherché comme : compresser lottie, optimiseur lottie, bodymovin, taille fichier lottie json, webflow lottie, optimisation animation lottie.
Outils complémentaires : Optimiseur JSON Lottie
- SVG vers Webflow — Collez un SVG depuis Figma et copiez-le dans Webflow sous forme de véritables Custom Elements : chaque <svg>, <path> et <g> devient un élément que vous pouvez sélectionner, classer et modifier dans le Navigator.
- Compresseur d’images — Réduisez la taille de vos photos et de vos graphiques de 50 à 90 % sans perte de qualité visible.
- Formateur JSON — Collez votre code JSON pour le formater, le compresser ou le valider.
- HTML vers Webflow Rich Text — Collez du HTML désordonné (ancien site, export WordPress, Google Docs ou Word) et obtenez un balisage sémantique propre, accepté par l’élément Rich Text de Webflow et par l’import CMS sans résidus.