JPG、PNG、WebP、AVIF 怎么选？图片格式对比

四种格式的核心差异

扩展名本身不会决定画质，编码设置和原图内容同样重要。同一张照片把 JPEG 质量设得过低，会比合理质量的 WebP 或 AVIF 更容易出现块状和色带；同理，把简单图标保存成高质量 JPEG 也可能比 PNG 更大、更糊。

按内容选择，而不是按流行程度选择

• 相机照片：JPEG 兼容性最稳；WebP 常能在相近观感下进一步减小体积；AVIF 更适合有现代浏览器回退策略的网站。
• 产品截图：小字号和直线边缘怕有损伪影，优先 PNG；体积太大时尝试无损 WebP。
• 透明图标：PNG 是稳妥默认值；WebP/AVIF 可保留透明，但要验证工作流兼容性。
• 存档原稿：不要只保留有损导出。保留原始 TIFF、RAW 或高质量母版，发布时再生成轻量版本。

在极致压图里怎样试出答案

1. 选 3 张代表性素材：人像、细节丰富的风景、带文字或透明区域的界面图。
2. 保持原始尺寸，分别导出 JPEG、WebP 和 AVIF；PNG 仅用于适合无损的素材。
3. 在 100% 缩放下看头发、文字边缘、天空渐变和阴影。
4. 比较文件体积与目标平台兼容性，再决定批量输出格式。

不要只看缩略图。压缩伪影往往藏在暗部、柔和渐变和高对比边缘。智能自动模式会为 JPEG/WebP/AVIF 逐图搜索达到目标 SSIM 的较低质量，但最终仍应由人眼判断内容是否可接受。

网站发布的稳妥组合

现代网站可以用 <picture> 依次提供 AVIF、WebP 和 JPEG/PNG 回退，让浏览器选择能解码的第一个来源。内容管理系统或构建工具如果不能自动生成多格式，先使用 WebP + JPEG/PNG 回退通常更容易维护。

格式转换后若 URL 改变，记得更新 HTML、缓存和站点地图中的引用。不要为了“全站现代化”一次性替换所有历史图片；先从体积最大、访问量最高的页面开始。