HTML 的 ＜picture＞ 元素

1. 引言

在网页开发中，图片往往占据页面流量的绝大部分。如何在不同的设备、屏幕尺寸和分辨率下，为用户提供最合适的图片，是每个前端开发者都需要面对的问题。传统的 <img> 元素虽然简单，但无法根据设备条件灵活切换图片源。HTML5 引入的 <picture> 元素正是为了解决这一痛点而生。

本文将深入讲解 <picture> 元素的语法结构、工作原理、核心属性、实际应用场景，并对比它与 srcset、sizes 等响应式图片方案的区别，帮助你全面掌握这一现代 Web 开发的重要工具。

2. 为什么需要 picture 元素

2.1 传统 img 元素的局限

传统的 <img> 元素只能指定一个图片源，无论用户使用什么设备，都会加载同一张图片。这带来两个问题：

• 带宽浪费：手机用户被迫下载为桌面大屏设计的高清大图。
• 显示效果差：在 Retina 等高分辨率屏幕上，普通图片会显得模糊。

2.2 响应式图片的三种需求

现代 Web 开发对图片提出了三种核心需求：

2.3 picture 元素的定位

<picture> 元素是一个容器，它本身不显示任何内容，而是通过内部的 <source> 元素为 <img> 元素提供多个候选图片源。浏览器会根据媒体查询、格式支持和设备条件，选择最合适的图片。

3. picture 元素基础语法

3.1 基本结构

<picture> 元素的基本语法如下：

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="示例图片">
</picture>

3.2 元素组成

<picture> 元素由两部分组成：

• 一个或多个 <source> 元素：定义候选图片源及其匹配条件。
• 一个 <img> 元素：作为兜底，当所有 <source> 都不匹配时使用，同时提供 alt 等无障碍属性。

3.3 工作原理

浏览器解析 <picture> 元素时，会按照以下顺序处理：

1. 从上到下遍历所有 <source> 元素。
2. 检查每个 <source> 的 media 属性和 type 属性是否匹配当前设备条件。
3. 选择第一个匹配的 <source> 作为图片源。
4. 如果没有任何 <source> 匹配，则使用 <img> 元素的 src 属性。

4. source 元素核心属性

4.1 media 属性：媒体查询

media 属性接受一个 CSS 媒体查询，用于根据视口宽度、屏幕方向等条件选择图片：

<picture>
  <source media="(min-width: 1200px)" srcset="desktop.jpg">
  <source media="(min-width: 768px)" srcset="tablet.jpg">
  <img src="mobile.jpg" alt="响应式示例">
</picture>

4.2 srcset 属性：候选图片列表

srcset 属性可以指定多个候选图片及其条件，支持宽度描述符（w）和像素密度描述符（x）：

<picture>
  <source media="(min-width: 800px)" srcset="large-1x.jpg 1x, large-2x.jpg 2x">
  <img src="small.jpg" alt="密度切换示例">
</picture>

4.3 type 属性：格式切换

type 属性指定图片的 MIME 类型。浏览器会跳过不支持的类型，选择第一个支持的类型：

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="格式切换示例">
</picture>

4.4 sizes 属性：图片显示宽度

sizes 属性配合 srcset 使用，告诉浏览器图片在不同视口下的显示宽度，帮助浏览器提前决定加载哪张图片：

<picture>
  <source
    media="(min-width: 800px)"
    srcset="large-400.jpg 400w, large-800.jpg 800w"
    sizes="(min-width: 1200px) 800px, 400px">
  <img src="small.jpg" alt="sizes 示例">
</picture>

5. 实际应用场景

5.1 响应式尺寸切换

根据屏幕宽度加载不同尺寸的图片，避免手机用户下载大图：

<picture>
  <source media="(min-width: 1024px)" srcset="banner-desktop.jpg">
  <source media="(min-width: 640px)" srcset="banner-tablet.jpg">
  <img src="banner-mobile.jpg" alt="网站横幅">
</picture>

5.2 现代格式降级

优先使用 WebP/AVIF 等现代格式，在不支持的浏览器中回退到 JPEG/PNG：

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="产品照片">
</picture>

5.3 艺术指导（Art Direction）

在不同屏幕尺寸下展示不同的图片构图，例如桌面端显示全景图，移动端显示裁剪后的特写：

<picture>
  <source media="(min-width: 768px)" srcset="full-view.jpg">
  <img src="cropped-view.jpg" alt="艺术指导示例">
</picture>

5.4 结合像素密度

为 Retina 屏幕提供 2x 高清图，普通屏幕使用 1x 图：

<picture>
  <source
    media="(min-width: 768px)"
    srcset="hero-1x.jpg 1x, hero-2x.jpg 2x">
  <img src="hero-mobile.jpg" alt="高清屏适配">
</picture>

5.5 组合使用多种策略

将媒体查询、格式切换和像素密度结合，实现最全面的适配：

<picture>
  <source
    type="image/avif"
    media="(min-width: 768px)"
    srcset="hero-avif-1x.avif 1x, hero-avif-2x.avif 2x">
  <source
    type="image/webp"
    media="(min-width: 768px)"
    srcset="hero-webp-1x.webp 1x, hero-webp-2x.webp 2x">
  <source
    type="image/avif"
    srcset="hero-mobile-avif.avif">
  <img src="hero-fallback.jpg" alt="综合适配示例">
</picture>

6. picture 与 srcset 的对比

6.1 两者的定位不同

srcset 和 <picture> 解决的是不同层面的问题：

6.2 如何选择

• 只需要根据屏幕密度切换清晰度 → 使用 srcset。
• 需要根据视口宽度切换图片尺寸 → 使用 srcset + sizes。
• 需要切换图片格式或进行艺术指导 → 使用 <picture>。

6.3 两者可以结合使用

<picture> 内部的 <source> 和 <img> 都可以使用 srcset，两者并不冲突：

<picture>
  <source type="image/webp" srcset="image-1x.webp 1x, image-2x.webp 2x">
  <img src="image-1x.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x" alt="结合使用">
</picture>

7. 注意事项与最佳实践

7.1 img 元素必须存在

<picture> 元素中必须包含一个 <img> 元素，它承担两个职责：

• 作为所有 <source> 都不匹配时的兜底。
• 提供 alt 文本、宽度、高度等属性，保证无障碍访问。

7.2 保持 alt 文本一致

<picture> 中所有候选图片的内容应该是相同的，只是格式、尺寸或构图不同，因此 alt 文本只需在 <img> 上写一次。

7.3 指定图片尺寸避免布局偏移

为 <img> 设置 width 和 height 属性，或使用 CSS aspect-ratio，可以避免图片加载过程中的布局偏移（CLS）：

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <img src="small.jpg" alt="示例" width="400" height="300">
</picture>

7.4 不要滥用 picture

如果只是需要分辨率切换，优先使用 srcset，它更简洁、性能更好。<picture> 适用于确实需要媒体查询或格式切换的场景。

7.5 浏览器兼容性

<picture> 元素在现代浏览器中已得到广泛支持，包括 Chrome、Firefox、Safari、Edge 等。对于极老旧的浏览器，<img> 元素会作为兜底正常显示。

8. 总结

<picture> 元素是响应式图片方案中的重要工具，它让开发者能够根据设备条件灵活地选择图片源，兼顾性能与显示效果。

掌握要点：

• <picture> 是容器，通过 <source> 提供候选图片，<img> 作为兜底。
• media 属性使用 CSS 媒体查询匹配设备条件。
• type 属性实现现代图片格式的优雅降级。
• srcset 和 sizes 用于分辨率和尺寸切换。
• 简单场景优先使用 srcset，复杂场景使用 <picture>。
• 始终保留 <img> 元素，保证无障碍和兼容性。

希望本文能帮助你更好地运用 <picture> 元素，打造高性能、体验佳的响应式网页。如果你有更多关于 HTML 或前端性能优化的问题，欢迎在评论区交流讨论。