src 应指向体积适中、清晰度够用的“中间档”图片（如 photo-800.jpg），避免老浏览器卡顿或高清屏模糊；srcset 必须统一使用 w 或 x 描述符，不可混用；sizes 需覆盖全视口范围并设无条件兜底值；验证需通过 Network 面板观察真实请求。
src 属性必须保留，且不能指向最大图
IE11 及更老浏览器完全忽略 srcset，只加载 src 指向的图片。如果 src 指向 1920w 大图，老用户会卡顿、白屏甚至触发超时；如果指向 320w 小图，高清屏用户在现代浏览器里也可能被迫用模糊图（因为 src 是 fallback，但也是初始渲染源）。
合理的 src 应该是体积适中、清晰度够用的“中间档”，比如 photo-800.jpg——它能在 IE 中正常显示，在现代浏览器中又不会因太小而被强制拉伸。
别混用 w 和 x 描述符，否则整个 srcset 被静默忽略
写成 srcset="logo-400w.jpg 400w, logo-2x.png 2x" 这种混合形式，Chrome 和 Firefox 可能宽松解析，但 Safari（尤其 iOS 12 以前）和多数 Android WebView 会直接丢弃整个 srcset，退回到 src。这不是报错，而是静默失效，极难排查。
选择一种描述符并坚持到底：
- 固定宽高图标/头像 → 用
1x/2x/3x，不写sizes - 响应式布局中的内容图 → 用
400w/800w/1200w，且必须配sizes
sizes 必须覆盖全视口范围，漏断点就回退到 100vw
sizes="(max-width: 768px) 100vw, 50vw" 看似合理，但如果页面实际在 320px 宽的 iPhone SE 上打开，而你的 CSS 把图片限制在 300px 宽，这个 sizes 却没覆盖 max-width: 320px，浏览器就会按默认的 100vw 计算——即 320px → 匹配 400w 图，还算凑合；但若你只提供了 800w 和 1200w，它就只能选 800w，浪费流量。
安全写法是补全最小断点：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 300px"，最后一项是无条件兜底。
验证是否生效，只看 Network 面板的真实请求
别信“看起来清晰”或模拟器缩放，真正决定加载哪张图的是浏览器在首次解析 HTML 时的决策。检查方式很直接：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network → Filter
img - 勾选
Disable cache（Chrome）或关闭缓存（Safari） - 手动拖动窗口宽度，或切换设备预设（如 iPhone 12、iPad Pro）
- 刷新页面，观察加载的是
photo-400w.jpg还是photo-1200w.jpg - 如果始终只看到
src指向的图，检查控制台是否有Failed to parse 'srcset' value，或sizes值里有没有漏单位（比如写了sizes="50"而不是sizes="50vw"）
最隐蔽的坑是某些低版本 Android WebView 对 srcset 解析有 bug，会整条忽略——此时只有 src 起作用，所以它必须真的能用。
