用 srcset 提供响应式图片

目标

移动端用户下载桌面尺寸的图片，浪费带宽并拖慢最大内容绘制。本配方生成多个尺寸变体并以 srcset 宽度描述符与 sizes 声明发布，配合 AVIF 等现代格式，使浏览器按布局与像素密度选择最小够用的变体，并设置宽高预留空间；提醒 sizes 必须与 CSS 布局一致。

步骤要点

1. 生成多个尺寸变体并以 srcset/sizes 发布。
2. 提供现代格式与回退。
3. 设置 width/height 预留空间避免偏移。
4. 用测量验证移动端下载更小图片且 LCP 改善。

<img
  src="/img/hero-800.avif"
  srcset="/img/hero-400.avif 400w, /img/hero-800.avif 800w, /img/hero-1600.avif 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="1600" height="900" loading="eager" alt="Hero">

排错提示

• sizes 与布局不符会导致下载过大。
• 缺少宽高会导致布局偏移。
• 现代格式需要回退。

适用边界

• 生成变体增加构建成本。
• sizes 需随布局更新。