JPG vs PNG vs WebP：你应该选择哪种格式？

三种格式。三种不同的优势。而你不确定该为项目选择哪一种。

JPG从1990年代起就是照片标准。PNG处理透明度和无损画质。WebP结合了两者的优点，而且文件更小。但每种格式都有自己最合适的使用场景。

这篇指南会告诉你，根据图片的实际用途，应该在什么时候使用哪种格式。

JPG、PNG和WebP的主要区别是什么？

快速对比如下：

特性	JPG	PNG	WebP
压缩类型	仅有损	仅无损	有损和无损
透明度	不支持	支持	支持
动画	不支持	不支持（APNG存在但很少见）	支持
色彩深度	1670万色	1670万色 + Alpha	1670万色 + Alpha
最适合	照片	图形、截图	网页分发
文件大小（照片）	小	非常大	最小
文件大小（图形）	中等	小到中等	最小
浏览器支持	100%	100%	97%以上
邮件支持	优秀	优秀	差
打印支持	优秀	良好	差

简单来说：JPG擅长压缩照片，但不支持透明。PNG支持透明和无损画质，但照片文件会很大。WebP什么都能做，而且生成的文件最小。但它不是在所有地方都能用。

什么时候应该用JPG？

当你需要在任何地方都能显示的照片时，JPG是正确的选择。

邮件中的照片。 通过邮件发送图片？用JPG。每个邮件客户端都能正确显示JPG。WebP的支持不太稳定。PNG可以用，但文件太大了。

打印用的照片。 印刷厂期望收到JPG（或TIFF）。不要给他们发WebP。他们可能打不开。

相机照片存储。 你的手机拍的是JPG。你的相机拍的也是JPG。对于一般的照片存储和分享，JPG是通用格式。

社交媒体帖子。 Instagram和Facebook等平台接受多种格式。但JPG多年来一直是标准。结果可预测且稳定。

当文件大小重要而透明度不重要时。 85%质量的JPG能给你好看的照片。而且文件大小只有PNG的几分之一。

避免在以下场景使用JPG： logo、图标、文字多的图片、截图、需要透明的内容，以及需要反复编辑的图片（每次保存都会降低画质）。

什么时候应该用PNG？

当画质和透明度比文件大小更重要时，PNG是正确的选择。

透明背景的图片。 产品抠图、logo、图标、贴纸、水印。如果图片需要放在任何颜色的背景上，PNG能完美处理透明。

截图。 截图中的文字在PNG里保持清晰。JPG会模糊文字，在字母周围产生难看的光晕。教程、文档和错误报告，永远用PNG。

Logo和图标。 锐利的边缘、纯色、干净的线条。PNG在这方面很出色。PNG格式的logo看起来像素完美。同一个logo用JPG就会有模糊的边缘和颜色溢出。

带文字的图形。 信息图、示意图、图表，以及任何包含可读文字的图片。PNG保持文字清晰。JPG让文字变模糊。

编辑用的源文件。 PNG是无损的。保存100次也不会有任何变化。编辑图片时用PNG作为工作格式。完成后再导出为JPG或WebP。

网站图标和应用图标。 网站图标和移动应用图标的标准是PNG。浏览器和操作系统都期望PNG格式。

避免在以下场景使用PNG： 网站上的照片（太大了）、大量的网页图片，以及下载速度很重要的场景。

什么时候应该用WebP？

WebP是网站上几乎所有图片的最佳选择。

所有网站图片。 照片、图形、图标、背景。WebP能处理每种类型的图片，而且生成的文件比JPG和PNG都小。

网页用的透明图片。 WebP给你PNG的透明效果，文件却小30-70%。透明背景的产品照片是完美的使用场景。

缩略图和图片画廊。 小图片的相对节省最大。50 KB的JPG缩略图转成WebP只有30 KB。100张缩略图的画廊就能省下2 MB。

Progressive Web Apps。 离线运行的应用需要小文件。WebP能让缓存大小保持在可控范围内。

当你需要有损和无损两种选项时。 WebP支持两种模式。照片用有损，图形用无损。一种格式，两种模式。

避免在以下场景使用WebP： 邮件附件、打印材料、分享给使用旧软件的人的文件，以及需要通用兼容性的存档。

文件大小实际上怎么比较？

同一张图片在各种格式下的真实数据：

图片内容	JPG (85%)	PNG	WebP (85%)
照片 4000x3000	1.5 MB	15 MB	1.0 MB
照片 1920x1080	500 KB	5 MB	340 KB
截图 1920x1080	250 KB	400 KB	150 KB
Logo 500x200	35 KB	25 KB	15 KB
图标 64x64	5 KB	3 KB	2 KB
信息图 800x2000	200 KB	350 KB	130 KB

对于照片，PNG大得离谱。比JPG大10倍，比WebP大15倍。绝对不要在网页上用PNG存照片。

对于纯色图形（logo、图标），PNG还算合理。但WebP仍然小30-40%。

WebP在每一行都赢了。它是所有图片类型中最小的格式。唯一的缺点是兼容性。关于网站最佳图片格式的完整建议，请看我们的专门指南。

一个网站能同时用三种格式吗？

可以，很多网站都这样做。这里是一个实用的方法：

给支持WebP的浏览器提供WebP。 这是你97%的访客。他们会得到最小、最快的图片。

给剩下的3%，照片用JPG作后备，透明图片用PNG。使用HTML中的<picture>元素。

网站图标用PNG，以及浏览器期望PNG格式的其他特殊文件也用PNG。

在项目文件中保留JPG或PNG的原始文件。 在构建过程中生成WebP版本，或使用自动转换的CDN。

如果你想更进一步，可以加入AVIF。我们的AVIF格式对比展示了它和WebP的比较。

要了解所有图片格式的详细比较，请参阅我们的图片格式完全指南。

如何在这些格式之间转换？

ConvertIMG支持所有三种格式以及更多。把JPG转成WebP用于网页分发。把PNG转成WebP来获得更小的透明图片。把WebP转成JPG来兼容邮件。你还可以压缩你的图片来进一步减小文件大小。上传文件，选择格式，然后下载。免费、私密，完全在浏览器中运行。