src是必须加载的兜底地址，srcset是可选候选列表；src强制请求且无条件逻辑，srcset需浏览器支持才生效，配合sizes才能按容器宽度智能选图，否则仅依devicepixelratio选图。
src 是必须加载的兜底地址，不是“可选方案”
src 属性是 <img> 的强制属性，缺了会显示破损图标，浏览器也一定会发起请求——不管设备多新、网络多慢、屏幕多大。它不带任何条件逻辑，就是一条硬编码的 URL。哪怕你写了完整的 srcset，只要浏览器支持该属性，src 仍会被当作“fallback”加载（除非被 JS 覆盖）。常见错误是误以为写了 srcset 就能跳过 src，结果在 IE11 或某些老旧 WebView 中只看到一张模糊小图，因为整个 srcset 被忽略，但 src 还在默默加载。
srcset 不是“替代 src”，而是“候选列表”
srcset 本身不触发加载，它只是告诉浏览器：“我有这些图，你按需挑一个”。浏览器是否使用它，取决于自身能力与当前上下文。关键点在于：
• 如果只写 srcset="logo-100.png 1x, logo-200.png 2x"，浏览器只看 window.devicePixelRatio，完全不感知图片在页面中占多宽；
• 如果混用描述符，比如 srcset="a.jpg 400w, b.png 2x"，整条 srcset 会被静默丢弃，退化到仅用 src；
• 描述符后必须跟空格，srcset="icon@2x.png2x" ❌ 无效；
• 某张候选图 404 不影响其他项，但控制台通常不报错，得靠 Network 面板确认实际加载了哪张。
sizes 必须配合 w 描述符才起作用
用 w 描述符（如 400w）时，sizes 不是可选项，而是计算依据。没有 sizes，浏览器无法知道“这张图在页面里实际要显示多宽”，也就没法从 srcset 中选出最匹配的项。例如：
• sizes="(max-width: 600px) 100vw, 50vw" 告诉浏览器：小屏下图宽 = 视口全宽，大屏下图宽 = 视口一半；
• 浏览器拿这个“槽宽”去比对 srcset 里的 400w、800w 等，选最接近的；
• sizes 是字符串，不能写 CSS 语法，比如 width: 100% 会直接失效；
• 错配 sizes 可能导致 iPhone SE（375px × 3x DPR ≈ 1125px 需求）反而加载了 1200w 图，而本可用 800w 更省流量。
什么时候该用 1x/2x，什么时候该用 w+sizes
选哪种模式，本质是看图在页面中的行为：
• 固定尺寸小图（头像、按钮图标、CSS 里写了 width: 24px 的元素），用 1x/2x 最简单，不需要 sizes；
• 内容区大图（文章配图、Banner、随容器缩放的图），必须用 w + sizes，否则响应式布局下选图逻辑完全失准；
• 想同时适配不同 DPR 和不同视口宽度？<picture></picture> + 多个 <source></source> 才是正解，srcset 本身不支持交叉条件判断；
• 实际验证时，别只看 DevTools 的 Device Toolbar 模拟，得真机切横竖屏、调系统缩放比、开节流再刷 Network 面板——很多问题只在特定 DPR + 视口组合下暴露。
