PNG 与 WebP 对比：现代网页该用哪种格式？
PNG 是成熟的无损格式，几乎处处可用；WebP 是较新的格式，同时提供无损与有损模式，并支持 alpha 和动画。WebP 往往能交付更小的网页图片，但 PNG 仍是最稳妥的母版和通用回退。最佳选择取决于具体任务。
没有唯一的赢家。用 WebP 向现代浏览器交付更小的图片，用无损 PNG（或其他无损母版）作为可编辑的源文件，并在需要通用兼容时提供回退。请用下方的场景表来决定。
无损与有损：PNG 只有一种模式，WebP 有两种
PNG 始终无损。它先滤波再用 DEFLATE 压缩，并精确还原原始采样，因此无论文件如何生成都不会引入压缩伪影。
WebP 支持两种模式。有损 WebP 基于 VP8 帧内编码，用精确度换取更小的文件，类似 JPEG。无损 WebP 采用另一种技术保留原始像素，思路类似 PNG。
这意味着 WebP 在无损模式下可以替代 PNG 用于图形，在有损模式下可以替代 JPEG 用于照片。有意识地选择 WebP 模式很重要：需要像素精确的纯色图形用无损，看重小体积的照片内容用有损。
两种格式中的 alpha 透明度
PNG 支持完整的 alpha 通道，让每个像素携带自己的不透明度，从而在任意背景上获得干净的边缘。
WebP 也支持 alpha 透明度，并且可以把 alpha 与有损颜色压缩结合——这是 PNG 没有的选项。这种组合能生成比同等 PNG 更小、同时保留柔和边缘的透明图片，对网页叠加层和图标很有用。
动画注意事项
WebP 支持动画，因此单个 WebP 文件可以承载带 alpha 的短动画序列，是动画 GIF 或 APNG 的替代方案。
但有些注意事项。PixMovo 的图片工具在静态 JPEG、PNG 和 WebP 之间转换，不生成动画，因此动画 WebP 属于交付层面的考量，而非你在这里导出的内容。当你确实使用动画 WebP 时，请在目标浏览器中验证播放效果，并保留一个可重新渲染的源文件，因为并非每个查看器或编辑器都会像处理静态图片那样处理动画 WebP。
浏览器交付与回退
当前版本的所有主流浏览器都支持 WebP，这使它成为如今网页交付的有力默认选项。即便如此，非常老旧的客户端、部分邮件软件以及某些第三方工具可能无法解码 WebP。
稳妥的做法是渐进增强：向接受 WebP 的客户端提供 WebP，对不接受的则回退到 PNG 或 JPEG。HTML 的 picture 元素让浏览器挑选它支持的第一个来源类型，因此现代访客得到更小的 WebP，老旧客户端仍能看到兼容的图片。
保留无损源母版
无论你交付什么，都要保留一份无损源文件。如果母版是无损 PNG（或无损 WebP），你以后可以重新导出为任意格式而不会叠加压缩损失。
从有损 JPEG 导出有损 WebP 会叠加两轮有损压缩并降低结果质量。请始终从你拥有的最高质量无损母版生成交付文件，并归档该母版而非已发布的副本。
属性对比
| 属性 | PNG | WebP |
|---|---|---|
| 压缩模式 | 仅无损 | 无损与有损 |
| alpha 透明度 | 支持 | 支持，含与有损颜色结合 |
| 动画 | 不支持（静态图片） | 支持 |
| 浏览器支持 | 通用 | 所有当前主流浏览器 |
| 作为可编辑母版 | 适合 | 无损模式下适合 |
| 通用回退 | 适合 | 需为老旧客户端准备回退 |
各自更占优的场景
- 当优先目标是为现代浏览器提供更小的图片、且你能提供回退时，选择 WebP。
- 当你需要通用兼容的文件、可编辑的无损母版或可靠的回退源时，选择 PNG。
- 对必须保持像素精确的纯色图形，无论哪种格式都使用无损模式。
- 对网页上的照片，有损 WebP 通常在体积上胜过 PNG，观感却相当。
实例：交付一张透明网页图形
- 从无损母版开始
将图形保存为无损 PNG，这样你就有一份带 alpha、精确且可编辑的源文件。
- 导出用于交付的 WebP
在 PixMovo 中把 PNG 转换为 WebP。纯色图形用无损 WebP，柔和图像用带 alpha 的有损 WebP 以减小体积。
- 提供回退
引用 PNG 作为回退（例如通过 picture 元素），让无法解码 WebP 的客户端仍能渲染该图片。
场景决策表
| 场景 | 推荐 | 原因 |
|---|---|---|
| 照片（photos） | 有损 WebP | 在网页上比 PNG 更小而观感相当；保留无损母版 |
| 徽标（logos） | 无损 WebP 或 PNG | 两者都保留锐利边缘和 alpha；PNG 是更通用的母版 |
| 截图（screenshots） | PNG 或无损 WebP | 精确像素让界面边缘和文字清晰；无损 WebP 可能更小 |
| 网页交付（web delivery） | 带回退的 WebP | 向现代浏览器提供更小的图片，并回退到 PNG 或 JPEG |
| 印刷（printing） | PNG 或无损母版 | 请与印刷服务商确认格式；避免有损伪影出现在成品中 |
常见问题
- WebP 比 PNG 更好吗？
- 并非通用地更好。WebP 能生成更小的网页图片并增加有损和动画模式，但 PNG 是更通用的母版和回退。最佳选择取决于具体任务。
- WebP 像 PNG 一样支持透明度吗？
- 支持。WebP 支持 alpha 通道，甚至可以把透明度与有损颜色压缩结合，这是 PNG 做不到的。
- 所有浏览器都支持 WebP 吗？
- 所有当前主流浏览器都支持 WebP，但一些非常老旧的客户端、邮件软件和第三方工具可能不支持。请提供 PNG 或 JPEG 回退以实现通用兼容。
- 我应该把 PNG 母版转成 WebP 并删除 PNG 吗？
- 请保留无损母版。网页交付用 WebP，但归档无损 PNG（或无损 WebP），这样以后可以重新导出而不叠加压缩损失。
- 无损 WebP 和有损 WebP 该选哪种模式？
- 纯色图形、徽标以及任何需要精确像素的内容用无损 WebP。看重小文件甚于精确度的照片用有损 WebP。
- WebP 能承载动画吗？
- 能，WebP 支持带 alpha 的动画。PixMovo 的图片工具处理静态图片，因此请把动画 WebP 当作交付格式，并在目标浏览器中验证播放。