JPEG、PNG 和 WebP：你到底该用哪种图片格式
这三种格式解决的是不同的问题。选错格式要么让文件体积过大，要么让画质明显下降。这里教你实际该怎么选。
· 阅读需 1 分钟
真正决定你该用哪种格式的一个关键区别
关于图片格式的所有实际问题，最终都归结到一个分岔口：这张图片能不能承受"有损"压缩，还是必须完整保留每一个像素信息？JPEG 是有损格式——它通过丢弃人眼在统计上不太可能注意到的细节来压缩文件，这种方式在照片上效果极好，但会让锐利的边缘和纯色区域出现明显的画质劣化。PNG 是无损格式——它通过找出并消除像素数据中真正的冗余来压缩，不丢弃任何信息，因此能完美还原锐利边缘和纯色，但对照片级细节的压缩能力远不如 JPEG。WebP 比较特殊，它在一种格式里同时支持这两种模式，这也是它存在的主要原因：它不是与 JPEG 和 PNG 平行竞争的第三种选项，而是试图用更新的压缩算法，在两者各自擅长的领域都做得更好。
搞反这个区别是最常见的图片格式错误：把照片存成 PNG，会得到一个毫无必要的巨大文件，因为无损压缩根本无法有效压缩照片里那种精细、不重复的细节。把截图或标志图存成 JPEG，虽然文件比 PNG 小，但代价是每一条锐利边缘周围都会出现明显的模糊伪影，纯色区域也会变得不那么纯净——这恰好是 JPEG 压缩最不擅长处理的两种情况。
为什么真实照片仍然适合用 JPEG
在像素层面，照片大多是连续的渐变和不规则的精细细节——肤色的平滑过渡、成千上万种略有差异的绿色植被、天空从地平线到天顶的渐变色调。JPEG 的压缩算法正是专门为处理这类内容设计的：它在频域中工作，本质上是把图像分离成大致的色彩模式和精细细节，然后丢弃一些观众不太会主动察觉到的精细细节，同时保留承载照片大部分视觉信息的大色块模式。结果就是，JPEG 能把真实照片压缩到未压缩体积的一小部分，同时在合理的质量设置下，视觉上几乎与原图无法区分——对于照片这类内容来说，这确实是一笔划算的交易。
同样的压缩方式，也正是 JPEG 不适合处理非照片内容的原因。锐利、高对比度的边缘——文字字符的边界、标志的轮廓、UI 截图里的硬直线条——恰好是 JPEG 压缩算法倾向于丢弃的那种高频细节，可见的结果就是本该清晰的边缘周围出现柔和、略显模糊的光晕。这就是大多数人即使不了解技术原理也能看出来的"JPEG 伪影"：这不是格式的缺陷，而是它精确地执行了自己被设计要做的事情，只是用在了它从未被设计来处理的内容上。
为什么 PNG 对合适的内容而言，值得付出更大的文件体积
PNG 使用通用算法进行无损压缩，它会在像素数据中寻找并消除真正的字面冗余——重复出现的相同颜色、可预测的模式——完全不像 JPEG 那样丢弃任何信息。截图里大片纯色的 UI 界面和锐利文字、只有几种纯色的标志、由干净线条和填充色组成的图表，正是基于冗余压缩擅长处理的内容，因为其中确实存在大量可供发现的字面重复：纯白背景就是同一个数值重复了数百万次，这种内容压缩效率极高，且不会损失原图的任何一个比特。
PNG 也是任何真正需要透明效果时该选的格式——需要叠加在彩色背景上的标志、需要融入不同 UI 主题的图标——因为 PNG 支持真正的 Alpha 通道，可以做到逐像素透明，而 JPEG 完全没有这样的机制。代价是，把 PNG 用在真实照片上，会产生比 JPEG 大得多的文件，视觉收益却微乎其微，因为照片本身根本不包含 PNG 算法所寻找的那种可利用的冗余——每个像素都与相邻像素略有不同，所以在不丢弃任何信息的前提下，可压缩的空间本来就很有限，而这恰恰是 PNG 的设计原则所不允许的。
WebP 到底多带来了什么，以及浏览器支持为何已不再是障碍
WebP 的设计目标，就是利用比 JPEG 和 PNG 设计时更新的压缩技术，在两者各自的强项领域都胜过它们。在有损模式下，对同一张照片，WebP 通常比画质相当的 JPEG 小 25% 到 35%，因为它底层的算法——源自视频编码压缩的研究成果——比 JPEG 那种更老的方式更有效地对图像相邻区块之间的冗余进行建模。在无损模式下，对同一张截图或标志图，WebP 通常也能以类似的幅度胜过 PNG，原因相同：更新、更复杂的冗余检测技术，找到了老算法无法发现的压缩空间。
多年来，反对使用 WebP 的实际理由是浏览器和软件兼容性——较旧的浏览器、一些图像编辑器以及各种内容管理系统根本无法打开它——但这个差距已经大幅缩小：所有主流现代浏览器已经支持 WebP 好几年了，剩下的兼容性缺口也越来越像是罕见的边缘情况，而不是主流层面需要担心的问题。现在仍然选择 JPEG 或 PNG 的合理理由，是某个特定的下游工具或工作流——较旧的桌面软件、印刷流程、客户现有的内容系统——确实还无法处理 WebP，这是一个真实且依然常见的限制，只是范围比过去窄了很多。
一份实用的选择指南
对于要放到网上的真实照片——产品图、博客头图、图片画廊——在目标环境支持的前提下，有损模式的 WebP 是最好的默认选择，JPEG 则作为不支持时的后备方案；对于真正的照片内容，PNG 几乎从来都不是正确的选择，因为它带来的文件体积成本，换不来相对优化良好的有损格式任何有意义的画质提升。对于截图、标志、图标，或任何有纯色、锐利文字、或需要透明效果的内容，PNG 或无损 WebP 是正确的选择，因为 JPEG 会在这类内容布满的锐利边缘周围引入明显的伪影。对于任何有硬性兼容性要求的场景——邮件客户端、较旧的内容系统、特定的印刷流程——坚持使用两者中更古老、被普遍支持的那个格式（照片用 JPEG，图形用 PNG），依然是安全、不算亮眼但可靠的选择。
关于 JPEG 与反复编辑的一点提醒
因为 JPEG 每次压缩都会丢弃信息，反复保存同一个 JPEG 文件——打开、做一点小修改、再存成 JPEG，在文件的生命周期里反复如此——会造成真实的、累积性的画质损失，这被称为"世代损失"，因为每一次保存都会在一张已经损失过部分原始细节的图像上，再叠加一次有损压缩。这种损失在保存一两次后并不明显，但在多次保存后会变得非常明显，这也是为什么，对于任何你预计要反复编辑的图像，保留一份未压缩或无损压缩的母版，只在最后导出的那一步才转成 JPEG，能避免一个容易被忽视但真实存在的画质劣化来源。