srcset降级非自动，依赖sizes精准匹配渲染宽度与src真实兜底：浏览器按DPR和sizes选srcset中最适图，加载失败不回退，最终渲染全靠src；混用w/x描述符或sizes失准将导致降级失效。
srcset 降级不是自动发生的，它依赖 sizes 和 src 的双重兜底
浏览器不会因为某张 srcset 图片加载失败就自动切到另一张；它只在预加载阶段根据设备像素比（DPR）和 sizes 计算出“目标渲染宽度”，再从 srcset 列表里选最接近的项加载。一旦选中并发起请求，失败了也不会回退——最终渲染完全依赖 src 属性。
所以所谓“平滑降级”，其实是三层保障：
-
srcset提供高 DPR / 多尺寸候选（如"photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"） -
sizes必须真实反映图片在页面中的渲染宽度（如sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"），否则浏览器估算错误，大概率加载过大的图 -
src必须指向一个体积小、格式兼容性极广的真实资源（如托管在同域的/fallback.jpg），IE11、旧 WebView、断网时全靠它
sizes 写错会导致整个 srcset 被忽略或加载错图
常见现象：Chrome Network 面板显示始终加载 1200w 图，哪怕你在手机上打开；或者桌面端反而加载了 400w 小图——这基本是 sizes 和实际 CSS 布局不一致导致的。
实操要点：
- 不要写死
sizes="100vw"，除非你确认该图永远占满视口 - 如果容器被 CSS 限制为
max-width: 600px，那对应断点的sizes应该是"(max-width: 600px) 100vw, 50vw"，而不是照搬设计稿的 768px - 用 Chrome DevTools 的 Device Toolbar 切换设备后，右键图片 → “Copy” → “Copy response”，粘贴进编辑器看返回图宽是否匹配
srcset中的w值 - 只写
srcset不配sizes：Safari 可能直接忽略整个属性，Chrome fallback 到100vw，结果就是低端机也拉大图
srcset 混用 w 和 x 描述符会彻底失效
浏览器遇到 srcset="a.jpg 400w, b@2x.jpg 2x" 这种混写，会直接丢弃整个 srcset 列表，退化为只加载 src。这不是兼容性问题，是规范强制要求。
选择策略：
- 优先统一用
w描述符（如"small.jpg 400w, medium.jpg 800w, large.jpg 1200w"），它和sizes协同更可靠，且适配响应式布局 - 若只针对高 DPR 屏幕（如 Retina），可用
x（如"logo.png 1x, logo@2x.png 2x"），但此时不能写sizes，浏览器按设备像素比直接匹配 - 同一
srcset里绝对不要混用：没有400w 2x这种写法，语法错误
关键图禁用 lazy，且 src 必须可访问，否则降级链当场断裂
loading="lazy" 不是降级机制，它是加载时机控制。不支持它的浏览器（如 IE、Android 4.4 WebView）会直接忽略该属性，然后加载 src——如果 src 是空、"#"、或指向一个已下线的 CDN 路径，用户看到的就是白屏，不是“懒加载没生效”，是根本没留活路。
必须做到：
- 首屏关键图（头图、商品主图）不加
loading="lazy"，也不设data-src -
src指向的 fallback 图必须 HTTP 200 可达，推荐用主站同域下的轻量图（如 1px GIF 或 320w LQIP） - 所有
srcset中的路径都要真实存在，否则该候选项静默跳过，不会报错也不会提示 - 别指望 JS 补救：onerror 触发时图片已失败，用户已看到空白；它只能作为最后一道防线，不能替代 HTML 层的降级设计
真正容易被忽略的是：sizes 值必须和 CSS 实际渲染宽度对齐，而不是和设计稿断点对齐；src 不是“备用”，它是整条链路的最终执行者，挂了就真挂了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
