应该使用哪种图片格式？

决定选择的那个问题

这张图是由连续色调构成的，还是由平涂色块和锐利边缘构成的？

照片是连续色调：数以百万计细微不同的颜色，相邻像素几乎没有完全相同的，除了物体边缘之外没有硬边界。截图、Logo、图表、示意图或线稿则正好相反：大面积的同一种颜色在完全锐利的边界处相接。

每种图片格式都是为其中一种而设计的，处理另一种时就很差。有损格式——JPEG，以及有损模式下的WebP或AVIF——会丢弃人眼不易察觉的细节，这对连续色调效果极佳，却会在每一条锐利边缘周围留下明显的毛边。无损格式——PNG，以及无损模式下的WebP或AVIF——靠寻找重复内容来压缩，这对平涂色块效果极佳，对照片中的噪点却几乎不起作用。选错格式，文件要么难看，要么巨大，而人们通常只注意到其中一种。

简短的答案

要发给别人、用邮件发送或用于老旧系统的照片：JPG，质量85左右。所有地方都能打开，体积小，在这个设置下损失肉眼看不出来。

截图、Logo、图表或示意图：PNG。每条边缘都保持完全锐利，平涂区域几乎可以压缩到忽略不计。如果带透明背景，在这两种经典格式中，也只有PNG能保存透明度。

要放在您自己管理的网页上的任何图片：WebP，如果能接受编码耗时，就用AVIF。两者都比JPG和PNG做得更好——WebP有有损和无损两种模式，而且两种模式都支持透明背景；AVIF存储照片的体积约为同等JPEG的一半。

Logo或图标：有SVG就用SVG，因为它在任何尺寸下都保持清晰，而且通常比任何位图版本都小。只在无法读取矢量图的地方才把它转为位图——网站图标、社交媒体预览图、邮件和应用商店。

每种格式做不到什么

局限比功能列表更有用，因为让人栽跟头的正是局限。

JPG不支持透明背景。完全不支持，以后也不会支持。把透明背景的PNG转为JPG时，背景会被填充为纯色——这就是为什么存成JPG的Logo总是带着一个白框。而且它每次保存都有损失，所以反复编辑并重新保存同一个JPG，每保存一次画质就会再差一点。

PNG处理照片非常糟糕。不是出错——它无损且忠实——而是体积巨大，因为照片中的噪点让它赖以压缩的预测失效。一张照片存成PNG，体积往往是肉眼看不出差别的JPEG的十倍。

WebP的宽和高都有16,383像素的硬性上限，对照片来说很宽裕，对全景图、长网页的整页截图或扫描地图来说就捉襟见肘了。

AVIF编码很慢。一张大照片需要好几秒，因为它本质上是视频压缩中的一帧静态画面，换来小体积的正是这些搜索计算。解码则是瞬间完成的，对于编码一次、查看多次的文件来说，这样的取舍是对的。

兼容性的界线究竟在哪里

在这一点上，网上的建议往往在两个方向上都落后好几年。所有当前的浏览器都能读取WebP和AVIF，而且已经支持多年——所以对网站来说，以兼容性为由反对它们的理由已经不成立了。通过picture元素提供AVIF并以JPEG作为后备，连这点顾虑也能消除。

但在浏览器之外，情况就不同了，这也是人们在另一个方向上犯错的地方。较旧的邮件客户端、许多桌面看图软件、大量企业软件以及大多数印刷流程，仍然无法可靠地读取WebP或AVIF。所以规则取决于用途，而不是年份：您自己管理的网页用新格式，交给别人或其他系统的文件用JPG或PNG。

转换格式无法修复损伤

关于图片格式最常见的误解值得直接说明：把有损文件转换为无损格式，无法找回任何东西。把JPG转成PNG会完美保留JPEG的压缩痕迹——色块、文字周围的振铃、饱和边缘上的颜色晕染——因为到那时这些都已经是像素值，与画面内容无从区分。PNG体积更大，包含的可见损伤却一模一样。

但在合适的时机，这样做仍然值得。在开始一轮编辑之前转为PNG，之后每次保存都不会有损失；而反复编辑并保存JPG，每次都会降低画质。请在工作开始时转换，而不是保存了四轮之后。

反过来也是同样的道理。从JPEG编码为AVIF或WebP，新的编码器会继承旧编码器的压缩痕迹，还要花实实在在的数据量去保留它们——所以从原图直接编码一次的文件，比编码两次的文件更小、更好。永远从您手头最好的版本开始。