EasyLottie指南
GIF vs WebM vs Lottie ZIP：9 实际出口比较
我们通过同一转换器将三个剪辑导出为 GIF、WebM 和光栅 Lottie ZIP。在选择之前比较真实的文件、测量的时间和透明度。
测量的出口：三个来源，三种格式
测量于 2026 年 9 月 9 日在桌面无头 Chrome 152.0.7977.83 中完成，使用真实的 EasyLottie 转换器界面。每份素材针对每种格式分别上传，设置为长边 480 px、24 fps、完整源时长、最多 450 帧。仅绿幕图形启用绿幕抠像，另外两份素材保留原背景。
这是在本地开发构建上按源和格式记录的一次运行，预取库脚本并阻止分析。 Lottie ZIP 和 WebM 使用质量 0.7； GIF 使用自己的固定调色板设置，因此控件并不代表相同的感知质量。下载下面的确切源文件和输出文件，或检查公共清单中的每个字段和 SHA-256 哈希值。
| 源/输出 | 字节 | 尺寸 | 实际帧数/持续时间/平均 fps | 背景调查 |
|---|---|---|---|---|
| 绿屏形状 / Lottie ZIP | 153,023 | 480×480 | 96 / 4.000s / 24.00 fps | 观察到键控 alpha |
| 绿屏形状/GIF | 238,778 | 480×480 | 96 / 4.000s / 24.00 fps | 观察到键控 alpha |
| 绿屏形状/WebM | 18,116 | 480×480 | 81 / 3.963s / 20.44 fps | 观察到键控 alpha |
| UI动画 / Lottie ZIP | 187,773 | 480×270 | 96 / 4.000s / 24.00 fps | 没有钥匙；检查清单中的 alpha |
| UI动画/GIF | 506,377 | 480×270 | 96 / 4.000s / 24.00 fps | 没有钥匙；检查清单中的 alpha |
| UI动画/WebM | 34,001 | 480×270 | 74 / 3.961s / 18.68 fps | 没有钥匙；检查清单中的 alpha |
| 60 fps 测试图案 / Lottie ZIP | 2,279,886 | 480×270 | 360 / 15.000s / 24.00 fps | 没有钥匙；检查清单中的 alpha |
| 60 fps 测试图案 / GIF | 8,915,242 | 480×270 | 360 / 15.000s / 24.00 fps | 没有钥匙；检查清单中的 alpha |
| 60 fps 测试图案 / WebM | 2,574,847 | 480×270 | 308 / 14.962s / 20.59 fps | 没有钥匙；检查清单中的 alpha |
这些文件实际上显示了什么
绿屏源包含 96 相同的解码帧。它演示了背景去除，而不是运动。 UI 源包含不断变化的几何图形； 15 第二个测试模式从 60 fps 开始，并重新采样为 24 fps。 GIF 和 Lottie ZIP 均保留了所请求的 96 / 96 / 360 帧和完整的 4 / 4 / 15-秒持续时间。
MediaRecorder WebM 导出使用的挂钟捕获，并不总是包含请求的帧计数。该表报告了它们的解码帧计数、实际容器持续时间以及计数除以持续时间；它没有为它们标记确切的 24 fps 文件。如果精确的时间很重要，请在您自己的设备上重复导出。
Chrome 以所有三种格式从第一个绿屏输出帧中解码透明背景像素和可见前景像素。 GIF 仅包含二进制 alpha。 Lottie ZIP 和 WebM 也包含部分 alpha。这证明了在此 Chrome 版本上的这些下载中观察到的 alpha，Safari、Firefox、本机应用程序或所有其他播放器不支持。
对于未抠像的源，最终的 GIF 和 Lottie 输出使第一帧完全不透明。 WebM 解码器报告了第一帧的部分 alpha，角 alpha 值为 254，而不是 255；原始像素计数包含在清单中。检查您想要使用的背景上实际导出的图像。
该表给出了每个输出的实际字节大小。大小差异取决于源和请求的设置，并且 WebM 捕获时序可能会在运行之间发生变化。这些综合示例并未建立通用的尺寸排名或同等视觉质量的比较。
一张表中的决定
如果您有一个短片并希望其在网页上透明，那么您实际上是在三个实用输出之间进行选择。它们的最大区别在于透明度质量、浏览器支持和文件大小。
| 标准 | 透明GIF | 透明WebM | Lottie ZIP（光栅） |
|---|---|---|---|
| 透明度 | 1位（硬边） | Alpha 取决于编码器和播放器 | 图像 Alpha 取决于资产和玩家 |
| 颜色深度 | 每帧高达 256 调色板颜色 | 视频编解码器颜色 | 图像资源颜色 |
| 文件大小 | 衡量实际出口 | 衡量实际出口 | 衡量实际出口 |
| 集成检查 | 目的地 GIF 支持 | 目标浏览器 Alpha 播放 | 支持图像的播放器和资产路径 |
| 需要运行时吗？ | 否 | 否（原生<视频>） | 是的（lottie-web 等） |
| 最适合 | 最大兼容性，简约艺术 | 现代、受控的浏览器 | 已使用 Lottie 的应用 |
透明度质量：决定因素
透明 GIF 仅支持 1 位 alpha：像素要么完全可见，要么完全消失。在软边缘、阴影、发光或抗锯齿文本上，这会产生难看的边缘，尤其是在彩色背景上。在将其用于软边图稿之前，请在预期背景上测试结果。
当编码器和播放器支持时，WebM 和光栅 Lottie 可以保留软 Alpha。检查浅色和深色背景下的导出结果；源质量和键控设置仍然会影响头发、阴影、发光和半透明边缘。
文件大小和浏览器支持
每个剪辑都没有单一的最小格式。导出相同的时间范围、尺寸、帧速率和背景设置，然后比较实际字节和播放情况。 WebM alpha 支持是与普通 WebM 播放不同的问题；在每个目标浏览器中测试确切的文件，包括 Safari 和移动环境。
Lottie ZIP 需要支持图像资源的播放器。需要时解压存档并保留动画 JSON 和图像之间的路径。 GIF 不需要 Lottie 运行时，但具有有限的调色板和二进制透明度。在一个播放器中成功预览并不能保证每个平台的兼容性。
如何选择
将格式与您已有的播放器和必须支持的浏览器相匹配。
- 已经在使用 Lottie 播放器？使用可运行的集成示例验证映像资产支持，然后比较 Lottie ZIP。
- 导出的 WebM 是否在目标浏览器中保留 alpha？将其与其他输出进行比较。
- 您的目的地是否需要 GIF 并且您的作品可以容忍二进制透明度？试试GIF。
- 需要后备吗？在发送之前测试确切的后备文件和目的地。
快速清单
- 需要光滑的边缘吗？排除 GIF（1 位 alpha）。
- 支持Safari还是移动？测试实际的 Alpha 播放而不是假设支持。
- 已经加载 Lottie 运行时？ Lottie ZIP 自然贴合。
- 将所有三个导出到本地并与真实剪辑进行比较。
重现工作流程
使用这些本地示例文件重复本指南中描述的检查。在生产项目中使用该文件之前请先检查该文件。
了解极限
- 每个源和格式运行一个桌面 Chrome；没有移动性能或跨浏览器兼容性声明。
- 来源是合成的。绿屏源是静态的；只有 UI 和测试模式源包含运动。
- 请求的设置匹配，但编码质量控制不同。实际输出大小并不是通用的压缩承诺。
- WebM采用实时采集；下载后验证其实际持续时间、帧数和 alpha。
- Lottie 输出包含图像资源。将 JSON 和图像路径放在一起并使用支持图像的播放器。
常见问题
透明 WebM 在 Safari 中工作吗？
不要假设普通 WebM 支持 alpha 播放。在您支持的 Safari 版本和设备中测试精确导出。如果失败，请在兼容播放器中测试 GIF 或图像序列 Lottie 作为替代方案。
为什么我的透明 GIF 看起来呈锯齿状？
GIF 仅支持 1 位透明度，因此软边缘和抗锯齿边缘会变成硬切口。在目标播放器中测试导出的 Lottie ZIP 或 WebM 的 alpha 支持； PNG 序列可以保留全 Alpha 源帧。
哪个最小？
以匹配的尺寸、持续时间、帧速率和背景设置测量您自己的剪辑。内容和编码器设置决定文件大小；没有任何格式可以保证是最小的。
我可以将这三个都导出吗？
该工具提供 Lottie、ZIP、GIF、PNG 序列和 WebM（如果支持）。这里的九个可下载示例是通过实际 UI 导出的。在目标浏览器中检查下载的 alpha 和计时；单独支持 WebM 类型并不能证明透明度。