JPG、PNG、WebP、AVIF 到底怎么选?

· 约 2 分钟 🗜️ 图片压缩

同一张照片,JPG 300KB、WebP 180KB、AVIF 90KB——四种格式体积能差 5 倍。选错了白花带宽和加载时间。关键是理解每种格式擅长什么。

四种格式一览

格式压缩透明动画浏览器支持
JPG有损100%(古老)
PNG无损100%
WebP有损+无损97%(IE 不支持)
AVIF有损+无损94%(2020+ 浏览器)

按场景选

照片 / 高颜色复杂度 → AVIF > WebP > JPG 有损压缩擅长处理连续渐变。AVIF 在同等画质下比 JPG 小 50%-70%,比 WebP 小 20%。

图标 / 纯色 / 截图 → PNG 或 WebP 无损 这类图色块纯、边缘锐利。JPG 有损压缩会在色块边界产生彩色噪点(伪影),看起来很脏。PNG 无损,体积小;追求更小可用 WebP 无损模式。

需要透明通道 → PNG / WebP / AVIF JPG 不支持透明。PNG 最成熟稳妥;如果目标浏览器现代,WebP 透明支持好且体积小得多。

动图 → WebP > GIF > APNG GIF 颜色限制 256 色、体积大、无高清。WebP 同画质能小 50%-70%。

AVIF 目前的门槛

  • 编码慢:一张图 AVIF 压缩比 WebP 慢 5-10 倍,大批量处理要多预留时间
  • Safari 16+ 才完整支持(2022 年底)
  • 老旧浏览器 fallback 仍需 JPG/PNG

实践方案:用 HTML <picture> 标签多源头:

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="">
</picture>

浏览器从上到下挑第一个能解码的,老浏览器自动回退到 JPG。

质量参数怎么设

JPG:80-85% 是最佳点。往下降肉眼可见伪影,往上升体积暴涨但画质提升有限。

WebP 有损:75-85%,比 JPG 低 5-10% 的数值通常视觉等价。

AVIF:50-70% 就能达到 JPG 85% 的画质。别简单复用 JPG 的数值——会过度压缩或过度保真。

PNG 优化:不止是压缩

PNG 无损,但体积差距来自元数据、过滤算法选择、颜色索引等。一个没优化的 1MB PNG 经过 pngquant + oxipng 可能能压到 250KB 且视觉无损。浏览器保存的 PNG 基本都是没优化的,值得走一遍压缩工具。

一个常见错误:用 PNG 存照片

PNG 对渐变和噪点效率差,存一张 JPG 800KB 的照片可能变成 5MB 的 PNG。照片永远用有损格式。只有当你需要透明或像素级精确时才选 PNG。

批量压缩

把一堆图拖进去,选目标格式和质量,客户端本地压缩(不上传服务器),下载压缩包——对照原图看体积和画质的平衡点。

❓ 常见问题

PNG "压缩"后是无损的吗?

是。PNG 用的是 DEFLATE 算法(和 ZIP 同源),像打包压缩——还原时每个像素和原图完全一致。`pngquant`、`oxipng` 这些"压缩"工具能让 PNG 变小,要么是去冗余元数据,要么是"视觉近似"的颜色索引化(这一步严格来说已经不是无损了)。

WebP 微信朋友圈能发吗?

可以发,但微信会自动转成 JPG 再发布。收到的人看到的是压缩后的 JPG,不是原始 WebP。所以别指望微信保留 WebP 的小体积优势。邮件、自建网站、个人博客能完整保留 WebP。

AVIF 什么时候能全面替代 JPG?

短期内不会。浏览器覆盖已达 94%(Safari 16+/Chrome/Firefox),但社交平台、老设备、嵌入式系统仍主要认 JPG。未来 3-5 年会逐步替换,现阶段最佳策略是 `<picture>` 多源方案,让支持 AVIF 的设备拿到小图。

图片压缩会丢 EXIF 吗?

取决于压缩工具。多数在线压缩会保留 EXIF(包括 GPS 位置);手机自带压缩有的会去敏感字段;专业工具(如 TinyPNG)可选择保留或去除。上传前如果不想暴露拍摄位置,要主动检查并清理 EXIF。

🗜️ 打开 图片压缩 批量压缩 · JPG/PNG/WebP/AVIF