Como usar: Otimizador de JSON Lottie
- Exporte sua animação como Lottie JSON (Bodymovin/LottieFiles) e arraste o arquivo para cá.
- Mantenha 3 casas decimais para um resultado seguro; experimente 2 para economizar mais e compare a animação depois.
- Baixe o arquivo otimizado e envie para o seu elemento Lottie no Webflow (ou no seu player).
Por que os arquivos Lottie ficam grandes
Animações Lottie exportadas do After Effects guardam cada valor de keyframe com até 15 casas decimais, mantêm os nomes originais de camadas e formas, incluem metadados do exportador e às vezes trazem camadas-guia ocultas. Nada disso muda como a animação fica, mas tudo precisa ser baixado e processado antes de a animação tocar, deixando as páginas mais lentas e prejudicando os Core Web Vitals.
O que o otimizador remove
| Otimização | Efeito |
|---|---|
| Arredondar números (ex.: 80.0000001 → 80) | Geralmente é o maior ganho; 3 casas decimais são visualmente idênticas |
Remover nomes (nm, mn, cl, ln) | Remove rótulos legíveis (mantém os nomes de marcadores usados para segmentos) |
| Remover metadados | Elimina informações de exportador, autor e palavras-chave |
| Remover camadas/formas ocultas | Apaga elementos marcados como ocultos (hd: true) |
Usando Lottie no Webflow
O elemento Lottie do Webflow (painel Add → Media → Lottie) aceita arquivos JSON enviados e controla a reprodução com Interactions. Arquivos menores carregam mais rápido, principalmente quando várias animações rodam na mesma página. Se sua animação inclui imagens rasterizadas embutidas (PNG/JPG em base64), elas geralmente dominam o tamanho: comprima-as antes de exportar ou substitua por vetores. Se você referencia nomes de camadas no código (ex.: propriedades dinâmicas do lottie-web), deixe a opção “Remover nomes de camadas & formas” desmarcada.
Também pesquisado como: comprimir lottie, otimizar lottie json, bodymovin, tamanho do arquivo lottie, lottie webflow, otimização de animação.
Ferramentas que combinam com: Otimizador de JSON Lottie
- SVG para Webflow — Cole um SVG do Figma e copie para o Webflow como Custom Elements de verdade.
- Compressor de imagens — Reduz o tamanho das fotos e dos gráficos em 50–90% sem perda visível de qualidade.
- Formatação JSON — Cole o JSON aqui para formatá-lo, compactá-lo ou validá-lo.
- HTML para Webflow Rich Text — Cole HTML bagunçado, de um site antigo, de uma exportação do WordPress, do Google Docs ou do Word, e receba marcação semântica limpa que o elemento Rich Text e a importação de CMS do Webflow aceitam sem lixo.