PNG、JPEG 还是 WebP：该用哪种图片格式？

大多数图片格式的选择，归结为两个问题：图片需要透明区域吗？一点画质损失会被看出来吗？回答了这两个问题，格式几乎就自动选好了。第三个问题是文件要发到哪里，它决定了新格式能不能用，因为电商平台和很多应用仍然只接受 JPEG 和 PNG。

本指南对比网页上照片和图形最常见的四种格式：JPEG、PNG、WebP 和 AVIF。最后针对大家常见的需求给出快速选择：logo、产品照片、普通照片，以及透明背景的抠图。

对比表

格式细节来自 MDN 的图片文件类型指南。对浏览器来说，支持情况这一行已经没那么重要了：当前所有主流浏览器都能显示 WebP，AVIF 也已在它们的最新版本中得到支持。真正还要在意的是其他地方，比如上传表单、电商平台、邮件客户端和老旧的桌面软件。

有损与无损，通俗地说

无损压缩在缩小文件的同时，一个像素都不改。解码一张 PNG，得到的和保存时完全一样。所以它非常适合硬边和纯色内容，例如文字、logo、线稿、界面和截图，这些内容上任何模糊或色边都很容易被看出来。

有损压缩会丢掉眼睛不太会注意到的细节。照片对此的容忍度很高，因为它们充满了噪点和渐变色调。JPEG 就是这样工作的，在合理的质量设置下，照片可以缩小到 PNG 体积的一小部分，而肉眼看不出变化。

由此得出两条实用规则：

• 每保存一次有损格式，就多损失一点。保留一份无损母版（相机原图、PNG 或编辑器自己的文件），从母版导出有损副本，而不是反复编辑、反复保存同一个 JPEG。
• 有损压缩在锐利边缘上效果最差。存成 JPEG 的 logo，字母周围会出现模糊的“蚊式噪点”，截图里的文字会变糊。

透明：抠图的决定性因素

JPEG 没有 alpha 通道。JPEG 里没有办法存储“这个像素是透明的”，所以去除背景后存成 JPEG，空白区域会被填上纯色，通常是白色或黑色。如果你想让抠图叠在其他内容上，就需要 PNG、WebP 或 AVIF。

PNG 存储完整的 alpha 通道：每个像素都可以是从完全不透明到完全透明之间的任意值，正是这一点让头发、毛发和阴影这类柔和边缘看起来自然。它还有一种更简单的模式，把调色板中的某一种颜色标记为透明，适合纯色图形，但用在照片上边缘会有锯齿。想了解细节，请阅读什么是 alpha 通道。

WebP 的无损和有损模式都支持透明。Google 的 WebP 文档指出，无损 WebP 加入透明只多占约 22% 的字节，而带透明的有损 WebP 通常比同等的 PNG 小约 3 倍。因此，在你自己的网站上展示透明产品图，有损 WebP 是最高效的方式。

文件大小

同一张图片，从大到小的大致顺序是 PNG、JPEG、WebP、AVIF，但有一个重要前提：PNG 只有在存照片时才“大”。对于颜色很少的纯色图形，PNG 往往比 JPEG 更小，而且一定更清晰。

Google 公布的 WebP 数据是一个有用的参考：

• 无损 WebP 文件比 PNG 小 26%。
• 在相同 SSIM 质量分数下，有损 WebP 文件比同类 JPEG 小 25% 到 34%。

MDN 对网页位图的建议是优先使用 WebP 或 AVIF，它们的压缩效果通常好于 PNG、JPEG 和 GIF。AVIF 还支持 10 位和 12 位色彩，有助于呈现平滑的渐变。它的弱点在浏览器之外的支持：很多应用和上传表单仍然不接受它。

当你要向大量访客提供大量图片时，文件大小最重要。如果只是向一个反正会重新压缩所有图片的电商平台上传一张图，平台接受什么格式，比你省下多少字节更重要。

各格式在哪里被接受

浏览器是容易的部分。电商平台和应用才是格式被拒绝的地方。以下是根据各平台自己的文档整理的可接受格式，核对时间为 2026 年 10 月：

有两点很突出。第一，Amazon、Walmart 和 Meta 商品目录都不接受 WebP 和 AVIF，所以上传到电商平台请保留 JPEG 或 PNG。第二，Etsy 表示不支持透明 PNG，透明区域可能显示为黑色，所以上传到那里之前，先把抠图合并到某种颜色上。各平台的准确像素尺寸，请参阅产品图尺寸参考。

常见用途该用哪种格式

Logo

有矢量原稿时用 SVG；MDN 推荐 logo 和图标使用 SVG。需要位图文件时，用透明背景的 PNG，或者在你自己的网站上用无损 WebP。永远不要用 JPEG：它会让边缘发毛，而且不能透明。

产品照片

电商平台主图请用纯白背景的 JPEG。Amazon 的卖家博客称 JPEG 是首选格式，上表中的每个电商平台都接受它。从无损母版以较高的质量设置导出（大多数工具中约 85 到 92）。

在你自己的店铺里，上传高质量的 JPEG 或 PNG，让平台去转换。例如 Shopify 表示，它的图片服务会自动为每位访客提供其浏览器支持的最佳格式。

普通照片

分享和上传时，JPEG 是稳妥的默认选择。在你能控制的网站上，WebP 或 AVIF 配合 JPEG 备用，可以用更少的字节呈现同样的效果。如果你的手机保存的是 HEIC 文件，上传到没有列出 HEIC 的地方之前，先转换成 JPEG。

抠图和透明图片

文件需要在各处都能用时，用 PNG：幻灯片、文档、设计工具和大多数上传表单。要把图片放到你自己的网页上并希望它体积小，用 WebP。只有当你特意给背景填上纯色时才用 JPEG，例如为电商平台填白色。

截图和图表

PNG，或无损 WebP。有损格式会让文字变糊。

提供现代格式并保留备用格式

如果你运营自己的网站，不必只选一种格式。HTML 的 picture 元素可以让浏览器选择它能识别的第一种格式：

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

支持 AVIF 的浏览器使用第一个来源，其他浏览器退回 WebP，更老的浏览器使用 PNG。很多托管平台和图片 CDN 会根据浏览器的 Accept 请求头自动完成这种转换，这通常比你自己生成每种格式更简单。

格式转换时避免意外

• PNG 或 WebP 转 JPEG： 透明区域会被合并。自己选择填充颜色（通常是白色），不要让工具替你选，因为有些工具默认用黑色。
• JPEG 转 PNG： 文件会变大，但不会变好。JPEG 中损失的画质回不来。
• 任何格式转 WebP 或 AVIF： 检查透明是否保留、颜色是否正确；如果图片要在网页上显示，先转换为 sRGB 色彩配置文件。
• 重复保存 JPEG： 每次以更低质量保存，损失都会叠加。从母版只导出一次。

抠图的更快选择

如果你要批量去除背景，removebackground.dev 可以把抠图导出为透明 PNG 或 WebP，或任意纯色背景的 JPG，这样一次上传就能同时得到用于电商平台的白底 JPEG 和用于你网站的透明 PNG。