srcset仅支持分辨率选择，不感知网络或格式兼容性；弱网降级需配合picture+type、fetch+AbortController超时干预及可靠src兜底。
srcset 本身不支持环境降级——它只做分辨率/尺寸选择，不感知网络、设备能力或格式兼容性。真要实现“弱网切低清”“不支持 WebP 退 JPEG”，必须配合 picture、fetch 或服务端逻辑，不能只靠 srcset。
srcset + sizes 配错就等于没降级
很多人以为写了 srcset 就自动适配了，其实浏览器会按 sizes 声明的渲染宽度去选图。如果 sizes 写成 "100vw"，哪怕图片容器只有 320px 宽，浏览器也可能拉下 1200w 的图——这不是降级，是浪费。
-
sizes必须反映图片**实际渲染宽度**，不是父容器宽度，也不是视口宽度；常见写法：sizes="(max-width: 768px) 100vw, 50vw" -
srcset所有项必须统一用w描述符（如photo-400.jpg 400w），混用x和w会让整个列表被忽略 - 保留
src指向一个真实可用 fallback 图（比如主站同域的 800w JPEG），IE 或旧 WebView 会直接加载它，不能留空或写占位路径
真正做格式降级得靠 +
picture 是唯一能按 MIME 类型做条件降级的标准方案，但它的行为很严格：浏览器从上到下匹配 source，第一个 media 为真且 type 被支持的就加载，其余全跳过。写错顺序或拼错 type，WebP 就永远不会出现。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- WebP 必须放在
source中，img的src必须是 JPEG/PNG——这是降级生效的前提，不是可选项 -
type值必须严格匹配服务器返回的真实Content-Type：写image/webp，但 Nginx 没配types { image/webp webp; }，就会解码失败且不 fallback -
img必须是picture的最后一个子元素，且src必须可访问；404 或路径错误会导致整个结构退化为纯文本
弱网超时降级必须用 fetch + AbortController
HTML 标签无法感知网络质量。loading="lazy" 在弱网下反而加剧白屏，而 picture 又不会因为 WebP 加载慢就切 JPEG。真要基于延迟做切换，只能 JS 主动干预。
立即学习“前端免费学习笔记（深入）”；
- 用
fetch请求高清图，配合AbortController设 1500ms 超时，覆盖大部分弱网首包延迟 - 失败后替换
img.src，注意要先清空原src（避免缓存复用），再赋新值 - 不能只监听
onerror：404、CORS、中断都可能触发，和网络质量无关；超时才是弱网信号
src 属性失效是白屏最常见原因
所有降级策略最终都依赖 img 的 src 能加载出点东西。不支持 loading="lazy" 的浏览器（如 Safari 14.1 以下）会直接忽略 data-src，只加载 src。此时若 src 是空、"#" 或指向挂掉的 CDN，结果就是大片空白。
-
src必须始终指向高可用轻量图：主站同域下的 1px GIF、LQIP 模糊图，或 SSR 注入的小图 - 关键图（如商品主图、头图）应跳过懒加载，直接写死
src，不加loading="lazy"，也不设data-src - 没设
width/height或aspect-ratio是最容易被忽略的布局抖动源；加载前不预留空间，图片一进来就撑开容器，CLS 直接飙升
