响应式图片通过srcset和picture实现适配不同设备。1. 使用srcset根据屏幕密度或视口宽度选择图片分辨率，配合sizes定义布局宽度，提升加载效率。2. 使用picture结合source的media属性实现基于媒体查询的内容适配，可切换不同构图、比例或格式（如WebP优先）。3. 始终提供img作为降级保障。4. 推荐结合现代格式优化性能。
在现代网页开发中，响应式图片是提升用户体验和页面性能的关键。为了让图片在不同设备、不同屏幕尺寸下都能良好显示，HTML 提供了 <picture> 元素和 srcset 属性两种主流方案。它们能根据设备的分辨率、视口大小或像素密度自动选择最合适的图片资源。
使用 srcset 实现基于分辨率的响应式图片
srcset 属性允许你为同一张图片提供多个分辨率版本，浏览器会根据设备的屏幕密度（如 1x、2x）或视口宽度自动选择最合适的图片。
基本语法如下：
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" alt="响应式图片">说明：
立即学习“前端免费学习笔记（深入）”；
- src：默认图片，用于不支持 srcset 的旧浏览器。
- srcset 中的每个选项包含图片路径和宽度描述符（如 480w），单位 w 表示源图片的像素宽度。
- 浏览器会结合当前布局宽度和设备像素比，选择最匹配的图片资源。
还可以配合 sizes 属性，告诉浏览器在不同条件下图片的预期显示宽度：
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 480px, 800px" alt="带sizes的响应式图片">这表示：当视口小于等于 600px 时，图片宽度为 480px；否则为 800px。浏览器据此决定加载哪个 srcset 中的资源。
使用 picture 元素实现更灵活的内容适配
<picture> 是一个容器元素，配合 <source> 使用，可以实现基于媒体查询的图片切换，适合需要完全不同的图片内容或格式的场景。
例如，在移动端显示裁剪后的竖图，桌面端显示宽幅横图：
<picture><source media="(max-width: 600px)" srcset="mobile-image.jpg">
<source media="(min-width: 601px)" srcset="desktop-image.jpg">
<img src="fallback.jpg" alt="备用图片">
</picture>
特点：
- 按 source 的顺序匹配媒体查询，第一个匹配项生效。
- 可用于切换图片格式，比如优先使用 WebP 格式：
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="支持WebP的响应式图片">
</picture>
浏览器会优先加载支持的格式（如 WebP），不支持则降级到 JPEG。
实际应用建议
选择哪种方案取决于需求：
- 如果只是同一图片的不同分辨率或 DPR（设备像素比）适配，用 srcset + sizes 更简洁高效。
- 如果需要根据不同屏幕尺寸展示不同构图、比例或格式的图片，<picture> 更合适。
- 始终提供 img 标签作为 fallback，确保兼容性。
- 结合现代图片格式（如 WebP、AVIF）可显著减小体积，提升加载速度。
基本上就这些。合理使用 srcset 和 picture，能让图片在各种设备上既清晰又高效。
