如何优化图片以提升Core Web Vitals

你的网站加载很慢。你运行了Lighthouse测试。报告说你的图片是问题所在。

那个红色的"Largest Contentful Paint"分数？几乎总是未优化的图片造成的。而Google用这个分数来给你的网站排名。

Core Web Vitals是Google最看重的指标。图片影响其中最重要的一个。优化你的图片，分数就会上升。以下是具体方法。

什么是Core Web Vitals？为什么图片很重要？

Core Web Vitals是Google在每个页面上测量的三个性能指标：

• Largest Contentful Paint (LCP)： 最大可见元素加载的速度。应低于2.5秒。
• Interaction to Next Paint (INP)： 点击或触摸时页面的响应速度。应低于200毫秒。
• Cumulative Layout Shift (CLS)： 加载过程中页面布局移动的程度。应低于0.1。

图片直接影响这三个指标中的两个。一张沉重的hero图片会拖垮你的LCP分数。一张没有设定尺寸的图片会导致布局偏移，损害CLS。

为什么这对你的业务很重要？Google已经确认Core Web Vitals是排名因素。分数好的页面获得更多自然流量。分数差的页面在搜索结果中排名下降。

数据证实了这一点。将LCP改善2秒以上的网站看到了可衡量的排名提升。对于竞争激烈的关键词，这个速度差距可能意味着第一页和第三页的区别。

而图片通常是页面上最重的元素。平均网页加载超过1MB的图片。这比脚本、字体和HTML加起来还多。优化图片就能解决大部分性能问题。

如何通过图片优化改善Largest Contentful Paint？

LCP测量最大可见元素完成渲染的时间。在大多数页面上，这是hero图片、产品照片或横幅。

如果那张图片需要4秒加载，你的LCP就是4秒。Google要求低于2.5秒。以下是缩小差距的方法。

压缩你的图片。 2MB的hero图片太大了。压缩到150-200KB，加载时间会大幅下降。照片使用75-85%的质量设置。视觉差异几乎看不出来，但文件大小下降80-90%。

使用现代格式。 WebP文件比JPEG小25-35%，质量相同。AVIF节省更多。所有现代浏览器都支持WebP。切换格式是最容易的LCP改善之一。

调整到显示尺寸。 页面显示800px时不要提供4000px的图片。先调整大小，再压缩。仅此一项就能将文件大小减少70-80%。

预加载你的LCP图片。 在HTML中添加预加载提示，让浏览器立即获取hero图片。没有这个，浏览器只有在解析CSS后才会发现图片。这个延迟会增加数百毫秒。

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

在LCP图片上设置fetchpriority="high"。 这告诉浏览器优先加载这张图片而非其他资源。一个小改动，却能实实在在地缩短LCP时间。

不要对LCP图片使用lazy load。 这是一个常见错误。lazy loading会延迟图片直到它滚动进入视口。你的hero图片在页面加载时就已经可见。对它使用lazy load会增加不必要的延迟，拉低你的LCP分数。

lazy loading对Core Web Vitals有帮助还是有害？

lazy loading对首屏以下的图片很好。对首屏以上的图片很糟糕。

当你给图片添加loading="lazy"时，浏览器会等到用户滚动到附近才下载。这为用户可能永远看不到的图片节省了带宽。它减少了初始页面重量，加速了首次加载。

但如果你对hero图片或任何首屏可见的图片使用lazy load，你就是在告诉浏览器延迟加载页面上最重要的视觉元素。这直接增加了LCP。

规则很简单。首屏以下的每张图片都用lazy load。首屏以上的图片绝不用lazy load。你的hero图片、页头logo和任何不滚动就能看到的内容应该立即加载。

对大多数页面来说，这意味着1-3张图片立即加载。其余全部lazy loading。这种平衡给你最好的LCP分数，同时仍然节省带宽。

也要注意lazy load图片引起的布局偏移。当lazy图片加载并把内容推下去时，这就是CLS问题。始终在图片上设置明确的width和height属性。浏览器会在图片加载前预留空间，防止布局跳动。

哪种图片格式能获得最佳Core Web Vitals分数？

你选择的格式直接影响文件大小。更小的文件加载更快。更快的加载意味着更好的LCP。

WebP是目前网页图片的最佳默认选择。比JPEG压缩效率高25-35%，没有可见的质量损失。浏览器支持超过97%。除非你需要支持非常老的浏览器，WebP应该是你的首选格式。

AVIF的压缩效果比WebP更好。比JPEG小多达50%。但编码更慢，浏览器支持还在追赶中。如果你的构建流程支持并且能提供后备方案，就使用AVIF。

JPEG用于照片仍然没问题。如果压缩得当（质量75-85），是个靠谱的选择。但WebP几乎总能在相同视觉质量下给你更小的文件。

PNG适合logo、图标和需要透明度的图片。但PNG文件很大。如果不需要透明度，转换为WebP或JPEG。

<picture>元素让你为每个浏览器提供最佳格式：

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero图片" width="1200" height="600">
</picture>

这为支持AVIF的浏览器提供AVIF，为下一组提供WebP，JPEG作为后备。每个访客都能获得其浏览器能处理的最小文件。

如何防止图片导致布局偏移？

布局偏移发生在图片加载时推动其他内容移位。你正在阅读的文字突然跳到下面。你正要点击的按钮移位了。这让用户很沮丧，也损害你的CLS分数。

解决方法很简单。始终在图片加载前告诉浏览器图片的大小。

在每张图片上设置width和height。 浏览器用这些值计算宽高比并预留正确的空间。即使图片还没加载，布局也保持稳定。

<img src="/photo.webp" alt="产品照片" width="800" height="600">

对响应式图片使用CSS的aspect-ratio。 如果你的图片随视口缩放，在CSS中设置宽高比。浏览器会在任何屏幕尺寸下预留正确的比例空间。

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

避免在现有内容上方动态插入图片。 如果JavaScript在页面顶部加载广告横幅或轮播图，下面的所有内容都会移位。为动态内容预留空间，或在首屏以下加载。

注意依赖字体的布局。 有时布局偏移不是图片造成的。延迟加载的网页字体可能重新排版文字并移动图片。使用font-display: swap并预加载你的关键字体。

Core Web Vitals的图片优化清单

以下是每个页面的逐步清单：

上传前：

• 将图片调整为显示尺寸（Retina屏幕用2倍）。
• 以正确的质量压缩图片。照片用75-85%。
• 尽可能转换为WebP或AVIF。
• 删除元数据（EXIF数据、GPS坐标、相机信息）。

在HTML中：

• 在每个<img>标签上设置width和height。
• 对所有首屏以下的图片添加loading="lazy"。
• 对LCP图片添加fetchpriority="high"。
• 用<link rel="preload">预加载LCP图片。
• 用<picture>元素提供现代格式和后备方案。

部署后：

• 运行Lighthouse或PageSpeed Insights。检查LCP和CLS分数。
• 查看"优化建议"部分。它会标记可以更小的图片。
• 在手机上测试。移动网络更慢，图片优化在那里更加重要。

持续遵循这个清单将使你的Core Web Vitals保持绿色。大多数网站仅通过图片优化就能将LCP降低1-3秒。

如何测试和监控图片性能？

优化一次是不够的。新图片会被添加。内容会改变。你需要持续监控性能。

Google PageSpeed Insights给你快速概览。粘贴任何URL，获取移动端和桌面端的LCP、INP和CLS分数。有Chrome用户的真实数据时也会显示。

Lighthouse（内置于Chrome DevTools）运行完整审计。它会标记过大的图片、缺少lazy loading、没有尺寸的图片和使用过时格式的图片。在无痕窗口运行以避免扩展干扰。

Google Search Console显示整个网站的Core Web Vitals数据。它按状态分组URL：良好、需要改进或差。每月检查以尽早发现退化。

WebPageTest给你页面加载的逐帧视图。你可以确切地看到每张图片何时出现以及它如何影响渲染时间线。

热门压缩工具对比可以帮你选择适合你工作流程的工具。无论是一次压缩一张图片还是批量处理数百张，合适的工具让优化变得容易维护。

准备好修复你的Core Web Vitals了吗？

图片是大多数网页上最大的负担。优化图片是你能为Core Web Vitals做的影响最大的改变。

压缩你的图片。使用现代格式。设置正确的尺寸。预加载重要的。lazy load不重要的。

CompressIMG处理压缩步骤。上传你的图片，选择质量，几秒钟内下载优化后的文件。不需要账户。从hero图片开始，然后逐步处理其他图片。

你的LCP分数会感谢你的。