HTML5 的响应式图片是前端性能优化的核心能力之一，允许浏览器在不同设备条件下加载合适分辨率的图片，以提升加载速度与视觉体验。本文围绕 picture、source、srcset 的区别与用法展开，帮助你理解如何按媒体条件选择合适的图片资源。
通过对设备像素比、视口宽度以及网络条件的综合考量，响应式图片能够在保持清晰度的同时控制资源大小。这一能力在现代网页设计中极为重要，尤其在需要展示高质量横幅、图集和产品图片的场景。
1. 基本概念与场景
在 Web 开发中，响应式图片的核心在于根据设备条件动态选择图片资源，减少初次下载量，提升首屏加载速度，同时确保在高分辨率设备上呈现清晰图片。核心技术栈包括 picture、source、srcset，以及对媒体查询的支持。
常见的使用场景包括移动端的封面图片、文章插图的自适应清晰度以及产品列表中的图像。通过合适的结构，可以实现不同尺寸和格式的资源并存，浏览器会在符合条件时自动选择最佳资源。
1.1 关键目标
主要目标是实现“按需加载、按设备条件选图”的能力，即在带宽有限的条件下仍能提供快速响应，同时在大屏和高 DPI 设备上维持视觉效果。响应式图片的实施可以显著降低不必要的图片下载量。
为保证可访问性，替换文本（alt）必须清晰描述图片内容，确保屏幕阅读器也能提供良好体验。
1.2 使用场景举例
在首页横幅、文章中的首图和商品详情页中的主图等位置，可能需要多分辨率版本。通过结合 媒体查询 与 srcset，可以实现按视口宽度和分辨率来分发资源，从而兼顾美观与性能。
2. picture、source、srcset 的结构与用法
picture 标签作为一个容器，包裹多个 source 元素以及一个回退用的 img。它的优势在于能够为同一张页面资源提供多套候选图片，并按条件筛选加载。浏览器会按照从前往后的顺序匹配，直到命中条件为止。
其中 source 的 media 属性用于定义媒体条件，srcset 指定候选资源集合。img 标签则提供回退资源并承担可访问性文本的职责。
2.1 结构要点
核心结构是一个 <picture> 容器，内部包含若干 <source>，以及一个 <img> 作为降级方案。当没有浏览器支持时，img 的 src 将承担加载任务。
<picture><source srcset="images/hero-large.jpg" media="(min-width: 1000px)" type="image/jpeg"><source srcset="images/hero-medium.webp" media="(min-width: 600px)" type="image/webp"><img src="images/hero-small.jpg" alt="横幅示例">
</picture>
2.2 与 img 的对比
相比仅使用 img，picture 组合能够在同一页面中，根据不同条件提供不同格式与分辨率的资源，使图片加载更具条件性与灵活性。
3. srcset 与 sizes 的要点
srcset 属性为 img 提供多张不同分辨率的图片集合，浏览器依据设备特征选择最合适的一张。结合 sizes，你还能向浏览器描述图片在不同视口宽度下的显示占比，从而实现更精准的资源匹配。
使用 srcset 时，可以同时提供宽度描述符（例如 400w、800w、1200w）以及密度描述符（1x、2x），再配合 sizes，即可覆盖从移动端到桌面的多设备场景。
3.1 语义化写法与要点
srcset 的两种描述符让开发者有两条路径：以图像实际宽度为单位的宽度描述符，或以设备像素比为单位的密度描述符。为了兼容性，给一个合适的 src 做为回退也很关键。
<img src="images/photo-800w.jpg"srcset="images/photo-400w.jpg 400w,images/photo-800w.jpg 800w,images/photo-1200w.jpg 1200w"sizes="(max-width: 600px) 100vw, 50vw"alt="示例照片">
3.2 使用 x 描述符的场景
当设备具有较高的像素密度时，2x、3x 等描述符可以确保图片在高 DPI 显示下保持清晰，同时避免在低端设备过度下载资源。
合理搭配 sizes，即使在宽屏设备也能避免下载过大但显示较小的图片，提升页面加载速度。
4. 按媒体条件进行资源选择的实践
结合 picture 与 srcset，你可以基于不同的媒体条件提供不同资源版本，从而达到艺术方向、一致性与性能之间的平衡。实践中应优先实现核心内容的稳健加载。
在实现时需要关注降级处理，确保即使在较旧浏览器中也能获得可用的图片资源与良好的替代文本描述。
4.1 使用 media 属性的 source
通过在 source 标签上设置 media 条件，浏览器会在条件成立时选择该资源。如果没有一个条件命中，浏览器会继续尝试下一个 source，最终回退到 img。
<picture><source media="(min-width: 1200px)" srcset="images/hero-1200.jpg" type="image/jpeg"><source media="(min-width: 600px)" srcset="images/hero-800.jpg" type="image/jpeg"><img src="images/hero-400.jpg" alt="横幅">
</picture>
4.2 降级策略与兼容性
并非所有浏览器都原生支持 srcset 与 picture，因此在 img 的 src 中提供回退资源，并确保 alt 文本可访问性，是常见的降级策略。
