跳到主要内容

响应式图片

为什么需要多分辨率图片？​

  • 屏幕像素比不同: 高密度屏需要高分辨率资源, 否则画面发虚;
  • 屏幕宽度不同: 窄屏取大图浪费带宽;
  • 手段: 用 srcset 提供候选集, 由浏览器按条件挑一张;

用像素比选择图片怎么写？​

  • 写法: srcset 中每项为 URL + x 描述符, 如 480w.jpg 1.5x;
  • 含义: 描述符表示该资源适合的屏幕像素比;
  • 兜底: 不带描述符的项按 1x 处理, 未匹配时用 src;
<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy"
/>

用显示宽度选择图片怎么写？​

  • 写法: srcset 中每项为 URL + 固有宽度, 如 elva-fairy-480w.jpg 480w;
  • sizes: 用媒体条件声明该图在不同条件下的显示宽度;
  • 选择: 浏览器结合显示宽度与像素比, 挑出足够清晰的候选;
<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

picture 元素如何按格式与媒体条件选择图片？​

  • 结构: picture 内放多个 source, 末尾放一个 img 兜底;
  • 顺序: 浏览器取第一个条件匹配的 source;
  • 条件属性: type 按 MIME 类型选格式、media 按媒体查询选图、srcset 给候选集;
  • 兜底: 不支持 picture 或没有匹配项时显示 img;
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 1000px)" />
  <source srcset="mdn-logo.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

picture 与 img 的 srcset 如何取舍？​

需求选择
同一张图换分辨率img + srcset
换图片格式或按媒体条件换图picture + source
  • 结论: picture 多覆盖格式与构图两类切换, 只换分辨率时 img 更直接;