应优先用w单位匹配布局宽度，必须配sizes；x单位仅适配设备像素比且仅在占满视口时可靠，二者不可混用，否则整个srcset被忽略。
srcset 里该用 w 还是 x？关键看你要控制什么
用 w 是为了匹配图片在页面中实际渲染的宽度，用 x 是为了匹配设备像素比（DPR）。两者不能混写，否则整个 srcset 会被浏览器忽略，直接回退到 src。
常见错误：srcset="logo-400w.jpg 400w, logo@2x.jpg 2x" → 浏览器直接丢弃整条 srcset，只加载 src 指向的图。
- 如果你的图片宽度由 CSS 控制（比如
width: 50vw或max-width: 100%），必须用w+sizes，x在这种场景下基本无效 - 如果你只做高清屏适配、且图片始终占满视口（比如全屏 banner），
1x/2x可以工作，但兼容性差，旧版 Safari 和部分 WebView 会静默失败 -
w值必须等于图片文件的真实固有宽度（如hero-800w.jpg的原始尺寸就是 800px 宽），不是你希望它显示的宽度
sizes 属性不是“建议”，而是计算依据
sizes 告诉浏览器：“这张图在当前视口下，CSS 渲染出来的宽度大概是多少”。浏览器拿这个值去匹配 srcset 中最接近的 w 条目——它不关心你写了什么 CSS，只信 sizes 里写的数字。
错误示例：sizes="(max-width: 768px) 100vw, 50vw" 配合 CSS 中 img { width: 300px; } → 浏览器按 50vw（比如 600px）选图，结果加载了 640w.jpg，但你只需要 300px 宽的图，白白浪费带宽。
立即学习“前端免费学习笔记（深入）”；
- 单位必须合法：只接受
vw、px、em等，不能写%或rem - 必须覆盖所有可能的视口宽度，推荐补上兜底，比如
sizes="(max-width: 480px) 100vw, (max-width: 960px) 800px, 800px" - 如果没写
sizes，浏览器默认按100vw计算，小屏也容易加载大图
什么时候必须用 而不是 ![HTML中响应式图片在不同分辨率下的替换显示技巧]()
+ srcset
当你要为不同断点提供**完全不同构图**的图片时，<picture> 是唯一可靠方式。比如移动端裁掉背景只留人脸，桌面端展示完整场景——srcset 只能换尺寸，不能换内容。
关键约束：<source> 的 media 必须是标准 CSS 媒体查询语法，括号不能少；<img> 必须作为最后一个子元素，且带 src 和 alt，缺一不可。
- 错误写法：
<source media="max-width: 768px">→ 少括号，部分浏览器不识别 - 错误写法：
<picture><source ...></picture>→ 没<img>兜底，IE 和老 WebView 直接不渲染 - 所有
srcset中的路径必须真实存在，且建议按 1x/2x 提供对应 DPR 版本，比如mobile-400w.jpg, mobile-800w.jpg 2x
验证是否真正生效，别靠“看起来清晰”
浏览器到底加载了哪张图，唯一可信的证据是 Network 面板里的实际请求。模拟器缩放、肉眼判断清晰度、甚至 DevTools 的 “Device Mode” 都可能误导你。
- 打开 DevTools → Network → 过滤
img - 勾选
Disable cache（Chrome）或关闭缓存（Safari） - 切换设备预设（如 iPhone SE、iPad Pro）或手动拖动窗口宽度
- 刷新页面，看加载的是
hero-400w.jpg还是hero-1200w.jpg - 如果始终只加载
src指向的图，检查控制台是否有Failed to parse 'srcset' value报错，或sizes里漏了单位（比如写了sizes="50"而不是sizes="50vw"）
最容易被忽略的一点：所有响应式图片都依赖 src 作为降级兜底，它必须存在、必须可访问、体积和清晰度要够用（推荐 768w–800w），否则老浏览器用户看到的就是模糊图或空白。
