性能图片Web 开发

图片优化与 Core Web Vitals：实战指南

图片是网页性能的最大影响因素。教你如何正确优化图片并提升 Core Web Vitals 分数。

RunToolz Team2026年2月4日7 min read

几年前 Google 开始用 Core Web Vitals 作为排名因素，突然之间每个人都开始关心页面速度。但当你深挖到底是什么让页面变慢时，几乎总是同一个罪魁祸首：图片。

在平均网页上，图片约占页面总重量的 50%。解决好图片问题，你就解决了性能难题的一半。

三个关键指标

LCP（Largest Contentful Paint） ——最大可见元素加载多快。通常就是图片。Google 要求在 2.5 秒以内。

CLS（Cumulative Layout Shift） ——页面加载时元素跳动多少。没有定义尺寸的图片是主要原因。目标：低于 0.1。

INP（Interaction to Next Paint） ——页面对用户操作的响应多快。沉重的图片会阻塞主线程并延迟交互。目标：低于 200ms。

效果是真实的

优化典型内容网站图片后的变化：

| 指标 | 优化前 | 优化后 | |------|--------|--------| | 页面重量 | 4.2 MB | 890 KB | | LCP | 4.8 秒 | 1.6 秒 | | CLS | 0.25 | 0.02 | | 加载时间（3G） | 18 秒 | 4 秒 |

这不是挑选的数据。这些数字来自我实际工作过的网站。修复并不复杂——只需要一点用心。

第 1 步：正确的尺寸，正确的格式

最大的收益是以正确的尺寸提供图片。一张 3000px 宽的 hero 图显示在 1200px 上，发送了 6 倍于所需的像素。

把图片调整到它们的显示尺寸。Retina 屏幕做 2 倍——如果图片显示在 600px，就做成 1200px。

想亲自试试吗？调整图片大小

然后选择正确的格式：

WebP ——同等质量下比 JPEG 小 25-35%。作为默认选择。
AVIF ——比 WebP 还小，但编码更慢，浏览器支持在跟进中。
JPEG ——通用备选。在 WebP 不可用时，照片依然好用。
PNG ——仅用于需要透明度且无法使用 WebP 的图片。
SVG ——用于图标、Logo 和简单插图。文件极小，无限缩放。

第 2 步：大胆压缩

大多数图片的质量超过了屏幕能显示的。你可以把 JPEG 压到质量 80，没人能看出区别——但文件会小 40-60%。

粗略参考：

| 质量等级 | 用途 | 典型节省 | |----------|------|---------| | 90-100 | 摄影作品集 | 10-20% | | 75-85 | 一般网页图片 | 40-60% | | 60-75 | 缩略图、背景 | 60-80% |

不要猜测质量等级。压缩后看结果。如果看不出区别，压缩就是合适的。

想亲自试试吗？立即压缩图片

第 3 步：修复布局偏移

页面上每张图片都应该有明确的 width 和 height 属性，或使用 CSS aspect-ratio。没有这些，浏览器不知道要预留多少空间，图片加载时内容就会跳动。

<!-- 好：浏览器知道需要的空间 -->
<img src="photo.webp" width="800" height="600" alt="描述" />

<!-- 也好：CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="描述" />

仅这一项就能让你的 CLS 从不达标变成达标。

第 4 步：懒加载首屏以下的图片

如果一张图片在页面首次加载时不可见，就不要加载它直到用户滚动到那里。

<img src="photo.webp" loading="lazy" alt="描述" />

一个属性。就这样。但不要懒加载你的 hero 图或 LCP 元素——那需要立即加载。

第 5 步：使用响应式图片

为不同的屏幕宽度提供不同的尺寸。手机不需要 1400px 的图片。

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800.webp"
  alt="描述"
/>

是的，需要生成多个尺寸。但移动端的带宽节省是显著的。