响应式图片

<picture> + srcset + 尺寸占位

1. 三种格式

<picture> 让浏览器自己挑最优格式：

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="...">
</picture>

浏览器从上往下看，第一个 type 它支持就停。老浏览器走到最后的 <img>。

2. srcset 多分辨率

同一张图给多份尺寸，浏览器按屏幕宽度和像素密度挑：

<img src="img-800.jpg"
  srcset="img-400.jpg 400w,
          img-800.jpg 800w,
          img-1600.jpg 1600w"
  sizes="(max-width:600px) 100vw, 800px"
  width="800" height="600" alt="...">

3. 尺寸占位防 CLS

width 和 height 属性让浏览器在图片加载前就预留位置，页面不会「加载完往下跳」。

没有 width/height → 图片加载完页面往下跳（CLS 累积布局偏移）
有 width/height → 浏览器按比例预留，位置不动

4. 懒加载

<img src="below-fold.jpg" loading="lazy" decoding="async">

首屏外的图不进首屏请求队列。注意：首屏图不要加 lazy，否则它反而变慢。

5. 实际效果对比

下面这张图是内联 SVG，不同视口宽度会用不同尺寸：

实战结论

logo / 图标 / 插画 → 内联 SVG 或 SVG 文件，零成本。
照片 → WebP + 多分辨率 srcset。
照片里的小图（列表缩略）→ 别用原图，出一份 200px 宽的。