为Core Web Vitals优化图片

# 图片优化如何影响 Core Web Vitals Google 的 Core Web Vitals 是三个直接影响搜索排名的指标。而图片？它们影响全部三个。 ## LCP（Largest Contentful Paint） **目标：< 2.5秒** 您的首屏图片通常是 LCP 元素。要优化： 1. **预加载** LCP 图片：`` 2. **使用 WebP** — 小 30% = 加载快 30% 3. **响应式图片** — 不要向移动端提供 2000px 的图片 4. **优先级提示** — 首屏图片使用 `fetchpriority="high"` ## INP（Interaction to Next Paint） **目标：< 200毫秒** 主线程上的繁重图片处理会阻塞交互： 1. **懒加载** 首屏以下的图片 2. **异步解码** — `decoding="async"` 3. **使用我们的浏览器工具** — 处理通过 Web Workers 在主线程外进行 ## CLS（Cumulative Layout Shift） **目标：< 0.1** 没有尺寸的图片会导致布局偏移： 1. **始终指定宽度/高度** — 在 HTML 或 CSS 中 2. **使用宽高比容器** — 在图片加载前预留空间 3. **避免内容注入** — 不要在现有内容上方加载图片 ## 实际影响 优化前： - LCP: 4.2秒 ❌ - CLS: 0.25 ❌ - INP: 380毫秒 ❌ 图片优化后： - LCP: 1.8秒 ✅ - CLS: 0.02 ✅ - INP: 120毫秒 ✅ ## AmberPic 的优势 我们的工具帮助您： - 上传前压缩图片（更小的 LCP） - 转换为现代格式（更快的解码） - 批量调整响应式断点尺寸（合适的尺寸） --- *在图片到达 CDN 之前进行优化 — [试用 AmberPic](/zh/compress/)。*