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 的最小可用写法

这是能跑通的最简结构，兼顾现代浏览器响应式和旧浏览器兜底：

@@##@@

注意点：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• src 是强制存在的，且不能为空、不能是占位符 URL（如 # 或 data:），否则 IE11 和部分弱网环境直接白屏
• srcset 里的 w 描述符必须和原图真实宽度一致，否则浏览器计算错目标尺寸，选图失准
• sizes 中的媒体查询要覆盖所有断点，且单位统一用 px 或 vw，别混用 em 或百分比

常见错误：把 srcset 当成 fallback 链

很多人以为写多个 srcset 就能“一层层降级”，比如 WebP → JPG → PNG，其实不行。srcset 只在同一格式内做分辨率/密度选择，不处理格式兼容性问题。

• 想实现 avif → webp → jpg 降级，必须用 + ，srcset 只能放在每个 里
• 不要在 标签上同时写 srcset 和 —— 浏览器会忽略 ，因为 不是 的子元素
• src 是最终兜底，不是“备用选项”；如果它 404，整个图片区域就只剩 alt 文本，没有二次 fallback

验证是否生效的实操方法

别靠肉眼猜，用 DevTools 看真实加载行为：

• 打开 Chrome Network 面板，勾选 Disable cache，刷新页面
• 右键图片 → Copy → Copy response，粘贴出来看文件头和尺寸，确认是不是你预期的那张
• 缩放窗口或切设备模拟器，观察 Network 中加载的资源是否随 sizes 切换变化
• 手动删掉 src 属性再测试——如果 IE11 或禁 JS 环境下图片消失，说明你漏了这个关键兜底

最易被忽略的一点：src 不仅要存在，还要确保它指向的资源在所有网络条件下都可访问。CDN 故障、路径拼错、权限配置错误，都会让这个“最后防线”直接失效——而这时你已经没有第二次机会了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！