Lottie 在线压缩：优化 JSON、内嵌图片与画布尺寸
Lottie 文件大不一定是 JSON 文本本身造成的。包含 Base64 位图、超大图片或大量透明空白时，图片资源通常更值得先处理。MotionTools 可以保持 Lottie 输出，调整画布尺寸，并对可处理的内嵌图片进行压缩和空白区域优化。
先给结论
- 含有内嵌位图的 Lottie，通常比纯矢量 Lottie 更有压缩空间。
- 先删除不用的素材和图层，再做图片压缩，效果通常比单纯压缩 JSON 文本更稳定。
- 纯矢量文件如果层数、关键帧或路径本身很复杂，应回到设计源文件简化结构。
- 压缩后必须在实际 Lottie 播放器中核对渐变、蒙版、文字、图片路径和循环点。
先判断体积来源
| 现象 | 可能来源 | 优先处理 |
|---|---|---|
JSON 中有大量 data:image/...;base64 | 内嵌图片 | 压缩图片、裁掉透明空白 |
| 图片尺寸远大于显示尺寸 | 过度分辨率 | 按实际显示尺寸重新输出 |
| 几乎没有图片但 JSON 很大 | 图层、路径、关键帧 | 回源简化动效结构 |
| 导出后出现额外图片目录 | 外部资源依赖 | 保持 JSON 与图片目录对应 |
| 只在某个播放器异常 | 兼容性差异 | 用目标播放器复测，不继续盲目压缩 |
操作步骤
- 打开 MotionTools 动效工作区 并上传 Lottie
.json文件。 - 查看画布尺寸、文件大小、时长、帧率和图片素材列表。
- 在格式转换中选择保持 Lottie 输出。
- 如果目标组件尺寸更小，设置目标宽高和内容适配方式。
- 调低图片质量，生成一个中等压缩版本进行对照。
- 在结果预览中检查渐变、遮罩、图片、颜色和首尾帧。
- 下载后分别在目标 Web、Android、iOS 或小程序播放器中测试。
什么情况下效果不明显
纯矢量 Lottie、已经优化过的图片、很短的动画，或者只有少量简单图层时，压缩空间可能有限。此时应优先减少无用图层、重复关键帧、复杂路径和超出画布的内容，而不是继续降低图片质量。
自有纯矢量样本的真实压缩结果
下面的数据来自 MotionTools 项目内置的 src/assets/pro.json，不使用设计社区或礼物服务商的作品素材。本次只运行产品实际使用的 LottieAttrCompressor 属性压缩阶段，输出使用 JSON.stringify 序列化；样本没有图片素材，因此不能把结果理解成图片质量压缩的收益。
压缩参数为：质量 80、removeNameAttributes=false、compressAssetIds=false。输出会写入 tiny=0.8 标记。
| 参数 | 输入 | 输出 |
|---|---|---|
| 文件大小 | 62,646 字节 | 60,774 字节 |
| 画布 | 1024 × 1024 | 1024 × 1024 |
| 帧率 | 60 FPS | 60 FPS |
| 帧区间 | 0 → 80 | 0 → 80 |
| 总帧数 | 80 帧 | 80 帧 |
| 顶层图层数 | 11 | 11 |
| 素材数 / 图片素材数 | 0 / 0 | 0 / 0 |
结果减少 1,872 字节，压缩率为 2.99%。这个数字的价值在于说明边界：对于已经较精简、没有内嵌图片的纯矢量 Lottie，属性压缩收益可能很有限，不能把 2.99% 当作其他文件的承诺。此时更有效的方向通常是回到设计源文件减少图层、关键帧和复杂路径。
宽高、帧率、帧区间、图层数和素材数保持不变，只能证明这些文件级参数没有漂移，不代表逐像素完全一致。压缩结果仍需在目标播放器、目标设备和真实业务背景中验收。输入与输出 SHA-256、完整参数和复现命令见机器可读案例清单。
质量验收
- JSON 能被目标播放器正常解析，没有缺图或资源路径错误。
- 渐变没有变色，蒙版、混合效果和透明区域没有异常。
- 图片边缘和品牌图没有明显失真。
- 画布比例、主体位置和裁切范围符合实际坑位。
- 动画时长、帧率、循环点和缓动观感与源文件一致。
- 文件变小的同时，播放器加载和首帧时间没有恶化。
限制与注意事项
- Lottie 播放效果取决于导出器、JSON 特性和目标播放器版本。
- 不同端对 AE 效果、渐变、遮罩、表达式和字体的支持可能不同。
- 将 Lottie 转成视频会保留最终画面，但不会保留可编辑矢量结构。
- 降低图片质量可能产生色带、模糊或透明边脏边，应逐档比较。
相关内容
能力核对日期：2026-08-16。当前压缩路径主要处理 Lottie 画布和内嵌图片；纯矢量结构优化仍应优先在设计源文件完成。