Cómo usar: Lottie JSON Optimizer
- Export your animation as Lottie JSON (Bodymovin/LottieFiles) and drop the file here.
- Keep 3 decimals for a safe result; try 2 for extra savings and compare the animation afterwards.
- Download the optimized file and upload it to your Webflow Lottie element (or your player).
Why Lottie files get big
Lottie animations exported from After Effects store every keyframe value with up to 15 decimal places, keep the original layer and shape names, include exporter metadata and sometimes ship hidden guide layers. None of that changes what the animation looks like, but it all has to be downloaded and parsed before the animation plays — slowing pages and hurting Core Web Vitals.
What the optimizer removes
| Optimization | Effect |
|---|---|
| Round numbers (e.g. 80.0000001 → 80) | Usually the biggest win; 3 decimals is visually identical |
Remove names (nm, mn, cl, ln) | Strips human-readable labels (keeps marker names used for segments) |
| Remove metadata | Drops exporter, author and keyword info |
| Remove hidden layers/shapes | Deletes elements flagged hidden (hd: true) |
Using Lottie in Webflow
Webflow’s Lottie element (Add panel → Media → Lottie) accepts uploaded JSON files and controls playback with Interactions. Smaller files load faster, especially when several animations run on one page. If your animation includes embedded raster images (base64 PNG/JPG), they usually dominate the size — compress them before export or replace them with vectors. If you reference layer names in code (e.g. lottie-web’s dynamic properties), keep “Remove layer & shape names” off.
También se busca como: lottie compress, lottie optimizer, bodymovin, lottie json size, webflow lottie, animation optimization.
Herramientas que combinan con: Lottie JSON Optimizer
- SVG to Webflow — Paste an SVG from Figma and copy it to Webflow as real Custom Elements — every <svg>, <path> and <g> becomes an element you can select, class and edit in the 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 to Webflow Rich Text — Paste messy HTML — from an old site, WordPress export, Google Docs or Word — and get clean semantic markup that Webflow’s Rich Text element and CMS import accept without junk.