网页最佳图片格式：WebP、JPG、PNG 还是 AVIF？

图片约占普通网页数据传输量的 50%–60%。选择合适的图片格式是提升网页性能最有效的优化手段之一。以下是各格式的实用对比，以及每种格式的适用场景。

你应该了解的格式

JPG（JPEG）

老将。JPG 自 20 世纪 90 年代以来一直是网页照片的标准格式。它采用针对照片优化的有损压缩——适合自然色彩渐变、纹理和复杂场景。

最适合： WebP 或 AVIF 不可用，或需要兼容旧系统时的照片。 弱点： 比现代格式体积更大，不支持透明度，低质量设置下会出现压缩伪影。

PNG

PNG 是一种无损格式，适合纯色、锐利边缘和透明背景的图形。

最适合： 徽标、图标、截图、UI 元素，以及需要透明度的图片。 弱点： 用于照片时体积远大于 JPG，加载速度更慢。

WebP

谷歌的 WebP 格式提供有损和无损压缩，支持透明度，性能优于 JPG 和 PNG。它现在是网页图片的推荐默认格式。

最适合： 几乎所有场景——照片（替代 JPG）、徽标/图形（替代 PNG）、一般网页图片。 文件体积优势： 在同等视觉质量下比 JPG 小 25%–35%；与 PNG 相近，但通常更小。 浏览器支持： 97% 以上（Chrome、Firefox、Safari、Edge——所有现代浏览器）。

AVIF

源自 AV1 视频编解码器，AVIF 是最新的主流图片格式。它实现了优于 WebP 的压缩效果——在同等质量下通常小 20%–50%。

最适合： 以最大压缩率为优先，且你能控制服务器/构建流程的静态图片。 弱点： 编码速度较慢（不适合实时生成），旧版浏览器可能不支持。 浏览器支持： Chrome 85+、Firefox 93+、Safari 16+、Edge 121+。

SVG

SVG 是一种矢量格式——图片以数学路径而非像素描述。SVG 文件与分辨率无关，用于徽标和图标时体积通常很小。

最适合： 徽标、图标、插图、图表，以及任何需要缩放到不同尺寸的图形。 不适合： 照片或任何带有复杂渐变和纹理的图片。

格式与使用场景对照表

性能影响：真实数据

将一张典型产品照片转换为现代格式：

从 JPG 切换到 WebP，每张图片的体积大约可以节省 38%。在一个含有 20 张产品图片的页面上，这意味着每次页面加载可以节省数兆字节的数据。

用于渐进增强的 <picture> 元素

如果你想以 AVIF 为主、WebP 作为备用、JPG 作为最终兜底方案：

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

这样，现代浏览器可以使用 AVIF，较旧的现代浏览器使用 WebP，而传统浏览器则回退到 JPG——完全不需要 JavaScript。

Core Web Vitals 怎么办？

**最大内容绘制（LCP）**是谷歌 Core Web Vitals 指标之一，深受图片加载时间的影响。为首屏大图和产品照片使用 WebP 或 AVIF，可以直接改善你的 LCP 分数，而这正是谷歌的排名信号之一。

网页图片的其他建议：

• 添加 width 和 height 属性，避免布局偏移（CLS）
• 对首屏以下的图片使用 loading="lazy"
• 在 LCP 图片（通常是首屏大图）上使用 fetchpriority="high"

转换你的图片

你可以使用 PicsSizer 的图片转换器将任意图片转换为 WebP、AVIF、PNG 或 JPG。如需批量优化，图片压缩器可以让你调整质量设置，在不产生明显画质损失的前提下获得最小的文件体积。

总结：2026 年的推荐默认设置

1. 网页照片 → WebP（通过 <picture> 提供 JPG 备用方案）
2. 徽标和图标 → SVG（栅格备用方案：PNG）
3. 截图和示意图 → WebP（提供 PNG 备用方案）
4. 静态资源的最大压缩 → AVIF（提供 WebP 备用方案）
5. 传统邮件模板 → JPG 或 PNG（邮件客户端不支持现代格式）