srcset单独使用不配sizes时，现代浏览器因缺失渲染宽度估算依据而默认按100vw查表选图，导致小屏加载大图；老浏览器（如IE）则仅加载src兜底图。
srcset 单独用在 <img alt="HTML怎么用srcset适配不同视口并确保历史版本降级" > 上，不配 sizes，老浏览器（IE、Android 4.3 WebView）能加载 src，但现代浏览器大概率加载错图——不是兼容问题，是尺寸估算逻辑失效。
为什么写了 srcset 还是加载最大图
浏览器只在有 sizes 时才启用「按渲染宽度匹配」逻辑；没写或写错，就退化为默认按 100vw 查表。比如视口宽 375px，srcset 里只有 800w 和 1200w，它只能选 800w，哪怕你实际只渲染 200px 宽。
-
sizes必须覆盖所有断点，例如sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，漏掉任意区间会导致整条属性被忽略 -
srcset中每个 URL 后的w描述符（如400w）必须和图片真实宽度一致，不能写photo-400.jpg 400w但实际图宽是 382px - CDN 裁剪参数要对齐：如果用
https://cdn.com/img.jpg?w=400，就必须写400w；写成?w=400 800w会被跳过
IE11 及更老浏览器怎么 fallback 才可靠
它们完全不解析 srcset 和 sizes，只认 src 属性。所以 src 不是“可选项”，而是降级链唯一入口。
-
src必须指向一个真实可用资源，比如 CDN 上一张 800w 主图，或 1px GIF 占位图；不能是空值、"#"或 404 路径 - 不要混用
w和x：写srcset="a.jpg 1x, b.jpg 400w"整条会被浏览器丢弃，直接回退到src - 如果要用 WebP/AVIF 降级，必须改用
<picture></picture>，因为srcset本身不支持type判断
如何验证降级是否真生效
别看页面有没有图，要看 Network 面板里到底发了哪个请求。缓存会掩盖问题，必须禁用后硬刷。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Network → 勾选
Disable cache和Large rows - 用设备模拟器切不同 DPR（如 iPhone 12 的 3x、Mac Retina 的 2x），然后 Ctrl+Shift+R 强制刷新，观察请求 URL 是否变化
- 右键图片 →
Copy→Copy response，粘贴进新标签页确认返回尺寸是否匹配预期 - 检查 Request Headers 里有没有
Sec-CH-DPR或Width，没有说明浏览器没走响应式选择流程
最容易被忽略的是 sizes 和 CSS 实际渲染宽度的偏差——哪怕只差 10px，也可能让浏览器选错一档图；而 src 的可用性，在断网或 CDN 故障时就是最后一道防线，它必须始终可访问。
