不支持 srcset 的浏览器（如 IE11）完全忽略该属性，仅加载 src 指定的图片；因此降级生效的前提是 src 必须为真实可用、格式兼容的兜底图，而非依赖 srcset 自动 fallback。
不支持 srcset 的浏览器（如 IE11、老版 Android Browser）会直接忽略该属性，只加载 src 指定的图——所以降级是否生效，取决于你有没有给 src 一个真实可用、格式兼容的兜底图，而不是靠 srcset 自动 fallback。
srcset 在不支持的浏览器里到底怎么行为
IE11 及更早版本完全不解析 srcset 和 sizes，它们把这两个属性当作文本字符串处理，既不报错也不尝试加载其中任何一项。最终渲染只依赖 img 标签的 src 属性值。这意味着：
-
src必须存在，且不能是空值、#、data:协议（IE 不支持 data URL 图片）、或相对路径错误的地址 - 如果
src="photo.avif"，IE 会请求这个地址，但 AVIF 解码失败 → 显示破损图标，不会退到srcset里的 JPG -
srcset中的2x或320w描述符对旧浏览器无意义，写错也不会报错，只是被静默跳过
srcset + sizes 组合在 Safari/Chrome 中失效的常见原因
即使浏览器支持 srcset，也可能加载了最大图、小图没生效，或始终 fallback 到 src——这不是兼容性问题，而是配置错位：
-
sizes值必须和实际 CSS 渲染宽度一致：比如容器被设为max-width: 600px，但sizes="(max-width: 768px) 100vw"，浏览器会按视口宽度算出“目标尺寸”远大于实际占用，结果选了大图 -
srcset中的w描述符必须和原图真实像素宽一致：写"photo-320.jpg 320w"，但图片实际是 312px 宽，会导致尺寸估算偏差，影响匹配精度 - 未禁用缓存时，DevTools Network 面板可能显示旧资源；务必勾选
Disable cache后刷新，再右键图片 →Copy response确认返回尺寸
picture + source 是唯一能做格式降级的 HTML 方案
<picture></picture> 不是用来“修复 srcset 兼容性”的，而是解决 type 不支持导致的白屏问题。它和 srcset 是正交机制：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<source type="image/avif" srcset="a.avif"></source>：仅当浏览器声明支持image/avifMIME 类型时才尝试加载；不支持就跳过，不报错 -
<source type="image/webp" srcset="a.webp"></source>：Safari 14+、Chrome 90+ 支持，但某些 UC 内核 WebView 可能漏识别type，直接走到底层<img src="a.jpg" alt="HTML浏览器兼容srcset降级处理教程" > -
<img src="a.jpg" alt="...">必须存在，且是<picture></picture>的最后一个子元素；它不是“可选 fallback”，而是所有浏览器都执行的最终渲染载体 -
<source></source>的srcset也需真实可访问；若a.webp返回 404，该<source></source>条目被跳过，不会自动重试下一个，也不会触发父级onerror
onerror 不能替代 srcset/picture，但能补运行时缺口
onerror 是最后防线，不是降级主干。它只在资源请求完成但失败后触发（如 404、CORS、网络中断），而 srcset 和 <picture></picture> 是预加载阶段的主动选择：
- 内联写法最可靠：
onerror="this.src='/img/placeholder.svg'; this.onerror=null"，加this.onerror=null防止 fallback 图也 404 导致无限循环 - 不要在
onerror中加载高清图或新接口，应指向已压过的 WebP/PNG 或内联 SVG：src="data:image/svg+xml;base64,..." -
<picture></picture>内的<img alt="HTML浏览器兼容srcset降级处理教程" >仍要单独设onerror，因为即使所有<source></source>匹配成功，<img alt="HTML浏览器兼容srcset降级处理教程" >的src仍会被解析并可能失败 - JS 动态创建的
img元素，onerror必须在appendChild()前绑定，否则首次错误捕获不到
真正容易被忽略的是：所有降级路径（src、srcset 项、<source></source> 的 srcset、onerror 替换地址）都必须指向真实部署、HTTP 200、MIME 正确的资源——构建时漏检一张图，线上就可能整块白屏，且无法靠浏览器自动恢复。
