图片与媒体

媒体元素把外部资源接入文档，同时引入加载失败、替代内容、尺寸、版权和带宽等责任。img 的 alt 不是图片标题的替代品；它描述图片在当前内容中的作用，装饰性图片通常使用空的 alt，让辅助技术跳过它。

从图片的内容角色开始

<figure>
  <img src="diagram.png" alt="请求从浏览器到服务器再返回的流程图">
  <figcaption>一次请求的四个主要阶段。</figcaption>
</figure>

<img src="decoration.svg" alt="">

figure 和 figcaption 将媒体与说明绑定起来。图片尺寸属性可以帮助浏览器预留空间，但不能替代 CSS 的响应式约束。对于不同屏幕和像素密度的资源，可以使用 srcset 与 sizes，前提是候选图片确实代表同一内容。

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800"
  height="450"
  alt="海边步道"
>

video 和 audio 需要考虑控件、字幕、替代说明和自动播放策略。媒体文件能加载不等于用户能理解它；字幕和文字替代属于内容契约，不是额外装饰。

变化一个条件观察边界

把有信息的图片改成 alt=""，视觉不变但信息消失；把装饰图改成文件名作为 alt，屏幕阅读器会读出没有意义的内容。删掉 width 和 height 后图片仍可能显示，但布局在加载前缺少尺寸信息，页面更容易发生位移。

运行实验

1. 让一个 img 的 URL 返回 404，观察替代文本是否仍能说明内容。
2. 在网络面板中限制带宽，比较有无 width、height 时布局位移。
3. 改变视口宽度，观察 srcset 选择了哪一个候选资源。
4. 为一段视频加入字幕文件和无媒体替代文本，分别关闭媒体加载验证可用性。

常见错误

• 用图片文件名或“图片”作为所有 alt。
• 把 alt 当作图注或版权说明。
• 只设置 CSS 宽度，不给关键媒体提供比例或尺寸信息。
• 自动播放有声音的媒体，却没有考虑用户偏好和浏览器策略。
• 为了省带宽删掉所有高密度候选，导致内容不可读。

练习

为一张信息图和一张装饰图分别设计 alt，再为一个响应式图片提供至少两个候选尺寸。模拟图片加载失败和窄屏环境，记录替代文本、布局位移和最终选择的资源。

继续阅读

下一篇进入原生交互元素，比较链接、按钮、折叠和对话框的职责：原生交互元素。

查看本节答案