对比
PNG 与 WebP
PNG 和 WebP 都可以支持透明度。PNG 是兼容性广的无损格式；WebP 可用于优化网页分发，也支持动画。请用实际素材和目标浏览器进行比较。
应该选择哪种格式？
重视广泛兼容和无损图形时选 PNG；需要减小网页资源时测试 WebP，并按需提供备用格式。
适用于 PNG
界面图形 · 屏幕截图 · 透明图像
- 需要透明度的图像
- 文字和线条图
适用于 WebP
网页图像交付 · 照片 · 透明网页资源
- 减少网页图像传输量
- 需要透明度或动画的资源
基本信息
| 项目 | PNG | WebP |
|---|---|---|
| 扩展名 | .png | .webp |
| MIME 类型 | image/png | image/webp |
| 常见用途 | 界面图形 · 屏幕截图 · 透明图像 | 网页图像交付 · 照片 · 透明网页资源 |
| 打开方式 | 大多数系统查看器、网页浏览器和图像编辑器都能打开 PNG 文件。 | 请使用兼容的浏览器、图像查看器或图像编辑器打开 WebP 文件。 |
| 导出或转换 | 只有在不再需要透明度和无损质量时才转换为 JPEG。请保留原 PNG，并从应用程序导出。 | 将 WebP 导出为 JPEG 时不会保留透明度，且输出为有损格式。导出为 PNG 时，请决定静态图像是否足够，并在需要时单独处理动画。 |
按用途选择
需要透明度的图像
界面图形 · 屏幕截图 · 透明图像
PNG文字和线条图
界面图形 · 屏幕截图 · 透明图像
PNG减少网页图像传输量
网页图像交付 · 照片 · 透明网页资源
WebP需要透明度或动画的资源
网页图像交付 · 照片 · 透明网页资源
WebP关键点 1
PNG 使用无损压缩且支持广泛。
进一步了解差异关键点 2
WebP 支持有损、无损图像和动画。
进一步了解差异进一步了解差异
用代表性图像按所需画质进行比较，并检查透明度、动画和浏览器支持。保留源素材，并在实际网站中验证备用路径。
- PNG 常用于清晰图形和透明栅格图片。
- WebP 面向网页图片分发，可能减小文件大小。
- 并非所有图像都适合相同格式，也不保证某一种更小。
常见问题
是否应该把所有 PNG 都转成 WebP？
不应一概而论。请测量实际文件、检查画质和浏览器支持，并在需要时保留合适的备用格式。