srcset比width+height更靠谱，因它让浏览器按设备像素比或视口宽度自主选择合适尺寸图片，避免下载过大原图；而width+height仅缩放，仍加载全量图像。
srcset 为什么比只用 width + height 更靠谱
单纯靠 CSS 设置 width: 100% 和 height: auto 只是缩放同一张图，浏览器仍会下载原图——在手机上加载 4K 图片，浪费带宽且拖慢首屏。而 srcset 让浏览器根据设备像素比（dpr）和视口宽度自主选择最合适的资源。
关键点在于：它不强制指定“哪个设备用哪张”，而是提供一组候选图片和对应的描述符（w 或 x），由浏览器决策。
-
1x、2x适用于固定尺寸图（如图标、头像），按设备像素比选； -
400w、800w适用于流体容器，需配合sizes属性告诉浏览器“这张图在不同断点下会占多宽”； - 漏写
sizes时浏览器默认按 100vw 计算，可能导致小屏也加载大图； - 所有
srcset中的路径必须可访问，否则对应候选会被跳过，降级到src。
picture 元素适合哪些场景
当需要「艺术指导（art direction）」——比如桌面端展示完整风景照、移动端只裁切人脸区域——<picture></picture> 是唯一可靠方案。它通过 <source></source> 的 media 和 type 属性做条件分发，优先级高于 srcset。
常见误用：把 <source></source> 当成“备用图列表”，不加 media 或全写 media="(min-width: 0)"，结果只有第一个生效。
立即学习“前端免费学习笔记（深入）”；
- 每个
<source></source>必须有srcset（或src），且至少一个含media属性； -
<img alt="css如何处理响应式图片_使用srcset和picture元素实现不同分辨率显示" >标签仍是必需的，作为兜底（无 JS、不支持picture的老浏览器）； - 避免在
media中写过于复杂的查询，如(min-width: 320px) and (max-width: 480px) and (orientation: portrait)，增加解析负担且难维护； -
type="image/webp"可用于渐进增强，但得确保 fallback 的<img src alt="css如何处理响应式图片_使用srcset和picture元素实现不同分辨率显示" >是 JPEG/PNG。
如何验证 srcset 和 picture 是否生效
别只看页面显示效果——那可能是兜底 src 在起作用。真正在用 srcset 或 <source></source>，得看网络面板里实际加载的是哪张图。
- Chrome DevTools → Network → Filter 输入
img，刷新页面，观察请求的文件名和大小是否随缩放/设备模拟变化； - 右键图片 → “检查” → 查看元素的
currentSrc属性值（在 Console 里输入$0.currentSrc也能读）； - 用
matchMedia检查媒体查询是否命中：matchMedia('(max-width: 768px)').matches； - 禁用 JavaScript 后再测试，确认
<picture></picture>的<img alt="css如何处理响应式图片_使用srcset和picture元素实现不同分辨率显示" >仍能显示，避免依赖 JS 注入。
容易被忽略的兼容性和性能细节
srcset 和 <picture></picture> 在现代浏览器中支持良好（Chrome 38+、Firefox 38+、Safari 9+），但 IE 完全不支持，Edge 12–18 仅支持 srcset 的 x 描述符，不支持 w 或 <picture></picture>。
- 服务端若启用了 HTTP/2 推送，注意不要对整组
srcset图片都推送，应只推最终选中的那一张； - CDN 缓存策略要区分
Accept请求头（用于webp判断）和User-Agent（部分旧 CDN 会因此缓存错版本）； - 生成多倍图时，别简单用 CSS 像素乘以 2 —— iPhone 14 Pro 是 3x，Pixel 7 是 2.75x，应以设备报告的
window.devicePixelRatio为参考； -
<img alt="css如何处理响应式图片_使用srcset和picture元素实现不同分辨率显示" >不设width/height会导致布局偏移（CLS），即使用了srcset，也要用 HTML 属性或 CSSaspect-ratio占位。
