[!info] related notes

• 所属：表单与媒体 · 文档与语义
• 相关：src 与 href · SVG · 可访问性

HTML 图片与媒体

这个概念为什么出现

仓储门户的商品图、操作演示视频、异常告警截图，既影响理解也影响性能与无障碍。错误 alt、巨大原图、无字幕视频会同时伤害三类用户：读屏、慢网、听障。

[!abstract] 一句话理解 媒体元素首先是信息等价问题，其次才是加载性能问题。

最小可运行示例

场景：SKU 详情的主图与装饰分割线

<!-- 首屏主图：提供有信息的 alt；不加 lazy，避免延迟关键图片 -->
<img
  src="/images/sku-42.jpg"
  alt="SKU-42 蓝色纸箱正面，标签朝上"
  width="640"
  height="640"
  decoding="async"
/>

<!-- 装饰图：空 alt，避免读屏噪音 -->
<img src="/images/divider.svg" alt="" width="120" height="8" />

<figure>
  <video controls preload="metadata" poster="/images/inbound-poster.jpg">
    <source src="/videos/inbound-demo.mp4" type="video/mp4" />
    <track kind="captions" src="/captions/inbound-zh.vtt" srclang="zh-CN" label="简体中文" default />
    你的浏览器不支持 video。
  </video>
  <p><a href="/manuals/inbound.html">阅读操作步骤与视频文字稿</a></p>
  <figcaption>入库扫码枪操作 30 秒演示</figcaption>
</figure>

示例中的图片、视频、字幕与文字稿路径需配套真实资源。video 内的回退文字仅供不支持该元素的浏览器使用，不能替代字幕；重要操作文字放在元素外，所有用户都能访问。

结合场景关注点

1. 内容图 vs 装饰图的 alt 策略不同。
2. 宽高有助于减少布局偏移。
3. loading=lazy 适合非首屏；LCP 主图通常不要懒加载。

核心模型

元素	用途	关键点
img	图片（也可能是动画格式）	alt/尺寸/解码
picture/source	艺术指导/格式切换	保留 img 作为实际图像与回退，并在 img 上写 alt
video/audio	时序媒体	controls、字幕轨、自动播放限制
svg	矢量/图标	见 SVG 笔记

边界

• 自动播放受浏览器策略限制（尤其音视频带声）。
• CSS background 图对内容信息不友好，重要信息不要只放背景。
• 复杂信息图需要长描述（adjacent text / 链接）。
• 若关键动作只在画面中出现，字幕未必覆盖这些视觉信息，还需文字步骤或音频描述。\

常见误区

[!warning] 常见误区：alt=“图片” / alt=“image1” 没有信息增量。要么描述内容，要么装饰用空 alt。

工程实践

• 设计交付包含替代文本，不只是切图。
• 建立图片 CDN 与尺寸规范。
• 视频提供字幕文件（track kind=captions）。

本节总结

媒体是内容，不是装饰默认项。alt、尺寸、加载策略与字幕共同构成专业度。

自测题

1. 什么时候 alt 应为空字符串？
2. 为什么 LCP 主图很少 lazy？

参考答案

1. 纯装饰、不传达额外信息时。
2. 懒加载可能延迟首屏关键图片请求，伤害最大内容绘制。

延伸阅读

资料	类型	支撑内容
MDN img	文档	alt 与属性
Responsive images	文档	picture/srcset