响应式图片通过srcset和picture实现，根据设备特性加载适配图像。使用srcset可针对屏幕尺寸或像素密度提供多版本图片，如，浏览器自动选择最匹配资源；也可按设备像素比指定，如2x、3x用于Retina屏。picture元素支持更复杂场景，结合source与media属性实现条件加载，例如移动端用竖图、桌面端用横图：。还可用于格式适配，优先加载WebP以减小体积：。最佳实践中应结合sizes属性提示布局宽度，提升选择精度，如sizes="(max-width:480px) 100vw, (max-width:800px
在现代网页开发中，响应式图片能根据设备屏幕大小、分辨率和网络状况加载合适的图像资源，提升性能和用户体验。HTML5 提供了 picture 元素和 srcset 属性来实现这一功能。
使用 srcset 实现简单的响应式图片
srcset 属性允许你为不同设备提供多个图像版本，浏览器会根据屏幕尺寸或像素密度自动选择最合适的图片。
基本语法如下：
说明：
立即学习“前端免费学习笔记（深入）”；
- 480w、800w、1200w 表示每张图片的宽度（以像素为单位）
- 浏览器会根据当前视口宽度和设备像素比（DPR）选择最匹配的图像
- src 是默认回退图像，适用于不支持 srcset 的旧浏览器
还可以根据设备像素比指定图像：
这样在 Retina 屏幕上会优先加载 high-res.jpg 或 ultra-res.jpg。
使用 picture 元素实现更复杂的响应式场景
picture 元素像一个“图片容器”，配合 source 标签可以实现基于媒体查询的条件加载，适合艺术方向裁剪或格式适配。
例如：为移动设备显示裁剪后的竖图，桌面端显示宽幅横图：
执行逻辑：
- 浏览器从上到下检查 source 的 media 条件
- 第一个匹配的 source 被选中，其 srcset 中的图片被加载
- 如果不支持 picture 或没有匹配项，则使用 img 的 src 作为兜底
另一个常见用途是提供现代图像格式（如 WebP）：
支持 WebP 的浏览器会加载 .webp 文件（体积更小），不支持的则降级到 JPEG。
最佳实践建议
结合使用 srcset 和 sizes 可进一步优化响应式行为：
sizes 告诉浏览器在不同条件下图片预计占据的视口宽度，帮助更准确地选择图像资源。
关键点：
- 始终提供 alt 属性以保障可访问性
- 确保 fallback 图像（img src）存在且可用
- 压缩并生成多种尺寸的图像资源，避免浪费带宽
- 优先使用
srcset + sizes满足大多数响应式需求，仅在需要艺术裁剪或格式控制时使用picture
基本上就这些。合理使用 srcset 和 picture，能让图片在各种设备上快速加载又保持清晰。
