src 是必须写的兜底项,所有不支持 srcset 的浏览器(如 IE 全系、Android 4.3 及更早 WebView)会忽略 srcset,仅请求 src 指向的可用、语义合理、尺寸适中的图片,不可为空或设为占位符。

srcset 不被支持时,浏览器会直接忽略它,只加载 src 指定的图片 —— 这就是它原生的、零成本的优雅降级机制。
为什么 src 是必须写的兜底项
所有不支持 srcset 的浏览器(如 IE 全系、Android 4.3 及更早 WebView)会跳过该属性,但一定会请求 src 属性指向的资源。这意味着:
-
src不能留空或写占位符,必须是可用、语义合理、尺寸适中的 fallback 图片 - 别把
src设成超大图(比如 1920px 宽),否则老用户全得下载高清图,白白浪费流量 - 推荐选中等分辨率图(如 800w 或 1000w 对应的版本),兼顾清晰度与体积
srcset + sizes 组合时,src 仍起决定性作用
即使你写了完整的响应式配置,只要浏览器不认识 sizes,它就无法计算布局宽度,也就无法从 srcset 中选最优图 —— 最终还是回落到 src。
- 错误写法:
<img src="placeholder.svg" srcset="a.jpg 480w, b.jpg 800w" sizes="(max-width:600px) 100vw">→ 老浏览器加载极小的占位图,内容缺失 - 正确写法:
<img src="image-medium.jpg" srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w" sizes="(max-width:600px) 100vw, 50vw"> -
sizes值本身不触发请求,只是给现代浏览器做计算用;它的缺失不影响src加载
IE 和旧 Android WebView 的真实行为验证
在 IE11 / Android 4.4 等环境实测,srcset 完全静默,控制台无警告,Network 面板只出现一次 src 请求。
- 无需 JS 检测、无需
<picture></picture>包裹、无需 polyfill —— 这是 HTML 标准定义的行为 - 若发现老浏览器没加载
src,大概率是路径写错、404、或服务器返回了 30x 重定向导致失败 - 注意:某些 CDN 或图片服务会根据
User-Agent自动改写src,这种服务端干预可能破坏兜底逻辑
真正容易被忽略的点是:很多人把 src 当成“随便填一个”,却没意识到它在降级链里是最终且唯一的救命稻草 —— 它不是备选,而是底线。











