srcset单独使用会失效，因IE11等旧浏览器完全忽略它且无src则空白；现代浏览器缺sizes时默认按100vw计算，易选错图；必须三者共存：src兜底、srcset提供候选、sizes告知布局宽度。

srcset 本身不提供向下兼容降级能力，必须搭配 sizes 和基础 src 才能可靠 fallback 到旧浏览器或加载失败场景。

为什么只写 srcset 会失效

Chrome、Safari 等现代浏览器在没配 sizes 时，默认按 100vw 计算目标宽度，大概率选中最大图；IE11 及更早版本完全忽略 srcset，若没写 src，就渲染破损图标或空白。

• srcset="a-400w.jpg 400w, a-800w.jpg 800w" 单独存在 → IE11 不识别，且无 src 时直接挂掉
• 写了 srcset 但漏掉 sizes → 多数浏览器 fallback 到 100vw，高 DPR 设备下仍可能拉伸小图
• sizes="(max-width: 768px) 100vw, 50vw" 中的媒体条件未匹配实际 CSS 布局 → 浏览器无法准确换算，降级逻辑形同虚设

src + srcset + sizes 的最小可行组合

这是目前最轻量、零 JS、全浏览器可执行的响应式图片方案。三者缺一不可，各自承担明确角色：

• src 是强制兜底：所有不支持 srcset 的环境（IE11、老 Android WebView）唯一依赖项，必须指向真实可访问的 JPEG/PNG
• srcset 提供候选资源列表：每个条目必须带 w 描述符（如 a-400w.jpg 400w），不能混用 x 和 w，否则部分浏览器跳过整组
• sizes 是布局提示：告诉浏览器“这张图在页面里实际占多宽”，例如 sizes="(max-width: 768px) 100vw, 300px" —— 它不是样式，而是预加载决策依据

常见兼容性翻车点

很多“看起来能跑”的写法，在弱网、旧设备或 CDN 缓存污染下立刻暴露问题：

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

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

下载

立即学习“前端免费学习笔记（深入）”；

• 本地双击打开 HTML 时，src="logo.jpg" 可能因协议为 file:// 被拦截；改用 src="./logo.jpg" 更稳
• 路径含反斜杠 \ 或漏写 /（如 ..images/logo.jpg）→ 解析失败，连 src 都加载不了
• src 指向带查询参数的地址（如 logo.jpg?version=2）→ IE11 可能返回 406 或静默失败
• 没设 width/height 或 aspect-ratio → 加载过程中布局抖动，LCP 波动剧烈

验证是否真生效的关键动作

别只看页面显示正常——要确认浏览器到底加载了哪个 URL，以及失败时有没有退到 src：

• DevTools → Network → 勾选 Disable cache 和 Large rows，刷新后看请求 URL 是否随视口变化
• 切 User Agent 为 IE11，确认发出的是 src 对应的请求，且响应状态为 200
• 手动把 src 改成一个 404 路径，观察是否出现破损图标而非白屏——这才是 src 兜底起效的标志

真正麻烦的从来不是写对语法，而是让 src 在所有链路环节都真实可用：CDN 不拦截、路径不跨域、服务端不返回空响应头、构建产物不误删 fallback 图。这些细节一旦漏掉，降级就变成假降级。