srcset本身不能实现低版本浏览器降级，IE11及更早版本完全忽略srcset和sizes，仅加载src属性指向的真实可访问图片（如JPG/PNG），这是唯一可靠兜底。

srcset 本身不能实现低版本浏览器降级——它只在支持响应式图像的浏览器中生效，IE11 及更早版本完全忽略 srcset 和 sizes，也不会 fallback 到 src 以外的任何地址。真正在低版本浏览器里“降级”，靠的是 的 src 属性本身是否可用。

为什么 srcset 对 IE/旧 Safari 没用

IE10–IE11、Safari ≤12、Android 4.4 WebView 等根本不解析 srcset 属性。它们只读取 这个原始 src 值，其余一概跳过。这不是 bug，是规范行为。

• 写了 srcset="photo-400w.jpg 400w, photo-800w.jpg 800w"，但没写 src？IE 直接不显示图片
• 写了 src="placeholder.gif"，但该路径 404？IE 显示破损图标，不会尝试 srcset 中的任一地址
• sizes="(max-width: 768px) 100vw" 在 IE 里被当作文本忽略，不影响渲染，但也不起作用

srcset + src 的正确组合方式

把 src 当作「所有浏览器都认的底线」，srcset 当作「现代浏览器的增强选项」。顺序和内容必须严格：

• src 必须指向一个真实可访问的 JPEG/PNG/GIF（如 /images/logo-fallback.png），不能是空、相对路径错误或动态 URL
• srcset 中每个资源后必须跟 w 描述符（如 logo-400w.png 400w），不能混用 x；否则 Chrome/Safari 可能整组跳过
• 不要在 src 里塞 WebP 或 AVIF：IE 虽然不看 srcset，但它会尝试加载 src，而它不认识 .webp，结果就是白框
• 示例写法：

  @@##@@

遇到 404 时 srcset 不会自动 fallback

srcset 是预加载提示，不是错误重试机制。某个 srcset 地址返回 404，浏览器照常发起请求、报错，但不会切到下一个宽度档位，更不会退回到 src。

CDP浏览器大师

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

下载

• 想防 404 导致白屏？得靠 JS 的 onerror 拦截：
• 注意：这个 onerror 只对 src 生效，对 srcset 中的地址无效
• 如果连 fallback 图也 404，不加 this.onerror=null 会导致无限循环请求

真正兼容低版本的降级必须靠 picture + img

如果你需要格式层面的降级（比如 WebP → PNG），srcset 完全无能为力。唯一标准方案是 ：

• IE8–IE11 完全忽略 和 ，只渲染内部 —— 这反而是优势，前提是这个 src 真的能加载
• 对 Safari ≤13.1 无效，但它会安静地跳过，继续用底部
• 别把 写成自闭合： 在某些旧 WebView 中解析失败，必须写

最易被忽略的一点：所有降级都依赖服务器返回正确的 Content-Type。哪怕 HTML 写对了，如果 Nginx 没配 image/webp MIME 类型，浏览器拿到 WebP 文件却收到 Content-Type: application/octet-stream，就会静默失败，且不触发任何错误事件——你只能靠 Network 面板看响应头确认。

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