网站性能最优图片格式选择指南

← 返回博客

网站性能最优图片格式选择指南

· 5 分钟阅读

图片格式对 LCP 的直接影响

LCP（Largest Contentful Paint，最大内容绘制）是 Google Core Web Vitals 三项指标之一，衡量页面最大可见元素的渲染时间。在绝大多数网页上，LCP 元素都是一张图片——通常是首屏的 Hero 图、Banner 或产品主图。

图片格式直接决定文件大小，文件大小决定下载时间，下载时间是 LCP 的核心组成部分。以同一张 1920×1080 照片为例，不同格式的文件大小差异可达 10 倍以上，LCP 时间差异可达 1–2 秒，足以从「良好」跌入「差」的区间。

五大格式全面对比（2025）

格式选择决策逻辑

按以下问题顺序判断应使用哪种格式：

1. 是矢量图形（Logo、图标、插图）吗？→ 使用 SVG。
2. 是动画内容吗？→ 使用 MP4/WebM 视频（如果是循环动画嵌入网页），或 WebP 动图。避免 GIF。
3. 需要透明背景吗？→ 使用 WebP（首选）或 PNG（兜底）。
4. 是照片类内容吗？→ 使用 WebP（首选）；若需最大压缩率且兼容性可控，用 AVIF + WebP 回退 + JPG 二级回退。
5. 目标用户浏览器非常老旧？→ 使用 JPG（照片）或 PNG（透明），无需 WebP/AVIF。

2025 年的实际建议：默认使用 WebP，对兼容性有更高要求时提供 JPG 回退，追求极致压缩时在首层加入 AVIF。

2025 年浏览器支持现状

• **WebP：**Chrome、Firefox、Safari（15.1+）、Edge、Samsung Internet 全面支持，覆盖率约 97%。
• **AVIF：**Chrome（85+）、Firefox（93+）、Safari（16+）、Edge（121+）支持，覆盖率约 90%。iOS Safari 对 AVIF 的支持从 iOS 16 开始，但部分编码参数下存在兼容问题，建议提供 WebP 回退。
• **SVG：**所有现代浏览器全面支持，100% 覆盖率。

响应式图片：srcset 的正确用法

响应式图片允许浏览器根据设备屏幕尺寸和分辨率自动选择最合适的图片版本，避免在移动端下载桌面分辨率的大图。标准写法：

结合 `` 标签还可以同时实现格式回退：

懒加载：非首屏图片的必要优化

懒加载（Lazy Loading）让浏览器只在图片即将进入视口时才开始加载，大幅减少首屏所需的总下载量。现代浏览器已原生支持：

重要：不要对首屏关键图片（LCP 元素）使用 loading="lazy"，否则会推迟 LCP 加载，反而损害性能。首屏图片应使用 fetchpriority="high" 提升加载优先级。

Core Web Vitals 图片优化清单

• LCP 图片使用 WebP 或 AVIF 格式。
• LCP 图片添加 fetchpriority="high"，不加 loading="lazy"。
• 所有图片指定 width 和 height 属性，防止布局偏移（CLS）。
• 非首屏图片统一添加 loading="lazy"。
• 使用 srcset 提供多分辨率版本，避免移动端加载超大图。
• 所有图片添加有意义的 alt 属性（图片 SEO 基础）。

总结

2025 年网站图片格式的最优选择是 WebP（通用场景）和 AVIF（追求极致压缩）。SVG 用于矢量图形，JPG/PNG 仅作为兜底回退保留。结合响应式图片（srcset）和懒加载，可以在不牺牲视觉质量的前提下最大化页面性能，直接改善 LCP 和整体 Core Web Vitals 评分。

立即尝试在线工具，无需安装，免费使用。

打开工具 →