src是必需的单url兜底地址，浏览器必加载；srcset是可选候选列表，按devicepixelratio或配合sizes按容器宽度智能选图，语法错误或路径失效会导致整个srcset被忽略而回退到src。

src 是必须的兜底地址，srcset 是可选的“智能候选列表”——浏览器只在支持时才用它选图，不支持就退回到 src。

src 属性必须存在，且只提供一个 URL

无论设备多新、网络多快，src 都会被加载（除非被 JS 动态覆盖）。它是 <img> 的基础要求，缺了会触发 broken image 图标。

• 值必须是单个有效 URL，比如 "logo-128.png" 或 "/assets/icon.svg"
• 不带任何条件逻辑，浏览器照单全收、立即请求
• 如果同时写了 src 和 srcset，但浏览器不支持 srcset（如 IE11），就只加载 src 指向的图

srcset 用逗号分隔多个资源，靠描述符区分用途

srcset 不是“替代 src”，而是告诉浏览器：“这里有一组候选图，你按需挑一个”。它本身不触发加载，真正加载哪个由浏览器根据当前 devicePixelRatio 和视口宽度决定。

• 常见写法有两种："photo-320w.jpg 320w, photo-640w.jpg 640w"（宽度描述符）或 "icon-1x.png 1x, icon-2x.png 2x"（像素密度描述符）
• 宽度描述符（320w）需配合 sizes 属性才生效；纯 1x/2x 写法可单独使用，适合固定尺寸图标
• 所有 srcset 中的 URL 必须可访问，否则对应候选项会被跳过，但不会报错中断页面

不配 sizes 时，srcset 只能靠 devicePixelRatio 工作

如果你只写 srcset="avatar-100.png 1x, avatar-200.png 2x"，浏览器只会看 window.devicePixelRatio：1.5 倍屏可能选 1x，2.0 倍屏才选 2x。它**完全不考虑图片在页面中实际占多宽**。

• 这意味着响应式布局里，小屏手机显示大图、大屏显示器反而用小图，都可能发生
• 要让浏览器按“图片容器宽度”选图，必须加 sizes，例如：sizes="(max-width: 768px) 100vw, 50vw"
• sizes 是字符串，不是 CSS，不能写 width: 100% 这类样式值

常见错误：srcset 路径写错、描述符漏空格、w/x 混用

这些小问题会导致整个 srcset 被浏览器忽略，退化成只用 src——但控制台通常不报错，很难发现。

• srcset="logo@2x.png2x" ❌ 缺空格，整个值无效
• srcset="logo-320.jpg 320w, logo-640.jpg" ❌ 后一项没描述符，整条 srcset 失效
• srcset="logo-320.jpg 320w, logo-2x.png 2x" ❌ w 和 x 描述符混用，浏览器无法统一计算，多数情况直接弃用
• 路径大小写错误、缺少扩展名、相对路径拼错，都会让某张候选图 404，但不影响其他项

真正难调的不是语法，而是验证：得在不同设备、不同缩放比、不同网络条件下反复刷新，看 DevTools 的 Network 面板里到底加载了哪张图。别信“写了就一定起作用”。