WebM Alpha、ProRes 4444 还是 PNG 序列：透明动画应该怎么选？

WebM Alpha、ProRes 4444 和 PNG 序列都能保存透明度，但分别面向不同的交付环节。网页交付优先考虑 WebM Alpha，剪辑与合成优先考虑 ProRes 4444，需要逐帧控制或通用母版时保留 RGBA PNG 序列。

仅有这个结论还不够。相同动画导出后究竟有多大？经过视频编码和再次解码，Alpha 是否真的还在？我们把同一段 AnimGen 动画分别导出为三种格式，记录文件大小，再把两种视频完整解码回 96 帧，与源 PNG 做逐像素对照。本文使用的文件也全部开放下载。

按最终交付目标选择格式

如果整个流程都由你控制，可以把 PNG 序列留作通用源文件，再按目标生成 WebM、ProRes 或游戏资产。若只导出一种，就从“下一个软件如何使用它”出发，而不是从格式名字听起来是否专业出发。

同一段透明动画，三份真实文件

本次使用 AnimGen 公开的等轴战士挥砍序列。源文件包含 96 张 512 × 512 的 RGBA PNG，按 24 FPS 播放，共 4.00 秒。画布尺寸固定，动作不循环，四角都是完全透明像素，适合用来检查 Alpha 是否在处理过程中丢失。

可以直接下载本文使用的文件：

• 下载 96 帧 RGBA PNG 序列 ZIP
• 下载 WebM Alpha
• 下载 ProRes 4444 MOV
• 查看测量清单与 SHA-256 摘要

两份视频都由当前 AnimGen 导出编码器从这 96 张源帧生成。WebM 探测结果是 VP8，并带有 ALPHA_MODE=1；MOV 为 ProRes 4444 profile、ap4h codec tag 与 yuva444p12le 像素格式。随后我们分别把两份视频解码回 96 张 PNG，才进行后面的透明度和像素对比。

本机安装 FFmpeg 后，可以对任一下载文件检查相同的容器与视频流字段：

ffprobe -v error -show_entries "stream=codec_name,profile,codec_tag_string,pix_fmt,width,height,r_frame_rate:stream_tags=ALPHA_MODE:format=duration" -of json your-export.webm

但 metadata 不是透明度的最终验收，因此本文还实际解码了全部帧，并把它们放到不同背景上检查。

文件大小实测

这一个样例的结果如下：

这个压缩倍率只属于本次样例。分辨率、时长、画面细节、运动幅度、编码参数，以及 ZIP 如何组织 PNG 文件，都会改变大小。本例的 WebM 明显更小；PNG 序列和 ProRes 则以更高的存储成本，换取更适合制作环节的文件结构。

视频经过解码后，透明度还在吗？

在这次测试中，两种视频都保留了透明度。解码后均得到 96 帧，Alpha 范围都是 0–255，四角采样仍为完全透明。同一帧放到浅色、深色和高饱和背景上，下面的背景都能透出来，没有被一块固定矩形覆盖。

我们还在 0–255 的通道范围内，计算了解码帧相对源 RGBA 帧的平均绝对误差：

RGB 对比中的“可见区域”是指源图 Alpha 大于 8 的像素；数值为 0 才代表逐像素完全一致。本例里，两种格式都保住了可用的透明度，而解码后的 ProRes 在 Alpha 与可见 RGB 上都更接近源图。这符合两类格式的常见定位，但一次样例并不能推出“任何场景下 ProRes 肉眼都一定更好”。

PNG 序列不需要经历视频编解码：ZIP 里的内容就是原始独立 RGBA 帧。因此当你要判断问题来自生成结果、视频编码还是目标播放器时，PNG 是最清楚的基准。

网页交付：优先考虑 WebM Alpha

透明角色、特效或吉祥物需要在兼容的浏览器或 Web 运行时播放时，WebM Alpha 通常是更合适的第一选择。本例不到 1 MiB，避免了传输 96 张图片和更大的合计体积，也不需要让网页自己管理逐帧播放。

但有两点必须考虑。

第一，“支持 WebM”不代表一定支持这个编码组合中的 Alpha。AnimGen 当前导出的是 VP8 Alpha。MDN 的视频编码指南指出 Safari 不支持 VP8／VP9 视频 Alpha。需要实测产品真正覆盖的浏览器、操作系统、设备、内嵌 WebView 和播放器。

第二，准备一张真正透明的 PNG poster 或降级图。现代浏览器可能认识 <video> 标签，却无法正确解码或合成你提供的 Alpha 视频。更稳妥的实现是用独立 <img> 兜底，确认目标播放路径可用后再切换到视频。网页透明角色动画实战提供了完整 HTML、CSS、降级逻辑、减少动态效果支持和可下载示例。

以下情况适合 WebM Alpha：

• 下载体积很重要；
• 只需要连续播放，不需要在运行时直接读取每一帧；
• 已经明确并实测浏览器或运行时范围；
• 可以为不兼容环境提供 PNG 降级。

如果以后还要精修单帧，不要把 WebM 当作唯一母版。

剪辑与合成：优先考虑 ProRes 4444

ProRes 4444 面向需要 Alpha 的动态图形、合成与中间交换流程。Apple 的 ProRes 白皮书说明，ProRes 4444 与 4444 XQ 支持 4:4:4:4 图像来源，并支持最高 16-bit Alpha 通道。

本例里，ProRes 解码结果在 Alpha 和可见 RGB 上都比 WebM 更接近源帧，代价则是体积：4 秒 MOV 为 19.12 MiB，大约是 WebM 的 24 倍。对于剪辑母版，这可能完全合理；对于网页素材，则通常没有必要。

以下情况适合 ProRes 4444：

• 下一站是剪辑、合成、广播或动态图形工具；
• 希望用一个时间线友好的视频，而不是一整个帧目录；
• 中间制作阶段更看重颜色与 Alpha 保真，而不是下载体积；
• 已经在真正使用的软件中验证 ProRes 4444 Alpha。

不要因为 ProRes 能带透明度，就把大型 ProRes 母版直接放上网站；应该另做轻量交付版本。

逐帧控制与排障：选择 RGBA PNG 序列

PNG 序列是最不含糊的动画表达方式。每一帧都是独立 RGBA 图片，可以直接检查，也能只替换有问题的帧，而不用重新编码整段动画。PNG 是 W3C PNG 规范定义的无损图片格式。

下面这些情况尤其适合 PNG 序列：

• 美术需要修正少量帧；
• 自研工具需要直接读取像素、遮罩或帧矩形；
• 需要保留一个以后还能生成 WebM、ProRes、精灵图或引擎包的通用源文件；
• 透明度出了问题，需要把故障定位到具体处理阶段。

它的代价主要在管理：96 个文件必须保持正确顺序，播放速度需要单独保存，存储和传输也会很快增长。ZIP 便于下载，但编辑器或引擎最终仍要解压并理解这些帧。

导入时要检查文件名排序、FPS、画布尺寸、pivot、颜色处理、纹理过滤，以及目标软件使用 straight Alpha 还是 premultiplied Alpha。即便源帧像素完全正确，不合适的导入设置仍可能让边缘变脏。

游戏项目还可以选择精灵图或引擎包

WebM、ProRes 和 PNG 序列并不是全部选择。2D 游戏通常更适合精灵图加时间／轴点元数据，或直接使用面向目标引擎的资产包。它们牺牲一部分通用性，换来更直接的实时导入和更少的贴图切换。

本次三种格式对比故意保持 512 × 512 单帧输入完全相同。现有公开引擎样例采用了另一组面向运行时的打包参数，因此不把它们的体积塞进同一张图。应该把它们视为工作流选择，而不是本次编码测试中的“第四根柱子”。

如果目标是 Godot，可以查看Godot 4 透明动画导入实测：文章包含完整公开资产包、96 个帧区域、播放时间与可复现项目。输出格式文档则列出了精灵图、Unity、Godot、Unreal Paper2D、Cocos Creator 及对应 API 格式名。

为什么透明视频有时会显示黑底？

看到黑色矩形，并不能马上证明文件丢了 Alpha。建议按这个顺序排查：

1. 把同一导出的 PNG 帧分别放到浅色和深色背景上。
2. 如果 PNG 正常透明，用明确支持相应编码与 Alpha 模式的解码器或合成工具检查视频。
3. 确认服务器以 video/webm 提供 WebM，以 video/quicktime 提供 ProRes MOV。
4. 在真实目标浏览器或软件中测试，不要只看操作系统生成的缩略图。
5. 如果所有输出都不透明，再返回检查源图 Alpha 和透明导出设置。

上面的三背景测试看似简单，却很有效：真实透明边缘应该能适应多种底色，而不是只在一个方便的背景上看起来正常。头发、发光、运动模糊、阴影和接近键色的颜色，需要比空白四角更仔细地检查。透明格式兼容性和透明导出排障整理了更完整的检查方法。

一套更稳妥的导出策略

一个项目不必一辈子只选一种格式。更稳妥的流程是：

1. 先生成动作，并裁出真正有用的区间。
2. 首先导出 PNG 帧，把代表帧放到多种背景上检查。
3. 根据团队是逐帧制作还是时间线制作，保留 PNG 序列或 ProRes 4444 作为生产源文件。
4. 目标是网页时，再生成 WebM Alpha 并实测浏览器。
5. 目标是实时游戏时，生成精灵图或对应引擎包。
6. 把 FPS、帧顺序、画布尺寸与 pivot 信息和素材一起保存。

AnimGen 的免费 PNG 帧导出，可以先确认结果是否真的可用，再决定是否购买生产格式。WebM Alpha、ProRes 4444、精灵元数据、引擎资产包与商业使用权以当前付费方案或 Credit Pack 权益为准；请直接查看当前导出与商业使用权益，不要依赖文章里可能过期的固定价格。

如果你已经有一张透明 PNG 角色图，可以从透明动画工作流开始，生成动作，再根据下一个工具的实际要求选择导出。优先选择能够被验证、编辑并最终交付的格式，不必追求规格听起来最强的选项。