对比
APNG 与 WebP 对比
APNG 和 WebP 都支持动画与透明度。APNG 扩展 PNG 以实现无损动画；WebP 提供面向网页的有损和无损编码。
应该选择哪种格式？
PNG 制作流程需要无损动画时考虑 APNG；优化网页文件大小时测试 WebP。
适用于 APNG
带透明度的短动画 · 动画界面元素 · 动画图示
- 需要保留 PNG 透明度的动画
- 重视无损输出的短视觉素材
适用于 WebP
网页图像交付 · 照片 · 透明网页资源
- 减少网页图像传输量
- 需要透明度或动画的资源
基本信息
| 项目 | APNG | WebP |
|---|---|---|
| 扩展名 | .apng, .png | .webp |
| MIME 类型 | image/apng | image/webp |
| 常见用途 | 带透明度的短动画 · 动画界面元素 · 动画图示 | 网页图像交付 · 照片 · 透明网页资源 |
| 打开方式 | 在支持的浏览器或图像查看器中打开 APNG。作为动画使用前，请确认目标浏览器和播放速度。 | 请使用兼容的浏览器、图像查看器或图像编辑器打开 WebP 文件。 |
| 导出或转换 | 发布静态图像时可考虑 PNG；另一种网页动画选择是 WebP。转换后检查透明度和动画播放。 | 将 WebP 导出为 JPEG 时不会保留透明度，且输出为有损格式。导出为 PNG 时，请决定静态图像是否足够，并在需要时单独处理动画。 |
按用途选择
需要保留 PNG 透明度的动画
带透明度的短动画 · 动画界面元素 · 动画图示
APNG重视无损输出的短视觉素材
带透明度的短动画 · 动画界面元素 · 动画图示
APNG减少网页图像传输量
网页图像交付 · 照片 · 透明网页资源
WebP需要透明度或动画的资源
网页图像交付 · 照片 · 透明网页资源
WebP关键点 1
APNG 为 PNG 增加动画能力。
进一步了解差异关键点 2
WebP 支持有损与无损压缩。
进一步了解差异进一步了解差异
导出代表性样本，在目标环境比较播放、透明效果、画质和文件大小。
- APNG 适合以 PNG 为基础的制作流程。
- WebP 为网页交付提供更多编码选择。
- 两者都不一定总是更小，结果取决于素材和设置。
常见问题
WebP 一定比 APNG 小吗？
不一定。应在可接受画质下比较实际导出结果并验证播放。