srcset本身不能实现低版本浏览器降级，IE11及更早版本完全忽略srcset和sizes，仅加载src属性指向的真实可访问图片（如JPG/PNG），这是唯一可靠兜底。
srcset 本身不能实现低版本浏览器降级——它只在支持响应式图像的浏览器中生效，IE11 及更早版本完全忽略 srcset 和 sizes，也不会 fallback 到 src 以外的任何地址。真正在低版本浏览器里“降级”，靠的是 <img alt="HTML怎么利用srcset实现低版本浏览器图片降级" > 的 src 属性本身是否可用。
为什么 srcset 对 IE/旧 Safari 没用
IE10–IE11、Safari ≤12、Android 4.4 WebView 等根本不解析 srcset 属性。它们只读取 <img src="fallback.jpg" alt="HTML怎么利用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，结果就是白框 - 示例写法：
<img src="/images/logo.png" srcset="/images/logo-400w.png 400w, /images/logo-800w.png 800w" sizes="(max-width: 480px) 100vw, 50vw" alt="Logo">
遇到 404 时 srcset 不会自动 fallback
srcset 是预加载提示，不是错误重试机制。某个 srcset 地址返回 404，浏览器照常发起请求、报错，但不会切到下一个宽度档位，更不会退回到 src。
立即学习“前端免费学习笔记（深入）”；
- 想防 404 导致白屏？得靠 JS 的
onerror拦截：<img src="logo.png" onerror="this.src='/images/placeholder.png'; this.onerror=null;" alt="HTML怎么利用srcset实现低版本浏览器图片降级" > - 注意：这个
onerror只对src生效，对srcset中的地址无效 - 如果连 fallback 图也 404，不加
this.onerror=null会导致无限循环请求
真正兼容低版本的降级必须靠 picture + img
如果你需要格式层面的降级（比如 WebP → PNG），srcset 完全无能为力。唯一标准方案是 <picture></picture>：
- IE8–IE11 完全忽略
<picture></picture>和<source></source>，只渲染内部<img src="logo.png" alt="HTML怎么利用srcset实现低版本浏览器图片降级" >—— 这反而是优势，前提是这个src真的能加载 -
<source type="image/webp"></source>对 Safari ≤13.1 无效，但它会安静地跳过，继续用底部<img alt="HTML怎么利用srcset实现低版本浏览器图片降级" > - 别把
<img alt="HTML怎么利用srcset实现低版本浏览器图片降级" >写成自闭合：<img src="logo.png" alt="HTML怎么利用srcset实现低版本浏览器图片降级" >在某些旧 WebView 中解析失败，必须写<img src="logo.png" alt="HTML怎么利用srcset实现低版本浏览器图片降级" >
最易被忽略的一点：所有降级都依赖服务器返回正确的 Content-Type。哪怕 HTML 写对了，如果 Nginx 没配 image/webp MIME 类型，浏览器拿到 WebP 文件却收到 Content-Type: application/octet-stream，就会静默失败，且不触发任何错误事件——你只能靠 Network 面板看响应头确认。
