掌握HTML5 <picture> 元素：解锁高性能响应式图片的终极指南
在多设备、多分辨率、多网络环境的今天，如何高效、优雅地交付图片，已成为前端性能优化与用户体验提升的关键。HTML5 引入的 ＜picture＞ 元素，正是为弥补传统 ＜img＞ 在响应式图片处理上的不足而设计。它让开发者能够精细控制图片资源的加载，实现性能与视觉的完美平衡。
＜picture＞ 是一个容器元素，内部包含零个或多个 ＜source＞ 子元素和一个必需的 ＜img＞ 元素。浏览器会根据屏幕尺寸、设备像素比、支持的图片格式等条件，从 ＜source＞ 中选择最合适的资源进行加载，而 ＜img＞ 则作为最终回退，确保在不支持 ＜picture＞ 的旧浏览器中也能正常显示图片。
＜picture＞ ＜!-- 大屏幕（桌面） --＞ ＜source media="(min-width: 1200px)" srcset="https://picsum.photos/1200/600"＞ ＜!-- 中等屏幕（平板） --＞ ＜source media="(min-width: 768px)" srcset="https://picsum.photos/800/400"＞ ＜!-- 小屏幕（手机） --＞ ＜img src="https://picsum.photos/400/200" alt="响应式图片示例" loading="lazy"＞＜/picture＞
根据屏幕尺寸加载不同分辨率的图片，避免小屏设备浪费带宽。
为大屏或高分辨率屏幕提供高清图片，保证显示质量。
现代图片格式（如 WebP、AVIF）压缩率更高，但部分浏览器尚未支持。＜picture＞ 可以按优先级列出多种格式，浏览器自动选择第一个支持的格式，不支持的场景无缝回退。
＜picture＞ ＜!-- 优先使用AVIF格式 --＞ ＜source type="image/avif" srcset="https://picsum.photos/800/400"＞ ＜!-- 其次使用WebP格式 --＞ ＜source type="image/webp" srcset="https://picsum.photos/800/400"＞ ＜!-- 最后使用JPEG格式 --＞ ＜img src="https://picsum.photos/800/400" alt="格式优化示例" loading="lazy"＞＜/picture＞
针对不同屏幕尺寸或设备方向，展示不同构图或裁剪版本的图片。例如移动端显示人物特写，桌面端显示完整场景。
＜picture＞ ＜!-- 桌面端显示横版图片 --＞ ＜source media="(min-width: 768px)" srcset="https://picsum.photos/800/400"＞ ＜!-- 移动端显示竖版图片 --＞ ＜source media="(max-width: 767px)" srcset="https://picsum.photos/400/600"＞ ＜img src="https://picsum.photos/400/200" alt="艺术指导示例" loading="lazy"＞＜/picture＞
“艺术指导”在 Web 图片中，指的是：
根据设备的屏幕尺寸、方向或其他特性，有选择地展示同一主题下不同构图、不同焦点、不同裁剪方式的图片版本，以达到最佳的视觉传达效果。
它强调的是“对图片内容本身进行差异化设计”，而不仅仅是技术上的分辨率适配。理解了这一点，你就会明白为什么这个术语既准确又形象。
属性 | 作用 | 使用场景 |
srcset | 定义一组图片资源，浏览器根据条件选择最合适的 | 响应式图片、高 DPI 适配 |
media | 媒体查询条件，决定何时使用该媒体查询条件，决定何时使用该 ＜source＞ | 艺术指导、不同屏幕尺寸 |
type | 指定 MIME 类型，用于格式能力检测 | 现代图片格式降级 |
sizes | 定义不同视口下图片的显示宽度，辅助 srcset 选择 | 配合宽度描述符（w）使用 |
作为所有 ＜source＞ 均不匹配时的最终回退。
必须包含 alt 属性，保证无障碍访问。
可附加 loading="lazy"、decoding="async" 等性能优化属性。
srcset 和 sizes 是 ＜img＞ 或 ＜source＞ 中实现响应式图片的重要机制，常与 ＜picture＞ 搭配使用。
srcset 中使用 w 表示图片的原始宽度（像素），配合 sizes 让浏览器根据视口宽度选择合适的图片。
＜!-- 同一张图片的不同宽度版本 (picsum 同一ID不同尺寸) --＞ ＜img src="https://picsum.photos/id/100/800/500" srcset="https://picsum.photos/id/100/400/250 400w, https://picsum.photos/id/100/800/500 800w, https://picsum.photos/id/100/1200/750 1200w, https://picsum.photos/id/100/1600/1000 1600w" sizes="(max-width: 600px) 100vw, (max-width: 1000px) 80vw, 1200px" alt="山谷河流风景，根据视口宽度自动选择合适分辨率" loading="lazy" style="width:100%; height:auto;"＞
sizes 含义：视口 ≤600px 时图片占 100% 宽度；601–1000px 时占 80% 宽度；＞ 1000px 时，占 1200px宽度。
浏览器会结合当前视口宽度与 sizes 计算出图片所需实际宽度，再从 srcset 中选择最合适的图片源。
用于适配不同 DPI 屏幕（如 Retina 屏），浏览器根据设备像素比选择对应倍率的图片。
＜picture＞ ＜source srcset="https://picsum.photos/400/200 1x, https://picsum.photos/800/400 2x, https://picsum.photos/1200/600 3x"＞ ＜img src="https://picsum.photos/400/200" srcset="https://picsum.photos/400/200 1x, https://picsum.photos/800/400 2x" alt="高DPI优化示例"＞＜/picture＞
注意：w 和 x 描述符不能混用，需根据场景选择一种。
src：指定单一资源，适用于简单的格式降级场景。
srcset：指定一组资源，浏览器根据条件自动选择最优，更适合响应式场景。
＜!-- 使用 src：单一格式降级 --＞＜source src="image.webp" type="image/webp"＞＜!-- 使用 srcset：多分辨率响应式 --＞＜source srcset="small.jpg 480w, large.jpg 1200w" sizes="100vw"＞
特性 | ＜picture＞ | ＜img＞ + srcset |
艺术指导（不同构图） | ✅ 支持 | ❌ 不支持 |
多格式选择（WebP/AVIF） | ✅ 支持 | ❌ 仅单一格式 |
媒体查询 | ✅ 完整支持 | ❌ 有限（仅通过 sizes 间接影响） |
语法复杂度 | 较高 | 较低 |
适用场景 | 杂响应式、格式优化、艺术指导 | 简单分辨率适配、高 DPI 适配 |
始终提供有意义的 alt 属性
确保屏幕阅读器用户能理解图片内容，装饰性图片可使用空 alt。
2. 合理设置 sizes 属性
当使用宽度描述符（w）时，sizes 能显著提升浏览器选择图片资源的效率，避免“猜测”。
结合懒加载与解码优化
在 ＜img＞ 上使用 loading="lazy" 延迟加载视口外图片，decoding="async" 避免解码阻塞主线程。
多格式图片自动化生成
通过构建工具（如 ImageMagick、sharp）生成多种尺寸和多种格式（AVIF、WebP、JPEG）的图片变体。
测试回退机制
在旧版浏览器（如 IE11）中验证 ＜img＞ 是否正常显示，必要时引入 Picturefill 等 polyfill。
＜picture＞在现代浏览器中支持良好：
对于不支持的浏览器，会忽略 ＜picture＞ 和 ＜source＞，直接渲染 ＜img＞，因此只要提供了有效的 ＜img＞ 回退，即可保证基本功能。
建议访问 Can I Use 网站，以及时了解 picture 属性在各类浏览器中的最新兼容性支持情况。
＜picture＞元素将“资源选择”与“资源渲染”分离，使图片交付真正做到“因地制宜”。它不仅能根据屏幕尺寸、设备像素比选择最合适的图片，还能实现多格式优雅降级与艺术指导，是现代 Web 图片优化的核心工具。
在实际开发中，建议结合 srcset、sizes、media、type 等属性，根据内容类型与设备特征综合运用。掌握 ＜picture＞，意味着你已掌握了高性能、高兼容性、高用户体验的图片交付方案。
阅读原文：原文链接
