HTML Picture 元素的工作原理

<picture> 元素是一个容器，包裹一个或多个 <source> 元素和一个 <img> 回退。浏览器从上到下依次评估每个 <source>，选取第一个能支持的并加载对应图片。如果没有匹配的 <source>，就回退到 <img>——这保证了图片一定会显示。这个简单的机制让你能够根据格式支持、屏幕宽度或像素密度，精确控制浏览器加载哪张图片。

最基本的语法结构如下：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="图片描述">
</picture>

浏览器从上到下读取：先检查是否支持 WebP，支持就加载 WebP 版本；不支持就检查 AVIF；都不支持就加载 JPG。这种自上而下的优先级模型是理解 <picture> 的关键——它不是在抽象地提供"最好的"格式，而是在你的优先级链中提供第一个兼容的格式。

Picture 元素的实战应用

虽然格式回退是最广为人知的用法，但 <picture> 实际上解决了现代网页性能核心的三个不同问题，每个问题对应图片优化的不同维度。

现代格式回退：WebP 和 AVIF 的自动降级

<picture> 最常见的用法是为现代浏览器提供新一代格式（WebP、AVIF），同时为旧浏览器优雅降级到 JPG 或 PNG。截至 2026 年，WebP 拥有 97% 以上的浏览器支持，AVIF 在 Chrome、Firefox 和 Safari 16+ 中得到支持。一个生产级别的格式回退栈如下：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="风景照" width="1200" height="800">
</picture>

这种模式为每个浏览器提供最小的文件：Chrome 和 Firefox 用户获得 AVIF（比 JPG 小 30–50%），Safari 14+ 用户获得 WebP（小 25–35%），其余不到 3% 的旧浏览器获得 JPG。性能收益会迅速累积——一张 500KB 的 JPG 变成约 300KB 的 WebP 和约 200KB 的 AVIF，每个页面浏览可能节省数百 KB。开发者可以使用 Image Toolbox 网页优化器一键生成所有三种格式变体及完整的 <picture> 代码——无需手动编码或编写标记。

艺术指导：不同屏幕不同构图

用 <picture> 实现艺术指导能解决 srcset 无法触及的问题：根据屏幕尺寸提供完全不同的图片构图。<source> 元素上的 media 属性让你定义图片变化的断点。当宽幅横向裁剪在桌面端效果很好、但在手机上变成无法辨认的窄条时，这至关重要：

<picture>
  <source media="(min-width: 768px)" srcset="hero-desktop.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="hero-desktop.jpg">
  <source srcset="hero-mobile.webp" type="image/webp">
  <img src="hero-mobile.jpg" alt="主视觉横幅" width="800" height="600">
</picture>

在视口宽度 768px 及以上时，浏览器加载桌面端裁剪（宽幅、横向）；低于此宽度时，加载移动端裁剪（竖幅、紧凑取景）。这种用法广泛用于电商产品主图、新闻网站文章头图和带有文字叠加的落地页横幅。核心要点：艺术指导关乎构图而非分辨率。移动端图片不只是更小——它是一张完全不同的图片，取景更紧凑、文字更大，才能在小屏幕上保持可读。

Retina 和高 DPI 屏幕的分辨率切换

对于高像素密度屏幕（Apple Retina、4K 显示器、现代手机），你可以将 <picture> 与描述符语法结合使用，在提供清晰图片的同时不浪费标准屏幕的带宽：

<picture>
  <source srcset="product@1x.webp 1x, product@2x.webp 2x, product@3x.webp 3x" type="image/webp">
  <img src="product@1x.jpg" alt="产品照片" width="600" height="600">
</picture>

浏览器根据设备的像素比自动选择合适的分辨率变体：标准屏幕用 1x，Retina 用 2x，最新旗舰手机用 3x。这确保每位用户看到清晰的图片，同时避免向所有用户提供 3x 图片带来的带宽浪费。结合懒加载（loading="lazy"）和异步解码（decoding="async"），这种模式能消除导致最大内容绘制（LCP）得分不佳的最常见原因。

Picture vs img srcset：如何正确选择

很多开发者混淆了 <picture> 和 <img srcset>，但它们服务于根本不同的目的。理解这种区别对性能工程至关重要。

特性<picture><img srcset>
主要用途格式切换、艺术指导分辨率切换
浏览器选择使用第一个匹配的 <source>浏览器选择最佳分辨率
格式控制通过 type 属性完全控制无法控制格式
艺术指导支持，通过 media 属性不支持，同一图片不同尺寸
最佳场景格式回退、不同裁剪同一图片、不同密度

黄金法则：当你想用不同分辨率显示同一图片时使用 <img srcset>——浏览器足够聪明，能选择合适的密度。当图片本身需要改变时使用 <picture>——不同格式、不同宽高比或不同构图。最稳健的方案是嵌套使用：<picture> 处理格式和艺术指导，<source> 上的 srcset 处理每个格式内的分辨率变体。这是每个主流 CDN 和图片优化服务使用的生产模式。

参考来源