src 是最终兜底，浏览器在 srcset 所有候选不可用时回退到 src；未配 sizes 或其值与实际渲染宽度不符会导致加载大图；旧浏览器忽略 srcset，故 src 必须存在且指向兼容性强的图。
srcset 本身不提供“降级”能力，它只负责让浏览器选一张最合适的图；真正起兜底作用的是 src 属性——浏览器在 srcset 所有候选都不可用（加载失败、不匹配设备）时，会自动回退到 src 指向的资源。
为什么写了 srcset 还是加载了大图？
常见原因是没配 sizes，或者 sizes 值和实际 CSS 渲染宽度对不上。浏览器无法预估图片占多宽，就默认按 100vw 加载最大图，浪费带宽还容易超时失败。
- 必须为每个
srcset项写明真实宽度，比如"photo-320w.jpg 320w, photo-768w.jpg 768w"，不能写估算值 -
sizes要和 CSS 中图片容器的实际渲染宽度一致，例如容器在移动端固定宽 320px，就写sizes="(max-width: 768px) 320px, 50vw" - 旧浏览器（如 IE11）完全忽略
srcset，所以src必须存在且指向一个兼容性极强的图（.jpg或.png）
srcset + sizes 的最小可用写法
这是能跑通的最简结构，兼顾现代浏览器响应式和旧浏览器兜底：
<img
src="photo.jpg"
srcset="photo-400w.jpg 400w,
photo-800w.jpg 800w,
photo-1200w.jpg 1200w"
sizes="(max-width: 400px) 400px,
(max-width: 800px) 800px,
1200px"
alt="描述文字">
注意点：
立即学习“前端免费学习笔记（深入）”；
-
src是强制存在的，且不能为空、不能是占位符 URL（如#或data:），否则 IE11 和部分弱网环境直接白屏 -
srcset里的w描述符必须和原图真实宽度一致，否则浏览器计算错目标尺寸，选图失准 -
sizes中的媒体查询要覆盖所有断点，且单位统一用px或vw，别混用em或百分比
常见错误：把 srcset 当成 fallback 链
很多人以为写多个 srcset 就能“一层层降级”，比如 WebP → JPG → PNG，其实不行。srcset 只在同一格式内做分辨率/密度选择，不处理格式兼容性问题。
- 想实现
avif → webp → jpg降级，必须用<picture></picture>+<source type="image/avif"></source>，srcset只能放在每个<source></source>里 - 不要在
<img alt="HTML页面srcset降级怎么写？简单易懂教程" >标签上同时写srcset和<source></source>—— 浏览器会忽略<source></source>，因为<img alt="HTML页面srcset降级怎么写？简单易懂教程" >不是<picture></picture>的子元素 -
src是最终兜底，不是“备用选项”；如果它 404，整个图片区域就只剩alt文本，没有二次 fallback
验证是否生效的实操方法
别靠肉眼猜，用 DevTools 看真实加载行为：
- 打开 Chrome Network 面板，勾选
Disable cache，刷新页面 - 右键图片 →
Copy→Copy response，粘贴出来看文件头和尺寸，确认是不是你预期的那张 - 缩放窗口或切设备模拟器，观察 Network 中加载的资源是否随
sizes切换变化 - 手动删掉
src属性再测试——如果 IE11 或禁 JS 环境下图片消失，说明你漏了这个关键兜底
最易被忽略的一点：src 不仅要存在，还要确保它指向的资源在所有网络条件下都可访问。CDN 故障、路径拼错、权限配置错误，都会让这个“最后防线”直接失效——而这时你已经没有第二次机会了。
