IE8–IE11和Android 4.3前WebView完全忽略srcset与sizes，仅加载src指向的图；src必须真实可访问、不可为空或错误路径，且是唯一可靠入口。

srcset 在 IE8–IE11 和 Android 4.3 以前 WebView 中完全无效，浏览器会直接忽略它，只加载 src 属性指向的图——这是唯一可靠入口，别指望它自动 fallback。

IE11 及以下为什么 srcset 不生效

这些浏览器的 HTML 解析器根本不认识 srcset 和 sizes 属性，既不报错也不解析，就像它们不存在。你写 ，IE11 只会发一次请求：fallback.jpg。所有现代降级逻辑（格式、DPR、宽度适配）在此彻底失效。

常见错误现象：

• 页面在 IE11 显示破损图标，但 Network 面板里只有 fallback.jpg 请求，且返回 404
• 写了 srcset 却始终加载同一张大图，DevTools 切换 User Agent 也无变化
• src 指向了空值、"#" 或相对路径错误（如 images/logo.jpg 缺少开头 /），导致整个图片区域留白

srcset + sizes 怎么写才不被老浏览器拖累

现代浏览器靠 sizes 做预加载决策，但老浏览器完全无视它——所以 sizes 的存在不影响兼容性，但写错会影响新浏览器选图，进而拉低 LCP 稳定性。

实操建议：

• sizes 必须反映图片**实际渲染宽度**，不是容器 CSS 宽度；例如容器 max-width: 600px，就别写 sizes="(max-width: 768px) 100vw"，应写 sizes="(max-width: 768px) 600px, 50vw"
• srcset 中所有项必须统一用 w 描述符（如 photo-400w.jpg 400w），混用 x（如 photo.jpg 2x）会导致整条 srcset 被 Chrome/Safari 忽略
• src 必须指向一个真实可访问的图（推荐 CDN 托管的 800w 主图或 WebP 转 JPEG 后的兜底图），不能是占位字符串或空路径
• 不要给 src 加查询参数（如 ?v=1 或 ?format=jpg），某些老旧 WebView 对带参数的 URL 解析异常

想兼容 IE 又要用响应式图，只能靠 吗

不是“只能”，而是“必须”——但要注意： 在 IE11 及以下同样不被识别，整个标签块被跳过，仅渲染其内部最后一个 。所以它的兼容价值，全系于那个末尾的 是否健壮。

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

关键条件：

• 标签必须带 type 属性（如 type="image/webp"），否则 Safari 等现代浏览器也会跳过整组
• 的 srcset 可以包含 w 或 x，但老浏览器不读它；真正起作用的是末尾 的 src
• 末尾 的 src 和 alt 都不可省略，且路径必须全为正斜杠（如 /images/logo.jpg），反斜杠或缺失前缀会导致 IE11 解析失败
• 如果用 polyfill（如 picturefill），必须确保在 DOM ready 后手动调用 picturefill()，否则 IE 下仍为空白

验证 srcset 降级是否真生效的硬方法

别只看页面显示正常。要确认“浏览器到底加载了哪个 URL”，以及“老环境有没有退到 src”。

实操步骤：

• 打开 Chrome DevTools → Network → 勾选 Disable cache 和 Large rows
• 切换 Device Toolbar，User Agent 设为 IE 11 或 Android 4.2，刷新页面
• 观察 Network 列表中图片请求：只应有 1 条，且 URL 必须匹配 的 src 值；若有其他请求（如 .webp/.avif），说明降级链已断
• 检查该请求的 Response Headers，确认 Content-Type 是 image/jpeg 或 image/png，而非 application/octet-stream

最容易被忽略的一点：老浏览器不触发 error 事件来兜底，它连请求都懒得发——所以一切 fallback 必须静态写死在 HTML 里，不能靠 JS 注入或 data-src 动态赋值。

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