PNG转WebP：如何高效转换与压缩PNG图片

上次更新: June 27, 2026

PNG 是用于锐利图形和透明度的理想格式，但其文件体积很大——尤其是对于任何照片内容。将 PNG 转换为 WebP 可以保留清晰度和 alpha channel，同时大幅减小文件大小。难点在于正确选择无损（lossless）还是有损（lossy）WebP模式，因为正确的模式取决于图像内容。本指南涵盖了这两种模式，并提供了实际测量的尺寸数据。

快速答案：是否应该将 PNG 转换为 WebP？

对于网页图片来说，是的——WebP 在保持 PNG 透明度和清晰度的同时，文件大小却大大减小。根据内容选择合适的模式：

对于单个图片，请使用 Image Converter；对于批量处理，请使用 cwebp。关于这种格式选择的原理可以在 image formats explained 中了解。

PNG 到 WebP 能节省多少空间？

这完全取决于你选择了哪种 WebP 模式，因为 PNG 是无损的，所以这不是一个公平的比较。

从这些数据中可以得出两个重要的结论。首先，照片的无损 WebP 仍然很大（568 KB）——因为无损编码无法去除照片中的噪声。如果内容是照片，则应该使用有损 WebP，而不是无损。其次，无损 WebP 在平面图形上表现出色：对于截图和 UI 图，它通常比 PNG 小 20–30%，且像素完全相同。务必根据内容匹配模式。

所有四种格式都使用了相同的源图片，展示了 PNG 相较于其他替代方案的位置：

哪些图片应该保持 PNG 格式？

有些图片根本不应该进行转换。当图片是 Logo 或图标，且可以替换为 SVG 时（SVG 更小、更锐利），或者当你需要交付给专门要求使用 PNG 的系统时——例如某些打印流程、一些遗留编辑器以及大多数设计工具交换——最好保留 PNG 格式。对于单个微小的图标（小于 ~3 KB），转换带来的复杂性成本不值得；直接保持 PNG 即可。决策规则与 image formats explained 中的一致：当字节大小很重要，且目标是网页浏览器时，将 PNG 转换为 WebP；如果兼容性或矢量替代方案更重要，则保留 PNG。

方法 1：浏览器转换器

对于单个图片，请使用 Imagic AI Image Converter：上传 PNG，选择 WebP，为图形选择无损模式，或为照片选择质量 ~80，然后下载。Squoosh 非常适合在确定之前并排比较无损和有损效果。

方法 2：cwebp 命令行

## 无损 WebP（最适用于图形、截图、锐利文本、透明 UI）
cwebp -lossless input.png -o output.webp

## 有损 WebP（如果 PNG 实际上是照片，则最佳）
cwebp -q 80 input.png -o output.webp

## 批量处理一个文件夹内的无损 PNG 文件
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-lossless 是关键标志——如果没有它，cwebp 默认使用有损模式，这会模糊细边。对于图形和截图，始终传递 -lossless 参数。

方法 3：Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # 对于锐利图形使用无损模式；对于照片，切换到 lossless=False
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

当 lossless=True 时，会忽略 quality 值；当使用有损模式时，请将其设置为照片的 ~80。

WebP 能保留 PNG 的透明度吗？

是的。WebP 在有损和无损两种模式下都支持完整的 alpha channel，因此透明的 PNG 会变成透明的 WebP，无需额外处理。这是转换 UI 资产和产品抠图的主要原因：你保留了透明度，却损失了大部分字节。有关透明度的具体细节，请参阅 how to make transparent images。

如何使用 PNG 作为后备方案来提供 WebP？

WebP 的支持率约为 ~98%，但仍应为旧客户端和电子邮件保留一个 PNG 后备方案：

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

浏览器会选择它支持的第一个类型；PNG 的 <img> 是最终的后备方案。对于锐利图形，请预留 width/height 属性，以防止布局偏移。有关包含 AVIF 在内的完整后备模式，请参阅 WebP converter guide。

何时将 PNG 转换为 WebP 是错误的举动？

• 电子邮件。 许多电子邮件客户端忽略 WebP。对于邮件内容，保留 PNG（或 JPEG）。
• 当你需要使用 JPEG 时。 如果 PNG 是用于只接受 JPEG 的市场平台的照片，则应转换为 JPEG，而不是 WebP。请参阅 WebP to JPG。
• 不支持 WebP 的旧嵌入式浏览器——尽管 <picture> 后备方案已经覆盖了这个问题。
• 当 PNG 本身就很小的时候。 一个 2KB 的图标转换带来的收益很小；其流程成本不值得。

常见错误

• 将有损 WebP 用于锐利图形。 有损模式会模糊细边和文本。对于截图和 UI，请使用 -lossless。
• 将无损 WebP 用于照片。 它仍然很大，因为无损无法去除照片中的噪声。应使用有损模式。
• 忽略 PNG 后备方案。 旧浏览器和电子邮件需要 PNG <img>。
• 忘记先调整大小。 一个 4000px 的 WebP 文件无论格式如何，下载尺寸仍是 4000px。
• 将 PNG 当作照片格式处理。 如果图片是照片，它最初可能就是 JPEG/RAW——应该从正确的源头进行转换。

常见问题解答

将 PNG 转换为 WebP 能节省多少空间？

对于照片内容，在等质量下可缩小 25% 到 35%；对于带有透明度的平面图形，通常可以节省更多。WebP 支持有损和无损模式以及 alpha channel，因此它可以在更小的尺寸上覆盖了 PNG 的功能。

每个 PNG 都应该转换为 WebP 吗？

对于网页交付来说，是的（但需要为非常旧的浏览器保留 PNG 后备方案）。如果可能重新编辑，请保留 PNG 原版，因为 WebP 有损模式是一种生成式压缩。应通过带有 PNG 后备方案的 <picture> 元素来提供 WebP。

WebP 支持透明度吗？

是的——WebP 支持完整的 alpha channel，因此透明的 PNG 可以干净地转换。这是相比 JPEG 选择 WebP 用于带透明图形的主要原因。请参阅 transparent images guide。

命令行转换是什么样的？

cwebp -q 80 input.png -o output.webp。-q 参数设置质量（80 是网页默认值）。对于无损模式，使用 -lossless。批量处理时可以使用 shell loop 或 ImageMagick。请参阅 WebP converter guide。

WebP 支持动画吗？

是的——WebP 支持动画图片，其体积比等效的 GIF 更小。对于短循环，动画 WebP 是 GIF 的现代替代方案。对于更长的动画，视频（MP4）仍然更小、更好。

我应该将 PNG 转换为 WebP 有损还是无损？

照片使用有损模式（文件小得多，在 q80 下损失肉眼不可见）；图形、文本和原版素材使用无损模式，这些地方每个像素都必须精确。WebP 支持这两种模式。一个常见的错误是将 Logo 转换为有损模式，这会在锐利边缘增加伪影——请保持图形为无损，照片为有损。

cwebp 的质量标志是什么？

-q 参数设置了 0 到 100 的有损质量度量衡——80 是网页默认值（损失肉眼不可见，大约是 q100 文件大小的四分之一）。对于每个像素都必须精确的图形，请使用 -lossless 代替 -q。更高的质量意味着更大的文件，但可见回报递减；80 是照片进行网页交付的最佳实用平衡点。

将 PNG 转换为 WebP 能加快我的网站速度吗？

是的，可以测量到——WebP 相较于相同内容的 PNG 小 25% 到 35%，因此包含许多图形的页面加载更快，LCP 也得到改善。这种节省在包含数十个图标或图形的页面上会叠加。请提供 WebP 并保留 PNG 后备方案，这样旧浏览器仍然可以渲染图片，您既获得了速度又没有损失兼容性。

图片鸣谢

• PNG 到 WebP 的比较和尺寸条形图——由作者使用电商风格照片（Pexels #16675632，摄影师来自 Mikael Blomkvist）生成，以展示实际测量的 PNG 到 WebP 节省空间。