srcset 不支持备选重试，加载失败时仅 fallback 到 src；真正格式降级需用 + ；弱网需 JS 主动超时干预，onerror 仅作最终兜底。
srcset 本身不提供“备选失败重试”，只靠浏览器择优加载后 fallback 到 src
很多人误以为 srcset 是一个“多 URL 备用列表”，其实它只是告诉浏览器“这里有多个尺寸/密度的图，你按需挑一个”。当所选资源加载失败（404、CORS、网络中断），浏览器**不会自动换下一个**，而是直接放弃，退回到 <img alt="HTML中srcset降级备选方案讲解" > 的 src 属性——这才是唯一确定的降级入口。
关键点在于：src 必须始终可用，且格式兼容性足够高（如 .jpg 或 .png）。如果 src 也失效，页面就白屏或显示破损图标。
-
srcset中所有项必须统一用w描述符（如photo-400.jpg 400w）或统一用x（如photo@2x.jpg 2x），混用会导致整个属性被忽略 - 只写
srcset不配sizes，浏览器会按100vw估算宽度，大概率加载远超需要的大图，增加失败概率 -
sizes值必须反映图片**实际渲染宽度**，不是容器 CSS 宽度；常见可靠写法：sizes="(max-width: 768px) 100vw, 50vw" - 旧浏览器（如 IE11）完全忽略
srcset，只加载src，所以它的路径必须静态、可直访、无查询参数（如不能是/img/logo.jpg?format=webp）
想让 WebP/AVIF 加载失败时切回 JPG，必须用 ，不能只靠 srcset
srcset 只管尺寸和像素密度，不管格式。如果你把 webp 地址塞进 srcset，不支持 WebP 的浏览器（如 Safari ≤13、老 Android WebView）会直接拒绝解码，但又不触发 error 事件——结果就是静默空白，连 src 都不加载。
真正能按 MIME 类型做格式降级的，只有 <picture></picture> + <source type="image/webp"></source> 组合。它的匹配逻辑是顺序执行、一击命中：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 浏览器从上到下检查每个
<source></source>，第一个type被支持 *且*srcset可访问的，就加载它 -
type必须写完整 MIME 类型：image/webp，不能简写为webp或.webp - 所有
<source></source>都跳过后，才加载底部<img alt="HTML中srcset降级备选方案讲解" >的src；这个<img alt="HTML中srcset降级备选方案讲解" >标签不可省略，且其src必须指向真实可用的 JPG/PNG -
<source></source>不支持onerror，错误仍会冒泡到<img alt="HTML中srcset降级备选方案讲解" >，所以<img alt="HTML中srcset降级备选方案讲解" >的onerror仍要设防循环
onerror 是运行时兜底，不是 srcset 的延伸
给 <img alt="HTML中srcset降级备选方案讲解" > 绑 onerror，是在浏览器已经确认加载失败后，由 JS 主动接管替换 src。它和 srcset 没有协同关系，也不影响浏览器对 srcset 的选择逻辑。
典型误用是：在 onerror 里又赋一个同样可能失败的 URL，导致无限循环。防循环最简方式是加标记：
- 内联写法：
onerror="if (!this.dataset.fallback) { this.dataset.fallback = 'true'; this.src = '/img/placeholder.png'; }" - fallback 图必须体积小、路径稳，推荐用 CDN 托管的 1px GIF 或内联 SVG（避免新 HTTP 请求）
- 不要在
onerror回调里再 fetch 大图或调用复杂函数——主线程可能已卡住，应立即静默切换 - 注意 CORS 场景：
onerror会触发，但控制台只报跨域错误，没有 404，容易误判
弱网下仅靠 srcset 不够，需配合 JS 主动超时干预
srcset 和 <picture></picture> 都无法感知网络质量。用户在 2G 或高丢包环境下，高清图可能卡在加载中长达数秒，页面长期白屏——这不是失败，所以 onerror 不触发，src 也不会 fallback。
真正在弱网生效的降级，得靠 JS 主动探测：
- 用
fetch()+AbortController对高清图发起带 timeout 的请求（如 1500ms） - 超时即认为弱网，立刻切换
<img alt="HTML中srcset降级备选方案讲解" >的src到低清版本，并清空原src防止缓存复用 - 该策略必须与
<picture></picture>兜底并存：JS 降级负责“慢”，<picture></picture>负责“不支持” - 慎用
loading="lazy"：在弱网下它会让首屏图延迟加载，叠加超时风险；非首屏图建议用data-src由 JS 控制时机
真正的降级链是线性的：浏览器先按 srcset/<picture></picture> 规则选源 → 选中的源加载失败则退到 src → src 再失败才走 onerror → 弱网还需 JS 提前拦截。任何一环缺失，用户看到的就是空白。
