使用picture元素可实现响应式图片，通过media、type和srcset属性按屏幕尺寸、分辨率和格式条件匹配最优图像，优先加载WebP/AVIF并降级至JPEG/PNG，结合懒加载提升性能。
在现代网页开发中，适配不同屏幕尺寸和设备像素密度是提升用户体验和性能的关键。html5 提供了 响应式图片（Responsive Images） 的原生支持，主要通过 img 元素的 srcset 和 sizes 属性，以及 picture 元素来实现。其中，picture 元素提供了更灵活的控制方式，尤其适用于艺术指导（art direction）或根据设备特性切换不同图像资源的场景。
1. 使用 picture 元素进行艺术指导
picture 元素类似于 video 或 audio，作为容器包裹多个 source 元素和一个回退的 img。它允许你根据媒体查询、分辨率或图像格式选择最合适的图片。
常见使用场景包括：
- 移动端显示裁剪后的竖图，桌面端显示宽幅横图
- 为高分辨率屏幕提供 @2x 或 @3x 图像
- 优先使用 WebP、AVIF 等现代格式，降级到 JPEG/PNG
示例：根据不同屏幕宽度加载不同图像
<picture> <source media="(max-width: 768px)" srcset="hero-mobile.jpg"> <source media="(max-width: 1200px)" srcset="hero-tablet.jpg"> <img src="hero-desktop.jpg" alt="响应式图片示例"> </picture>
浏览器会从上到下匹配第一个满足 media 条件的 source，如果都不匹配，则使用 img 的 src。
立即学习“前端免费学习笔记（深入）”；
2. 结合图像格式进行降级处理
现代浏览器支持更高效的图像格式如 WebP 或 AVIF，但旧浏览器不支持。使用 picture 可以优雅降级。
示例：优先使用 WebP，不支持则用 JPEG
<picture> <source type="image/webp" srcset="photo.webp"> <source type="image/avif" srcset="photo.avif"> <img src="photo.jpg" alt="兼容性图片"> </picture>
浏览器按顺序检查 type 是否支持，一旦匹配就加载对应资源，否则继续向下查找，最终回退到 img。
3. 配合 srcset 实现多分辨率适配
即使在 source 中，也可以使用 srcset 提供多个分辨率版本，让浏览器根据设备 DPR 自动选择。
示例：结合 media 查询与分辨率切换
<picture> <source media="(max-width: 768px)" srcset="small-800.jpg 1x, small-1600.jpg 2x" > <source media="(max-width: 1200px)" srcset="medium-1200.jpg 1x, medium-2400.jpg 2x" > <img src="large-1920.jpg" srcset="large-1920.jpg 1x, large-3840.jpg 2x" alt="高清响应式图片" > </picture>
这种方式兼顾了屏幕尺寸和像素密度，适合高性能要求的图像展示。
4. 使用建议与最佳实践
合理使用 picture 能显著提升加载效率和视觉效果，但需注意以下几点：
- 不要滥用
picture，简单分辨率切换用img + srcset更简洁 - 始终提供
img作为最后一个子元素，确保无 js 或旧浏览器也能显示 - 注意图像文件大小平衡，避免为小屏加载大图
- 测试不同设备和浏览器的兼容性，特别是对 WebP 的支持情况
- 配合懒加载（loading=”lazy”）进一步优化性能
基本上就这些。掌握 picture 元素的核心在于理解其“条件匹配”机制——通过 media、type 和 srcset 的组合，实现精准的图像交付。不复杂但容易忽略细节，比如顺序和回退逻辑。用得好，能有效提升页面速度和用户体验。