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