WebP、PNG和JPG对比：你的网站该用哪种格式？

WebP和PNG怎么选，取决于图片用在哪里。用在网站上，通常WebP胜出：Google称无损WebP比PNG小约26%，支持透明，而且当前所有主流浏览器都能显示。如果是要用邮件发送、上传到表单或发给别人的文件，PNG和JPG更稳妥，因为浏览器之外的支持仍然参差不齐。

WebP格式是什么？

WebP是Google开发的一种图片格式，2010年首次发布。一种格式就能胜任过去需要不同文件来完成的多种任务：

• 用于照片的有损压缩，类似JPG。
• 用于图形和截图的无损压缩，类似PNG。
• 两种模式下都支持透明（Alpha通道）。
• 动画，可作为GIF更轻量的替代品。

文件扩展名为 .webp。Chrome、Edge、Firefox和Safari都能显示，Safari从14版开始支持。只要访问者用的是最新的浏览器，无需你做任何特殊处理就能看到WebP图片。

你可能已经见过WebP了。很多网站会自动提供这种格式，所以有时从网页上保存的图片看起来是普通照片，下载下来却是.webp。我们的WebP文件是什么指南介绍了如何打开和编辑它们。

WebP和PNG：哪个更小，分别什么时候用

按Google的数据，无损WebP比PNG小约26%。两者都是无损的，所以用更小的空间得到同样的像素。对于带透明的图形，有损WebP还能小得多：Google称，它生成的文件通常只有同等PNG的约三分之一。

在以下情况下，用WebP而不是PNG：

• 图片放在你自己的网站上，比如标志、插图、商品抠图或截图。
• 你想要透明，又不想要PNG的体积。
• 页面速度很重要，而且图片很大。

在以下情况下，继续用PNG：

• 你要把文件发给别人、附在文档里，或者上传到列明了可接受类型的表单。
• 你需要一份用于编辑的母版，而所用软件可能打不开WebP。
• 这个图形是标志或图标，可以改用SVG，通常体积更小，而且任何尺寸下都保持清晰。

带透明的有损WebP很适合商品抠图和边缘柔和的插图。对于要求像素级精确的截图和界面原型，无损WebP能像PNG一样让文字保持清晰。想进一步了解PNG的优势，请看PNG文件是什么。

照片：WebP与JPG

对于照片，Google测得在相同SSIM质量分数下，有损WebP比同等的JPG小25%到34%。在有十几张商品图或一张大横幅图的页面上，积少成多就能让加载更快，用移动数据时尤其明显。

JPG仍有两个优势。它在任何地方都能打开，从老旧的看图软件到打印机都没问题，上传到任何网站也都稳妥。而且现代JPG编码器很出色，尺寸合适、压缩得当的JPG已经相当接近。如果只能做一件事，把照片尺寸调对比换格式更有效。一张4000像素的照片以800像素宽显示，浪费的字节远比格式选择多。

网站的实用做法是：原图保留为JPG或PNG，发布时使用按显示宽度调整好尺寸的WebP版本。选择母版格式时，更全面的PNG和JPG对比会有帮助。

快速对比

• 网页上的文件大小：WebP通常最小，其次是照片用JPG、图形用PNG。
• 透明：WebP和PNG支持，JPG不支持。
• 动画：WebP支持，PNG和JPG不支持（改用GIF或视频）。
• 浏览器之外的兼容性：JPG最好，PNG紧随其后，WebP在旧版App和上传表单中最弱。
• 无损编辑：PNG或无损WebP。

如何把PNG或JPG转成WebP

如果只有几个文件，浏览器工具是最快的办法。图片转WebP转换器在浏览器里本地运行，所以图片不会上传到任何地方。

1. 如果图片比显示尺寸大，先调整大小。调整图片大小工具可以设置精确宽度并保持宽高比。
2. 打开WebP转换工具，添加你的JPG或PNG文件。
3. 转换并下载。检查透明区域是否仍然透明，以及截图中的文字是否清晰。
4. 如果WebP还是比你想要的大，就按KB目标大小再压缩一次。
5. 把WebP上传到你的网站，并更新图片引用。

对于照片，有损质量设在75到85左右是一个合理的起点。以实际大小把结果和原图对比，只有看不出差别时才继续降低质量。

很多内容管理系统和图片CDN会自动生成WebP副本。如果你用的就是这样的系统，可能只需上传一张好的JPG或PNG，剩下的交给它处理。

如何检查网站是否在提供WebP

你的CMS或CDN可能声称会生成WebP，但最好确认一下。在Chrome或Edge中打开页面，按F12打开开发者工具，切换到“网络”标签。重新加载页面，按“Img”筛选。“类型”列显示每张图片传输时的格式，“大小”列显示它占用了多少字节。

如果那里仍然有很大的JPG或PNG文件，说明WebP副本没有被提供。常见原因有：缓存插件提供的是旧的HTML，图片是通过绕过CMS的自定义代码添加的，或者主题把图片网址写死了。先修复这些页面，从最大的图片开始。

网站上的每张图片都应该用WebP吗？

大多数都可以。有几个例外值得了解：

• 简单的标志和图标往往更适合用SVG。
• 供人下载的文件，比如新闻资料包里的照片或可打印的图形，用JPG或PNG更友好。
• 社交分享图片（分享链接时显示的Open Graph图片）最好用JPG或PNG，因为你无法控制所有读取它的App。
• 如果必须支持非常旧的浏览器，可以提供JPG或PNG备用图片，方法是使用HTML picture 元素来提供JPG或PNG作为备用。

你可能也会看到有人提到AVIF。这是一种更新的格式，可以比WebP还小，当前的浏览器也广泛支持。WebP仍然是更省事的默认选择，因为接受它的工具和平台更多。

如何打开或转换你下载的WebP文件

当前版本的Windows“照片”和Mac“预览”都能打开WebP文件，把它拖进任何浏览器标签页也能显示。麻烦出现在你把文件上传到只接受JPG或PNG的地方，或者在旧程序里编辑时。

解决办法是快速转换一下。WebP转PNG或JPG转换器可以处理单个文件或批量文件。图片有透明或清晰的文字就选PNG，照片想要文件小一些就选JPG。修改扩展名不会转换任何东西，所以一定要导出一份真正的副本。

常见问题