src是唯一兜底，srcset仅择优加载；缺sizes或写错导致浏览器误选大图，w值须与原图真实宽度一致且不可混用x描述符，src必须指向可用JPG/PNG资源。
srcset 本身不提供“降级”能力，它只负责“择优加载”；真正兜底靠的是 src 属性——没写 src，就等于没兜底。
为什么写了 srcset 还是加载了大图？
浏览器看到 srcset 却没按你预期选图，核心原因是缺 sizes 或写错了。不配 sizes 时，Chrome 默认按 100vw 估算宽度，Safari 可能直接跳过整组；结果就是小屏也拉 1200w 的图。
-
sizes不是“建议尺寸”，而是告诉浏览器“这张图在页面里实际占多宽”，必须和 CSS 布局对齐（比如容器max-width: 600px，但sizes="(max-width: 768px) 100vw"就永远匹配不到小图） -
srcset里所有项必须统一用w描述符（如photo-400w.jpg 400w），混用x和w会让部分浏览器静默忽略整条srcset - 每个
w值必须和原图真实宽度一致，不能写估算值（photo-400w.jpg文件实际宽 382px？那浏览器计算就偏了）
srcset + src 怎么配才真可靠？
src 不是可选项，它是 IE11、老 Android WebView 等不支持 srcset 的浏览器唯一入口，也是所有现代浏览器在 srcset 全部加载失败时的最终 fallback。
-
src必须指向一个真实可访问、格式兼容性极广的图（推荐.jpg或.png，体积控制在 100KB 内） - 别把
src设成空字符串、"#"或占位路径（如/placeholder.jpg404 了，整个图片就白屏） - 如果用了 CDN，
src地址要带完整协议或根相对路径（//cdn.example.com/photo.jpg），避免跨域或路径解析失败
常见错误：把 srcset 当成 picture 用
srcset 只解决“同一格式下选哪个分辨率”，它完全不处理 WebP/AVIF 格式兼容问题。想让 Safari 加 WebP、IE 加 JPG，必须用 <picture></picture>，而不是在 <img alt="HTML标签里srcset如何稳妥降级？前端避坑指南" > 上堆 srcset。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<img src="photo.jpg" srcset="photo.webp 1x, photo.avif 1x" alt="HTML标签里srcset如何稳妥降级？前端避坑指南" >→ Safari 和 Chrome 都会忽略photo.webp，因为srcset不认type - 正确逻辑：
srcset用在<source></source>里，每个<source></source>自己管自己的格式和尺寸，<img alt="HTML标签里srcset如何稳妥降级？前端避坑指南" >只负责最终兜底 - 漏掉
<img alt="HTML标签里srcset如何稳妥降级？前端避坑指南" >或它的src不可用，<picture></picture>在所有<source></source>失败后就只剩alt文本，不是图
验证是否真生效，别只看页面显示
页面看起来正常 ≠ 降级链跑通了。关键要看“浏览器到底请求了哪个 URL”，以及“失败时有没有落到 src”。
- DevTools → Network → 勾选
Disable cache和Large rows，刷新后直接看图片请求的 URL 和响应大小 - 切设备模拟器：iPhone 12（DPR=3）、Mac Retina（DPR=2）、普通笔记本（DPR=1），观察请求的图是否随 DPR 变化
- 手动断网或禁用某个 CDN 域名，确认是否退到
src指向的图，而不是留白或报错
最容易被忽略的点：所有 sizes 媒体查询必须和真实 CSS 布局像素级对齐，差 1px 都可能导致浏览器选错档位；而 src 的可靠性，永远取决于它背后那个 HTTP 请求是否真的能返回 200 和一张可解码的图。
