JPG、PNG、WebP 有什么区别？该用哪种图片格式？

三种格式横向对比

这三种格式各有设计用途，差别主要在于压缩像素的方式和附带的额外功能。

有损与无损：决定性的区别

有损压缩（JPG、有损 WebP）会丢弃人眼不太容易察觉的细节。它适合色彩渐变平缓的照片，但会让锐利的边缘变糊：JPG 中的文字和细线周围会出现淡淡的光晕，称为振铃效应或蚊式噪声，低质量时还会出现 8×8 像素的方块。

无损压缩（PNG、无损 WebP）会精确保存每一个像素。它对大面积纯色的压缩效果很好，所以截图存成 PNG 可能比 JPG 还小；但照片存成 PNG 往往比一张好的 JPG 大 3–5 倍，画质却看不出提升。

• JPG 每次编辑后重新保存，都会再压缩一次，细节也会再损失一点。如果要反复编辑，请保留一份无损母版。
• JPG 转成 PNG 并不能找回已丢失的细节，只是把已经压缩过的像素以不再损失的方式存进一个更大的文件。
• JPG 质量设为 80–90% 左右，是文件大小和可见瑕疵之间常见的平衡点。

WebP 能小多少？

谷歌的 WebP 压缩研究在结构相似性（SSIM）相同的条件下比较文件大小：有损 WebP 比 JPG 小 25–34%，谷歌还公布无损 WebP 比 PNG 小约 26%。实际节省多少取决于图片本身、编码器和质量设置。

举个例子：一张 400 KB 的 JPG 首图，以相近画质存成有损 WebP，通常在 265–300 KB 左右。一个页面有二十张图片时，这个差距能明显缩短移动网络下的加载时间。

AVIF 适合用在哪里

AVIF 是一种较新的格式，用 HEIF 式容器存放 AV1 压缩的图像。拍照类图片的文件大小通常比 WebP 更小，支持 10 位和 12 位色彩及 HDR，也支持透明。Chrome 从 85 版、Firefox 从 93 版、Safari 从 16 版开始支持。

它的代价是编码较慢、老旧桌面软件支持较差，而且在极低质量下偶尔会丢失细微纹理。很多网站借助 HTML 的 <picture> 元素，优先提供 AVIF，其次 WebP，最后用 JPG 兜底。

快速选择指南

如果表单不接受 WebP，照片就另存一份 JPG，图形就另存一份 PNG。把有损文件转成无损格式，除了兼容性之外没有任何好处。