[!info] 关联笔记

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

HTML 图片与媒体

这个概念为什么出现

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

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

最小可运行示例

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

<!-- 内容图：必须有能传达信息的 alt -->
<img
  src="/images/sku-42.jpg"
  alt="SKU-42 蓝色纸箱正面，标签朝上"
  width="640"
  height="640"
  loading="lazy"
  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" />
    <!-- 教学点：无障碍文本轨/外链说明应提供 -->
    你的浏览器不支持 video，请下载操作手册。
  </video>
  <figcaption>入库扫码枪操作 30 秒演示</figcaption>
</figure>

结合场景关注点

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

核心模型

元素	用途	关键点
img	静态图	alt/尺寸/解码
picture/source	艺术指导/格式切换	不同裁剪与 webp/avif
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