B02 多媒体与响应式图片

摘要：一张 2000 像素宽的原图在手机上会被缩到 400 像素显示，多出的流量全部浪费；而换成小图后在桌面高倍屏上又显模糊。srcset、sizes 与 picture 让浏览器按设备与网络自行选择资源，video 与 audio 则负责把媒体纳入页面结构。本文给出三类媒体的完整写法，并说明浏览器选择资源的实际顺序。
关键词：srcset，sizes，picture，video，懒加载

所属：frontend/html / B-进阶 ｜上一篇：B01-元信息与SEO ｜下一篇：B03-内嵌内容与安全

1 引言

图片通常占页面体积的一半以上。手工为每种设备准备一份页面不现实，浏览器已经内置了资源选择机制：页面只描述「有哪些候选资源、各自适合什么条件」，最终选哪个由浏览器决定。

本文给出图片、音频、视频三类媒体的写法与取舍。范围见表 1-1。

项	本文覆盖	本文不覆盖
图片	`srcset`、`sizes`、`picture`、`loading`、`decoding`	图片压缩与格式转换工具
音视频	`video`、`audio`、`source`、`track`、`poster`	转码、CDN 与防盗链
无障碍	`alt`、字幕轨、控件显示	完整无障碍规范（C 阶段）

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器	能访问 `localhost`
素材	同一张图导出 480 / 960 / 1600 三个宽度	命名如 `cover-480.jpg`
前置	A05 的路径规则	能写正确的相对路径
浏览器	Chrome 130+，开发者工具 Network 面板可用	能看到资源请求尺寸

3 原理与实现

3.1 浏览器如何挑图片

浏览器读取候选列表与显示条件，结合设备像素比选出最小够用的一张，如图 3-1 所示。

flowchart TD
    A["解析 img 元素"] --> B{"有 srcset 与 sizes"}
    B -->|"有"| C["读取候选宽度与显示宽度"]
    C --> D["按设备像素比换算所需像素"]
    D --> E["选满足条件的最小候选"]
    B -->|"无"| F["直接请求 src"]
    E --> G["下载并解码"]
    F --> G
    G --> H["渲染，占位由宽高预留"]

图 3-1 图片资源的选取顺序

图上可见：srcset 只提供候选，sizes 告诉浏览器显示宽度，两者缺一则选择退化为按默认宽度处理。

3.2 三类媒体的写法

<!-- 运行环境：Chrome 130+；素材与图片同目录 assets/images/ -->
<img
  src="./assets/images/cover-960.jpg"
  srcset="
    ./assets/images/cover-480.jpg 480w,
    ./assets/images/cover-960.jpg 960w,
    ./assets/images/cover-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="雨天街道，路面反光"
  width="960"
  height="540"
  loading="lazy"
  decoding="async"
/>

<picture>
  <source type="image/avif" srcset="./assets/images/cover.avif" />
  <source type="image/webp" srcset="./assets/images/cover.webp" />
  <img src="./assets/images/cover.jpg" alt="雨天街道，路面反光" width="960" height="540" />
</picture>

<video controls preload="metadata" poster="./assets/images/video-cover.jpg" width="960" height="540">
  <source src="./assets/media/rain.webm" type="video/webm" />
  <source src="./assets/media/rain.mp4" type="video/mp4" />
  <track kind="captions" src="./assets/media/rain.zh.vtt" srclang="zh" label="中文字幕" default />
  当前浏览器不支持内嵌视频，<a href="./assets/media/rain.mp4">下载后观看</a>。
</video>

<audio controls preload="metadata" src="./assets/media/intro.mp3">
  当前浏览器不支持音频播放。
</audio>

关键属性与常见错误见表 3-1。

属性 / 元素	作用	常见错误
`srcset` + `w` 描述符	提供不同宽度的候选	只写文件名，漏掉 `480w`
`sizes`	声明显示宽度，供浏览器换算	与实际布局宽度不符，选出过大或过小
`picture`	按格式或艺术方向切换资源	内部 `img` 漏写，回退时无内容
`loading="lazy"`	延迟加载视口外图片	首屏主图也加，导致首屏变慢
`decoding="async"`	允许异步解码	未加，长图解码阻塞渲染
`width` / `height`	预留占位，避免布局抖动	只写一个，比例失调
`video poster`	播放前封面	未设置，首帧为黑底
`track kind="captions"`	字幕轨	视频有语音却无字幕
`preload="metadata"`	只预加载元数据	用 `auto` 预载整段视频，浪费流量

格式选择依据见表 3-2。

媒体类型	首选格式	回退顺序	说明
照片	AVIF	WebP → JPEG	`picture` 按 source 顺序降级
图形与图标	SVG	PNG	矢量不失真，体积小
动图	WebM 或 MP4	GIF	视频格式体积远小于 GIF
音频	Opus / WebM	MP3	兼容性优先时用 MP3

4 验证与讨论

保存文件，用开发者工具打开 Network 面板，筛选 Img，记录实际请求的图片宽度。
切换设备工具栏到窄屏与 3 倍像素比，刷新，确认请求的候选发生变化。
把 sizes 改为 100vw，重复步骤 2，观察选择结果差异。
播放视频，确认封面、字幕与备用下载链接三项正常。

检查项	预期结果	说明
窄屏请求	请求 480w 或 960w 候选	`sizes` 生效
高倍屏请求	提升一档宽度	设备像素比参与换算
格式回退	不支持 AVIF 时请求 WebP	`picture` 顺序
布局稳定	图片加载前后无跳动	宽高预留生效
视频字幕	可开关中文字幕	`track` 生效
无媒体能力回退	显示备用下载链接	`video` 内部文本

讨论与局限。 sizes 描述的是布局宽度，与 CSS 实际宽度不一致时浏览器会选错档；改动布局后需同步调整。另 loading="lazy" 对首屏图片有害，LCP 指标会变差，首屏主图应显式 loading="eager"。

5 常见问题

现象	原因	处理
总是请求最大图	缺少 `sizes`，浏览器按默认宽度计算	补 `sizes` 并与布局一致
图片模糊	候选宽度不足，或 `sizes` 写小	增加大尺寸候选
视频只有黑底	未设置 `poster`	补封面图
字幕不显示	`track` 的地址或 `srclang` 错误	核对 `.vtt` 路径与语言码
首屏加载变慢	首屏图也加了懒加载	首屏图改 `eager`，其余保持 `lazy`

6 结论

序号	结论	依据
1	页面只声明候选，选择权交给浏览器	图 3-1
2	`srcset` 与 `sizes` 必须成对使用	表 3-1
3	格式回退靠 `source` 的声明顺序	表 3-2
4	媒体必须提供失败文本与替代入口	3.2 节代码

参考文献

[1] MDN Web Docs · 响应式图片，https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images（访问于 2026-10-29）
[2] MDN Web Docs · video 元素，https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video（访问于 2026-10-29）