响应式图片加载失败主因是sizes语法错误或缺失，导致浏览器退化为加载src默认图；常见错误包括括号空格、单位缺失、混用w/x描述符，或sizes与实际布局宽度不匹配。
响应式图像配置出问题，八成不是图片没生成，而是 HTML 代码本身写错了——浏览器根本没按你设想的方式解析 srcset 或 sizes，更别说选图了。
为什么浏览器总加载默认图而不是 srcset 中的某张？
最常见原因是 sizes 值为空、语法错误，或与实际布局不匹配。浏览器无法推算出图片该占多宽，就退化为只看 src，忽略整个 srcset。
-
sizes必须是字符串，不能写成 CSS 计算值（比如calc(100vw - 2rem)），也不支持变量或 JS 表达式 - 媒体查询里有空格（如
(max-width: 768px)）在旧版 Edge 中会直接失效；推荐写成(max-width:768px)（无空格） - 如果页面用 CSS Grid/Flex 布局，图片父容器没设明确宽度，
sizes中写的50vw可能和实际渲染宽度差很远——浏览器按sizes算出来的“显示宽度”和真实占用空间对不上，就会选错图 - 验证方式：Chrome DevTools → Elements 面板右键图片 → “Copy as cURL”，看发出的请求 URL 是哪张；再打开 Network → 图片资源 → 查看 Request Headers 中的
Sec-Ch-Ua-Model和DPR，比对是否符合预期
picture 元素报错或完全不生效？检查这三处硬性规则
<picture> 不是可选包装器，它是一套有严格结构约束的机制。漏掉或放错 <img>，整个逻辑就崩了。
-
<picture>内部必须且只能有一个<img>，且它必须放在所有<source>之后——顺序错（比如<img>在前）会导致所有<source>被跳过 -
<source>的media属性断点，必须和真实 CSS 布局断点一致。例如布局用@media (min-width: 768px)，<source media="(min-width: 768px)">才有效；写成767px或769px都可能失配 -
<img>的src和alt不可省略——前者是降级兜底，后者是语义与无障碍刚需；即使你 100% 确信所有<source>都会命中，也得写
srcset 混用 w 和 x 描述符导致整条属性被忽略
浏览器对 srcset 的解析是“全或无”：只要发现同一值里同时出现 480w 和 2x，就直接放弃整条 srcset，退回到 src。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：按场景二选一。内容适配（不同视口尺寸）用
w，设备像素比适配（Retina 屏）用x - 示例错误写法：
srcset="img-480.jpg 480w, img@2x.jpg 2x"→ 浏览器无视 - 正确拆分：
srcset="img-480.jpg 480w, img-800.jpg 800w"（配合sizes）；或srcset="img.jpg, img@2x.jpg 2x"（仅用于图标等固定尺寸小图） - 现代项目建议优先用
w+sizes，它比x更可控，尤其在响应式栅格中
真正卡住人的地方，往往不是不会写，而是不知道浏览器到底“看见”了什么——sizes 算出来的宽度、srcset 里候选图的宽度、设备 DPR、甚至父容器的 CSS 计算值，四者要对齐才能触发正确选择。调试时别只盯着 HTML，得进 DevTools 看 Network 请求和 Computed Styles 里的实际渲染尺寸。
