srcset仅负责资源选择，不提供源站降级能力；真正应对源站不可用需结合格式降级、srcset/sizes响应式适配及onerror网络失败捕获，且的src必须指向高可用静态兜底图。
srcset 本身不提供“源站降级”能力，它只做资源选择；真要应对源站不可用，必须靠 <picture></picture> + onerror 组合，且 <img alt="HTML怎么在图片加速中配置srcset并实现源站降级" > 的 src 必须指向高可用静态兜底图。
srcset 和 sizes 是响应式选择，不是失败 fallback
很多人误以为写了 srcset 就能“自动切备用源”，其实浏览器只在首次加载时根据设备 DPR、视口宽度和 sizes 计算出目标尺寸，然后选最匹配的候选图发起请求——如果这张图 404、超时或被 CDN 拦截，srcset 不会尝试下一个，也不会退回到 src（除非你没写 sizes，部分浏览器才可能 fallback）。
常见错误现象：
- Chrome Network 面板看到只加载了
hero-1200w.jpg，但它返回 504，页面就留白，srcset中的hero-800w.jpg完全没触发 -
sizes="(max-width: 768px) 100vw"写了，但 CSS 实际限制容器为max-width: 600px，导致浏览器预估宽度出错，永远选不到小图 - 只写
srcset="a@2x.jpg 2x, a@1x.jpg 1x"却没配sizes，Safari 直接忽略整个属性
是格式降级的唯一标准路径，但不能解决源站故障
<picture></picture> 解决的是“浏览器不支持某格式”的问题，比如用户用旧版 Safari 打开 type="image/avif"，它会跳过该 <source></source>，继续往下找；但它不会因为 logo.avif 返回 503 就自动加载 logo.webp——只要 type 匹配，浏览器就会发请求，失败即止。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
关键约束：
-
<source></source>的type必须是完整 MIME 类型，如image/avif，不能写avif或.avif - 服务器对
.avif请求必须返回Content-Type: image/avif，否则 Safari 静默跳过 -
<img alt="HTML怎么在图片加速中配置srcset并实现源站降级" >的src必须是独立可访问的 JPEG/PNG，不能带查询参数（如?x-oss-process=），也不能是相对路径错误的地址 -
<img alt="HTML怎么在图片加速中配置srcset并实现源站降级" >必须是<picture></picture>的最后一个子元素，漏掉就白屏
onerror 是源站降级的唯一可靠手段，但必须防死循环
当源站图片因网络抖动、CDN 故障或防盗链拦截而加载失败时，只有 onerror 能捕获并换源。但它不是“自动重试”，而是开发者主动接管失败路径。
实操要点：
- 内联写法最稳：
onerror="this.src='https://cdn.example.com/placeholder.svg'; this.onerror=null"，赋值后立即解绑，避免重复触发 - 不要用相对路径或空
src做 fallback，必须确保备用图地址是静态、HTTP 200、无跨域风险的 - 若 fallback 图也失效，建议直接切内联 SVG：
this.src='data:image/svg+xml;base64,...'，彻底规避 HTTP 请求 - 动态创建的
<img alt="HTML怎么在图片加速中配置srcset并实现源站降级" >，必须在appendChild()前绑定onerror，否则首次错误捕获不到
真正可靠的源站降级链长这样
它把三者串起来：用 <picture></picture> 做格式优先级，用 srcset + sizes 在同一格式内做分辨率适配，再用 onerror 拦截所有网络层失败。
<picture>
<source type="image/avif" srcset="hero-400w.avif 400w, hero-800w.avif 800w" sizes="(max-width: 600px) 400px, 800px">
<source type="image/webp" srcset="hero-400w.webp 400w, hero-800w.webp 800w" sizes="(max-width: 600px) 400px, 800px">
<img src="https://cdn.example.com/hero-800w.jpg"
alt="活动主图"
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2YwZjBmMCIvPjwvc3ZnPg=='; this.onerror=null">
</picture>
最容易被忽略的是：<img alt="HTML怎么在图片加速中配置srcset并实现源站降级" > 的 src 地址必须能单独在浏览器中打开并返回 200，否则整条链就断在最后一步——你写了十层降级，结果兜底图自己 404，页面还是白的。
