Images-and-Multimedia-HTML-Elements

HTML 图像多媒体 srcset 响应式图片

字数统计: 4.1k阅读时长: 16 min

 2026/04/15 

第6课：图像与多媒体

网页内容早已从纯文本进化到富媒体时代。图像让页面生动，音视频带来沉浸式体验。然而，不恰当的使用方式会导致页面加载缓慢、移动流量浪费以及可访问性缺失。本节课将系统讲解 HTML 中图像与多媒体标签的正确用法，包括响应式图片的现代解决方案 <picture> 和 srcset、语义化配图标签 <figure>，以及原生音视频标签 <audio> 和 <video> 的完整控制能力。

1. `<img>` 图像标签基础

<img> 是一个空元素（自闭合），用于将图像嵌入文档。

1	<img src="images/photo.jpg" alt="一只金毛犬在草地上奔跑">

1.1 必备属性：`src` 与 `alt`

属性	是否必须	作用
`src`	必须	指定图像资源的 URL。可以是绝对路径、相对路径或 Data URL。
`alt`	必须	提供图像的替代文本。当图像无法加载、用户使用屏幕阅读器、或网络极慢时，`alt` 的内容会被呈现。

alt 的写法指南：

<!-- ✅ 描述图像内容，而非“一张图片” -->
<img src="chart.png" alt="2026 年第一季度销售额柱状图，显示云计算业务增长 35%">

<!-- ✅ 纯装饰性图片：留空 alt（不要省略属性） -->
<img src="decorative-line.png" alt="">

<!-- ❌ 错误：省略 alt 属性 -->
<img src="decorative-line.png">

<!-- ❌ 错误：无意义文本 -->
<img src="logo.png" alt="logo">

为什么装饰性图片需要 alt=""？
屏幕阅读器遇到 alt="" 时会完全跳过该图片，不读出任何内容。若完全省略 alt 属性，部分阅读器会尝试读出文件名（如“slash images slash logo dot png”），造成噪音。

1.2 宽度与高度属性：防止布局偏移

为 <img> 同时指定 width 和 height 属性（以像素为单位，不带单位）可让浏览器在图片加载前预留空间，避免加载后因图片撑开页面而导致内容突然跳动（Cumulative Layout Shift，CLS），显著提升用户体验与 Core Web Vitals 评分。

1 2	<!-- 已知原始图片尺寸为 800x600 --> <img src="photo.jpg" alt="风景照片" width="800" height="600">

配合 CSS max-width: 100%; height: auto; 即可实现响应式缩放，同时保留预留空间的宽高比。

img {
  max-width: 100%;
  height: auto;
}

1.3 懒加载：`loading="lazy"`

原生懒加载属性延迟加载视口外的图片，节省带宽并加速首屏渲染。

1	<img src="below-fold-image.jpg" alt="折叠线下的内容" loading="lazy">

`loading` 值	行为
`eager`	默认值。立即加载图片，无论是否在视口内。
`lazy`	延迟加载，直到图片即将进入视口（距视口一定距离时开始加载）。

注意：首屏关键图片（如 LCP 元素）应避免使用 loading="lazy"，否则会延迟渲染，损害性能指标。

2. 响应式图片：`srcset` 与 `sizes`

在不同屏幕尺寸和像素密度下提供最合适的图片资源，是移动端性能优化的核心。

2.1 基于像素密度的切换：`srcset` + `x` 描述符

用于为高分屏（Retina 屏）提供高分辨率图片。

1
2
3

<img src="image-1x.jpg"
     srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
     alt="响应式图片示例">

src 作为回退，用于不支持 srcset 的老浏览器。
srcset 列出候选资源及其像素密度描述符（1x、2x、3x）。浏览器根据设备像素比（devicePixelRatio）自动选择最合适的图片。

2.2 基于视口宽度的切换：`srcset` + `w` 描述符 + `sizes`

w 描述符告知浏览器每张图片的固有宽度（以像素为单位）。配合 sizes 属性，浏览器可精确计算不同视口下图片的实际显示尺寸，从而下载最优资源。

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="根据视口宽度切换的图片">

sizes 解析：

当视口宽度 ≤ 600px 时，图片占据视口宽度的 100%（100vw）。
当视口宽度在 601px 至 1200px 之间时，图片占据 50% 视口宽度。
当视口宽度 > 1200px 时，图片占据 33% 视口宽度。

浏览器计算逻辑：所需像素 = 显示宽度 × 设备像素比，然后从 srcset 中选择大于等于该值且最接近的 w 资源。

2.3 艺术指导（Art Direction）：`<picture>` 元素

当不同屏幕尺寸下需要完全不同的图片构图（而非同一图片的不同分辨率），例如桌面显示宽幅全景图，移动端显示正方形特写，应使用 <picture>。

<picture>
  <!-- 移动端：横屏时使用裁剪后的图片 -->
  <source media="(max-width: 640px) and (orientation: portrait)" srcset="portrait-crop.jpg">
  <source media="(max-width: 640px) and (orientation: landscape)" srcset="landscape-crop.jpg">
  <!-- 桌面端：默认宽幅图片 -->
  <source media="(min-width: 641px)" srcset="wide-image.jpg">
  <!-- 回退 -->
  <img src="fallback.jpg" alt="根据屏幕尺寸和方向切换构图">
</picture>

执行规则：浏览器按 <source> 顺序评估 media 条件，第一个匹配的 <source> 被采用，其后的将被忽略。内部的 <img> 是必须的回退元素。

2.4 现代格式回退：`<picture>` + `type` 属性

利用 <source> 的 type 属性提供 WebP 或 AVIF 等现代格式，同时为不支持的浏览器回退到 JPEG/PNG。

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="支持现代格式时优先加载 AVIF/WebP">
</picture>

3. 语义化配图：`<figure>` 与 `<figcaption>`

当图片与一段说明文字紧密关联时，应使用 <figure> 将其组合为一个独立单元。

<figure>
  <img src="architecture-diagram.png" alt="现代前端工程化架构图">
  <figcaption>图 1：基于 Vite 的现代前端工程化架构示意</figcaption>
</figure>

3.1 适用内容类型

<figure> 不仅限于包裹图片，还可用于：

代码块
引用
数据表格
插图 / 图表
SVG 内容

3.2 语义价值

独立于主文档流：<figure> 的内容可以被整体移除或移动到附录，而不影响正文含义。
辅助工具关联：屏幕阅读器会明确将 <figcaption> 与其包含的内容关联起来，读作“图 1：架构示意”。

4. 音频：`<audio>` 元素

<audio> 提供原生的音频播放能力，无需 Flash 或第三方插件。

1
2
3

<audio controls src="podcast.mp3">
  您的浏览器不支持 audio 元素。
</audio>

4.1 核心属性

属性	类型	作用
`controls`	布尔属性	显示浏览器默认的播放控件（播放/暂停、进度条、音量）。
`autoplay`	布尔属性	页面加载后自动播放。多数浏览器会阻止未经用户交互的自动播放。
`loop`	布尔属性	循环播放。
`muted`	布尔属性	静音播放。配合 `autoplay` 可绕过浏览器的自动播放限制。
`preload`	枚举	预加载策略：`none`（不预加载）、`metadata`（仅元数据）、`auto`（允许浏览器预加载整个文件）。

4.2 多格式回退

不同浏览器支持的音频格式不同（如 MP3、OGG、WAV）。使用多个 <source> 可确保兼容性。

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

5. 视频：`<video>` 元素

<video> 将视频直接嵌入页面，具备完整的播放控制接口。

<video controls width="800" poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
  您的浏览器不支持 video 元素。
</video>

5.1 核心属性

属性	作用
`controls`	显示浏览器原生控件。
`poster`	视频加载前或未播放时显示的海报帧图片 URL。
`width` / `height`	设置视频显示尺寸（像素）。建议配合 CSS `max-width: 100%` 实现响应式。
`autoplay`	自动播放（通常需配合 `muted`）。
`loop`	循环播放。
`muted`	静音。
`preload`	预加载策略，同 `<audio>`。
`playsinline`	移动端关键属性。强制视频在网页内播放，而非自动全屏。

5.2 字幕与轨道：`<track>` 元素

<track> 用于为视频添加字幕、章节、描述、元数据。文件格式通常为 WebVTT（.vtt）。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="简体中文" default>
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

`kind` 值	用途
`subtitles`	对话翻译或转录，显示在视频上。
`captions`	听障辅助字幕，包含环境音描述（如 `[掌声]`）。
`descriptions`	视频画面的文字描述，供盲人用户通过屏幕阅读器获取。
`chapters`	章节导航点。
`metadata`	供脚本使用的元数据，不显示给用户。

6. 现代图像格式与性能考量

6.1 格式对比与选择

格式	压缩类型	透明度支持	动画支持	浏览器兼容性	适用场景
JPEG	有损	❌	❌	所有浏览器	照片、复杂色彩渐变
PNG	无损	✅（Alpha）	❌	所有浏览器	Logo、图标、透明背景图
GIF	有损	✅（1 位）	✅	所有浏览器	简单动画（已被视频替代）
WebP	有损/无损	✅	✅	现代浏览器（Chrome、Firefox、Edge、Safari 14+）	通用推荐，体积比 JPEG/PNG 小 25-35%
AVIF	有损/无损	✅	✅	Chrome 85+、Firefox 93+、Safari 16+	最佳压缩效率，但编码较慢
SVG	矢量	✅	✅（CSS/SMIL）	所有浏览器	图标、图形、需要缩放的图形

6.2 最佳实践总结

优先使用现代格式：通过 <picture> 提供 AVIF/WebP 回退。
**为所有图片设置 width / height**：防止 CLS。
**非首屏图片使用 loading="lazy"**。
alt 永远不能省略，装饰性图片使用 alt=""。
**视频务必添加 playsinline**，优化移动端体验。
**为音视频提供多个 <source>**，确保跨浏览器兼容。

课后练习

一、概念自测（选择题 / 填空题）

（单选） 以下关于 alt 属性的描述，哪一项是正确的？
A. 对于纯装饰性图片，可以省略 alt 属性。
B. alt 属性的内容会在图片正常显示时作为提示框出现。
C. 屏幕阅读器遇到 alt="" 时会完全跳过该图片。
D. alt 属性是可选属性，没有也不影响可访问性。
（单选） 要为一组图片提供 AVIF 格式优先、WebP 次之、JPEG 回退的兼容方案，应使用：
A. <img srcset="...">
B. <picture> 配合多个 <source>
C. <figure> 配合 <figcaption>
D. <video> 元素
（填空） 移动端视频若想在网页内播放而不自动全屏，必须添加 ______ 属性。
（多选） 以下哪些措施可以有效减少累积布局偏移（CLS）？
A. 为 <img> 设置 width 和 height 属性。
B. 为所有图片添加 loading="lazy"。
C. 使用 CSS aspect-ratio 为动态加载内容预留空间。
D. 将首屏关键图片的 loading 设为 eager。

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要为一个摄影作品集网站的首页实现一个响应式 Hero 横幅。要求如下：

桌面端（宽度 ≥ 1024px）显示宽幅横构图图片 hero-desktop.jpg。
平板端（宽度在 640px 至 1023px 之间）显示中等尺寸 hero-tablet.jpg。
移动端（宽度 < 640px）显示方形特写 hero-mobile.jpg。
同时支持现代格式：为每个尺寸提供 WebP 和 AVIF 版本作为优先选项。
图片必须包含有意义的替代文本，且使用 loading="eager" 确保首屏快速加载。
需为图片预留尺寸防止布局偏移（假设图片宽高比为桌面 21:9，平板 4:3，移动 1:1）。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 <picture> 完整代码。提示词中应明确指定不同断点的媒体查询、多格式回退以及防止 CLS 的措施。

三、面试真题与参考答案

题目（腾讯前端面试题）：

详细解释 <img> 标签的 srcset 与 sizes 属性的工作原理。当视口宽度为 800px、设备像素比为 2 的屏幕上，以下代码最终会选择哪一张图片？请写出计算过程。
1
2
3
4
<img src="small.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="示例图片">

参考答案：

1. 工作原理：

srcset 定义了一组候选图片资源及其固有宽度（w 描述符）。
sizes 定义了一组媒体条件，告诉浏览器在不同视口宽度下，图片在布局中实际占据的 CSS 宽度。
浏览器计算流程：
1. 根据当前视口宽度匹配 sizes 条件，确定图片的显示宽度（以 vw 或绝对单位表示）。
2. 将显示宽度转换为像素值：显示宽度(px) = 视口宽度 × 匹配的百分比。
3. 将像素值乘以设备像素比（DPR），得到所需像素密度宽度：所需宽度 = 显示宽度(px) × DPR。
4. 从 srcset 中选择大于等于 所需宽度 且最接近的 w 资源。若无更大资源，则选择最大的那个。

2. 本题计算过程：

视口宽度：800px
**匹配 sizes**：800px > 600px，因此适用 50vw（视口宽度的 50%）。
显示宽度：800px × 50% = 400px
设备像素比：2
所需像素宽度：400px × 2 = 800px
资源选择：srcset 中 medium.jpg 为 800w，恰好等于所需宽度，因此浏览器会选择 medium.jpg。

延伸追问：如果没有 800w 资源，只有 400w 和 1600w，会选择哪一个？

答案：会选择 1600w，因为浏览器会选择大于等于所需宽度的最小资源。若所需宽度超过所有候选，则选最大资源；若所需宽度小于最小候选，则选最小资源。

课后练习答案

一、概念自测答案

C
- 解析：alt="" 使屏幕阅读器跳过图片，适用于纯装饰性图片。A 错，装饰性图片不可省略 alt 属性本身；B 错，提示框应使用 title 属性；D 错，alt 是必须属性。
B
- 解析：<picture> 配合 <source type="..."> 可实现基于格式的渐进增强。
playsinline
- 解析：playsinline 阻止移动端视频自动全屏播放。
A、C、D
- 解析：A 预留图片空间；C 使用 aspect-ratio 预留任意元素空间；D 首屏图片不应懒加载，应设为 eager 确保立即渲染。B 错误，因为懒加载会延迟图片加载，若图片加载前未预留空间，仍会导致 CLS。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请为我生成一个响应式 Hero 横幅的 HTML 代码，使用 <picture> 元素。要求：

桌面端（≥1024px）使用宽幅图片 hero-desktop，宽高比 21:9。

平板端（640px ~ 1023px）使用 hero-tablet，宽高比 4:3。

移动端（< 640px）使用 hero-mobile，宽高比 1:1。

对于每个尺寸，需优先提供 AVIF 格式（type="image/avif"），其次 WebP（type="image/webp"），最后回退到 JPG。

内部的 <img> 需设置 alt="摄影作品集 Hero 横幅"、width 和 height 属性以匹配宽高比（给出具体数值）、loading="eager"。

需添加 CSS 规则 img { max-width: 100%; height: auto; } 在 <style> 中。

请输出完整可直接运行的 HTML 片段。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/04/15/Images-and-Multimedia-HTML-Elements/

发表日期：April 15th 2026, 10:00:00 am

更新日期：April 14th 2026, 6:10:56 pm

Next Post

HTML-Forms-Elements-Part1
Previous Post

Lists-and-Tables-Structure-and-Semantics

CATALOG

1. 第6课：图像与多媒体