面向 Core Web Vitals 与 LCP 的图片优化

网页体积中占比最大的通常是图片。页面速度直接影响用户体验和搜索排名,因此图片优化是网站上收益最大的工作之一。谷歌用 Core Web Vitals 来衡量,而图片正处于其中两项指标的核心。

图片如何影响 Core Web Vitals

LCP(最大内容绘制)衡量可视区域内最大元素完成渲染的时间。多数页面上这个元素是首屏大图,所以又重又慢的图片会直接拉高 LCP。目标是 2.5 秒以内。

CLS(累积布局偏移)衡量加载过程中内容的意外移动。图片若未声明尺寸,浏览器无法预留空间,图片一到周围内容就会跳动。这两个问题都能用几个技巧解决。

1. 使用现代格式

把 JPEG、PNG 换成 WebP 或 AVIF,常能在同等画质下减少 25%–50% 的体积。文件更小下载更快,LCP 直接下降。像 Scrunch 这样一次批量转换整个文件夹,是全站应用此优化的最快方式。

2. 按显示尺寸提供图片

最常见的错误是上传 4000 像素宽的照片却显示在 800 像素的容器里——浏览器仍会下载完整文件。把图片缩放到大致的显示尺寸(为高密度屏幕保留约 2 倍),节省效果立竿见影。

3. 使用响应式图片

srcset 属性让浏览器为每种屏幕挑选合适的图片。手机不该下载桌面尺寸的首屏大图。提供几档宽度,小屏幕就能拿到小文件,这对移动端 Core Web Vitals 尤其重要。

4. 屏幕外的图片用懒加载

但首屏大图绝不要懒加载

给折叠线以下的图片加 loading="lazy",浏览器会推迟到需要时再加载,节省带宽。但页面顶部的 LCP 图片应立即加载——最好配合 fetchpriority="high",让它尽快出现。

5. 预留空间防止布局偏移

始终为图片设置 width 和 height 属性(或 CSS 的 aspect-ratio)。浏览器就能在加载前预留正确空间,消除伤害 CLS 的跳动。

快速清单

• 图片转为 WebP 或 AVIF
• 缩放到实际显示尺寸(Retina 约 2 倍)
• 提供响应式 srcset 宽度
• 折叠线以下图片懒加载
• 优先加载 LCP/首屏图片
• 设置 width/height 避免布局偏移

格式和尺寸是基本功,从这里开始。Scrunch 负责其中的转换与压缩环节,在浏览器内一次处理多张图片。