Cómo usar: Optimizador de Lottie JSON
- Exporta tu animación como Lottie JSON (Bodymovin/LottieFiles) y arrastra el archivo aquí.
- Mantén 3 decimales para un resultado seguro; prueba con 2 si quieres ahorrar más y compara luego la animación.
- Descarga el archivo optimizado y súbelo al elemento Lottie de Webflow (o a tu reproductor).
Por qué los archivos Lottie pesan tanto
Las animaciones Lottie exportadas desde After Effects guardan el valor de cada fotograma clave con hasta 15 decimales, conservan los nombres originales de capas y formas, incluyen metadatos del exportador y, a veces, traen capas guía ocultas. Nada de eso cambia el aspecto de la animación, pero todo tiene que descargarse y analizarse antes de que se reproduzca, lo que ralentiza las páginas y perjudica los Core Web Vitals.
Qué elimina el optimizador
| Optimización | Efecto |
|---|---|
| Redondear números (p. ej. 80.0000001 → 80) | Suele ser la mayor mejora; con 3 decimales el resultado es visualmente idéntico |
Eliminar nombres (nm, mn, cl, ln) | Quita las etiquetas legibles (se mantienen los nombres de marcadores usados para segmentos) |
| Eliminar metadatos | Borra la información de exportador, autor y palabras clave |
| Eliminar capas/formas ocultas | Borra los elementos marcados como ocultos (hd: true) |
Usar Lottie en Webflow
El elemento Lottie de Webflow (panel Añadir → Media → Lottie) acepta archivos JSON subidos y controla la reproducción con Interacciones. Los archivos más pequeños cargan antes, sobre todo si hay varias animaciones en la misma página. Si tu animación incluye imágenes rasterizadas incrustadas (PNG/JPG en base64), suelen ser lo que más pesa: comprímelas antes de exportar o sustitúyelas por vectores. Si haces referencia a nombres de capas en código (por ejemplo, las propiedades dinámicas de lottie-web), desactiva “Eliminar nombres de capas y formas”.
También se busca como: comprimir lottie, optimizador lottie, bodymovin, tamaño lottie json, lottie webflow, optimización de animaciones.
Herramientas que combinan con: Optimizador de Lottie JSON
- SVG a Webflow — Pega un SVG desde Figma y cópialo a Webflow como Custom Elements reales: cada <svg>, <path> y <g> se convierte en un elemento que puedes seleccionar, asignarle clases y editar en el Navigator.
- Compresor de imágenes — Reduce el tamaño de las fotos y los gráficos entre un 50 % y un 90 % sin que se note ninguna pérdida de calidad.
- Formateador JSON — Pega el código JSON para formatearlo, minimizarlo o validarlo.
- HTML a Webflow Rich Text — Pega HTML desordenado, de un sitio antiguo, una exportación de WordPress, Google Docs o Word, y obtén un marcado semántico limpio que el elemento Rich Text de Webflow y la importación CMS aceptan sin basura.