截图选 PNG 还是 WebP？三张示例图对比
用界面、代码和渐变三张示例图，看看转成 WebP 后有何变化。
对于你计划再次编辑的截图，请保留 PNG 原图。对于要放到网站上的图片，可以尝试 WebP，然后在分享前检查最小的文字。
我们制作了三张示例图片，并通过 CozyToolkit 的图片转换器导出。你可以在下方查看并下载每个结果。
三个文件，相同的尺寸
我们绘制了一个带有小标签的界面、一个带有彩色文本的代码编辑器，以及一张渐变海报。每张都是 1200 × 750 像素。这些是合成示例，不是客户文件的截图。
PNG 导出使用浏览器的 PNG 编码器。WebP 导出使用质量 85，不进行缩放或裁剪。表格显示了保存文件的大小。
| 示例 | PNG | WebP 85 | 缩小了 |
|---|---|---|---|
| 界面 | 92,339 | 24,320 | 74% |
| 代码与小文本 | 82,732 | 23,088 | 72% |
| 渐变海报 | 976,385 | 16,746 | 98% |
拖动平移·捏合或Ctrl/⌘+滚动缩放双指缩放 · 拖动平移
使用+和−缩放，箭头键平移，0适应图像。预览缩放不会改变导出结果。
渐变图片节省的空间最大。它的 PNG 包含大量平滑变化的像素值；有损 WebP 编码器会用近似的颜色表示这些像素，从而缩小文件。另外两张以文字为主的示例，文件也变小了，但仅凭文件大小并不能判断其中的文字是否足够清晰，能否满足你的使用需求。
这不是同等质量的比较。 这里的 PNG 是无损的。此设置下的 WebP 是有损的，意味着它可能改变像素。三个示例无法确定所有截图的平均压缩效果，而且其他编码器生成的优化 PNG 可能比我们的小。
下载前需要检查什么
在上方两种格式之间切换并放大。特别要检查：
- 代码示例中的彩色标点。即使大文本看起来没问题，细小的彩色边缘也可能变得模糊。
- 界面中的小“Ready to share”标签。
- 海报中的平滑过渡。看看渐变是否变成了一条条明显的色带。
同时，以预期的显示尺寸来判断图片。在 400% 缩放下可见的瑕疵可能在小预览中无关紧要；而帮助文章中的模糊标签则是个问题。
根据用途选择格式
要留作原始底稿、逐像素比较，或完整保留文字细节，就选 PNG。 如果接收图片的应用不接受 WebP，它也是一个合适的备选格式。
当保存的文件看起来足够好时，尝试在网页和预览中使用 WebP。 它支持透明度，因此透明背景本身并不是避免使用它的理由。WebP 支持无损和有损编码，但本测试中使用的浏览器质量滑块并不是专门的无损开关。将其设置为 100 并不能保证你的导出是无损的。有关区别，请参阅 Google 的 WebP 格式文档。
用你的截图试试
- 打开 图片转换器 并添加你的 PNG。
- 选择 WebP 作为输出格式。从质量 85 开始，保持尺寸不变。
- 转换，放大结果并与原图比较。
- 如果小细节受损，则提高质量。如果结果仍然看起来不对，请保留 PNG。
如果图片只会在当前宽度的一半下显示，调整大小 可能比更改格式节省更多。要谨慎操作：较小的图片无法保留相同的细节。
此比较是如何进行的
于 2026 年 9 月 28 日在 macOS 上的 Chrome 153.0.8010.53 中测试，使用与工具相同的转换功能。测试图片是在浏览器画布上使用系统字体绘制的。PNG 转换未使用调色板缩减；WebP 使用浏览器编码器，质量参数为 0.85。
下载测量结果，包括精确的字节数和文件哈希。浏览器编码器和字体可能不同，因此在其他系统上重新运行示例可能会产生不同的大小。上述百分比描述的是这些特定下载，而不是对你结果的承诺。