对绝大多数网站来说，图片是 Core Web Vitals 分数最大的单一影响因素。它通常是最大的可见元素、最常引发布局抖动，也经常是阻塞主线程的元凶。本文把所有跟图片有关的优化手段串起来，让 LCP、CLS、INP 三项都进入绿区。
三大指标速记
- LCP（最大内容绘制）——最大可见元素完成渲染所需时间。目标：≤ 2.5 秒。
- CLS（累计布局偏移）——页面加载过程中可见内容跳动的累积幅度。目标：≤ 0.1。
- INP（下次绘制交互）——交互的响应速度。目标：≤ 200 ms。INP 已于 2024 年取代 FID。
三个指标都跟图片相关，下面逐项说明怎么优化。
1. 让 LCP 图片优先加载
大多数落地页的 LCP 元素就是首屏大图。三个立竿见影的动作：
- 预加载它。在
<head>加上<link rel="preload" as="image" href="/24picture/hero.webp" fetchpriority="high">。 - 给
<img>也加fetchpriority="high"。 - 绝对不要给 LCP 图加
loading="lazy"。这是 Lighthouse 最常见的报警之一。
2. 用现代格式
把 JPG/PNG 换成 WebP 或 AVIF，体积通常能再降 25%–50% 而画质不变，直接喂入 LCP。用 <picture> 给老浏览器留个 JPG 兜底：
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/24picture/hero.jpg" alt="..." width="1920" height="1080">
</picture>用我们的 PNG 转 WebP 工具几秒就能转完。
3. 压缩要狠，但要合理
JPG/WebP 的质量 80 是大多数照片的甜点位——肉眼跟质量 95 没区别，但体积小一半。图形类用无损 WebP 或压缩 PNG。一键瘦身可用我们的 图片压缩工具（纯浏览器，文件不离开你电脑）。
4. 永远写 width 和 height
这是治 CLS 最重要的一招。width 和 height 不是布局尺寸，现代浏览器用它们提前预留宽高比空间：
<img src="/24picture/hero.webp" width="1920" height="1080" alt="...">配合 CSS max-width: 100%; height: auto;，图片自适应缩放且不会引起布局偏移。
5. 用 srcset 做响应式
给一台 360 像素宽的手机送 4K 图就是浪费带宽。用 srcset + sizes，让每个设备只下需要的：
<img
src="/24picture/hero-1280.webp"
srcset="/hero-640.webp 640w, /hero-1280.webp 1280w, /hero-1920.webp 1920w"
sizes="(max-width: 768px) 100vw, 1280px"
alt="..." width="1920" height="1080">批量调尺寸用我们的 尺寸调整工具。
6. 首屏以下统统懒加载
给所有首屏外的 <img> 加 loading="lazy"。浏览器会在用户滚动到附近时才下载它们，把带宽和 CPU 留给 LCP，间接改善 INP。
例外：LCP 图本身和你预加载的图不能用 loading="lazy"。
7. 异步解码
给非关键图片加 decoding="async"，浏览器会把解码挪出主线程，避免在滚动或点击时被大图解码卡住，对 INP 友好。
8. 留意 Web 字体和图标雪碧图
用了图标雪碧图或大型 SVG，记得过一下 SVG 优化器。我们的 SVG 优化器通常能砍掉 30–60% 体积，并降低解析时间——这对交互密集的页面 INP 帮助显著。
9. 警惕会跳的轮播图
轮播容器要写死高度。如果不同图片宽高比不一致，用 object-fit: cover 统一比例。每加载一张新图就改变尺寸的轮播，是 CLS 的"重灾区"。
10. 缓存要狠
给带 hash 的图片文件名设置 Cache-Control: public, max-age=31536000, immutable。回访用户带缓存命中，LCP 几乎是满分。
快速自查清单
- LCP 图已 preload 并设
fetchpriority="high"✅ - 使用 WebP/AVIF 现代格式，附带兜底 ✅
- JPG/WebP 质量约 80 ✅
- 每张图都写 width/height ✅
- 主图和正文图配
srcset+sizes✅ - 首屏外用
loading="lazy"+decoding="async"✅ - SVG 已优化 ✅
- 长缓存命中 ✅
小贴士：我们见到 90% 的 LCP 失分都是因为同一张未优化的巨图。把它转成 WebP，写好尺寸，加上 preload，分数立刻就跳。
结论
Core Web Vitals 不是黑盒。图片几乎主导一切，绝大多数修复只是一行 HTML 或一次格式转换。把首屏图搞定，所有图都写宽高，首屏外懒加载——你就能过线。
不知道从哪开始？把首屏图过一遍我们的 压缩工具，再用 PNG 转 WebP 转好——LCP 会立刻下降。
