<picture>标签通过srcset、sizes和media属性实现高清屏与标清屏的智能图片分发：依据设备像素比（dpr）匹配x描述符，结合视口宽度与媒体查询选择最优资源，并支持WebP/AVIF等现代格式降级至JPEG/PNG。
用 <picture> 标签实现高清屏（Retina）与标清屏的智能图片分发，核心是结合 srcset 和 media 属性，让浏览器根据设备像素比（dpr）、视口宽度等条件自动选择最合适的图片资源。
利用 srcset + sizes 配合设备像素比
这是最常用且兼容性好的方式。浏览器会根据当前设备的 device-pixel-ratio 自动匹配 srcset 中带 x 描述符的资源：
-
1x对应普通屏（dpr=1），2x对应 Retina 屏（dpr≥2），部分高端屏还支持3x -
sizes告诉浏览器“这张图在不同视口下大概占多宽”，辅助计算最佳匹配项 - 即使不写
sizes，浏览器也会默认按100vw计算，但显式声明更精准
示例：
<picture><source
srcset="hero-400.jpg, hero-800.jpg 2x"
sizes="(max-width: 768px) 100vw, 50vw">
<img src="hero-400.jpg" alt="封面">
</picture>
用 media 属性做响应式断点分发
当不同屏幕尺寸需要完全不同的构图或裁切时（比如移动端用竖构图、桌面端用横构图），<source> 的 media 属性更合适：
立即学习“前端免费学习笔记（深入）”；
- 每个
<source>可独立指定srcset，支持x或w描述符 - 浏览器按
media查询从上到下匹配，第一个为真即采用对应资源 - 建议把最常用或兜底的方案放在最后的
<img>中
示例（适配不同视口+不同 dpr）：
<picture><source
media="(max-width: 480px)"
srcset="hero-mobile-320.jpg, hero-mobile-640.jpg 2x">
<source
media="(min-width: 481px)"
srcset="hero-desktop-800.jpg, hero-desktop-1600.jpg 2x">
<img src="hero-desktop-800.jpg" alt="封面">
</picture>
兼顾现代格式与向后兼容
想用 WebP/AVIF 提升加载性能，同时保证老浏览器可用 JPEG/PNG：
- 把新格式的
<source>放在前面，浏览器会跳过不支持的格式 - 务必保留一个基础格式（如 JPEG）的
<img>作为最终 fallback - 注意：
type属性必须准确（如type="image/webp"），否则会被忽略
示例：
<picture><source type="image/avif"
srcset="hero.avif, hero@2x.avif 2x">
<source type="image/webp"
srcset="hero.webp, hero@2x.webp 2x">
<img src="hero.jpg" srcset="hero@2x.jpg 2x" alt="封面">
</picture>
关键细节提醒
避免常见坑，确保智能分发真正生效：
-
<img>的src必须存在，它是所有不支持<picture>的旧浏览器的唯一来源 -
srcset中多个地址之间用逗号分隔，每个地址后可跟1x/2x或320w/640w，不能混用 - 不要依赖 JavaScript 检测 dpr 来切换图片——浏览器原生机制更可靠、更早触发
- 开发时可用 Chrome DevTools 的 “Network Conditions” 手动切换 Device Pixel Ratio 验证效果
