srcset本身不提供降级能力，仅是候选资源列表；真正决定降级逻辑的是sizes计算结果、浏览器对描述符的支持程度，以及src兜底图的可用性。

srcset 本身不提供“降级”能力，它只是候选资源列表；真正决定是否降级、怎么降级的，是 sizes 的计算结果、浏览器对描述符的支持程度，以及你有没有给 src 设一个可用兜底。所谓“选型”，本质是选 srcset 描述符类型（w 还是 x）、配不配 sizes、要不要套 ，这三件事必须按场景拆开判断。

什么时候该用 w 描述符 + sizes，而不是 x 描述符

当图片在页面中宽度会随布局变化（比如轮播图占满容器、文章内嵌图最大宽 600px），就必须用 w + sizes。只写 srcset="a.jpg 1x, b.jpg 2x"，浏览器只能看设备像素比，完全不知道这张图在小屏下只占 300px 宽，结果可能硬加载 1200w 的图。

• w 描述符要求每个 URL 后面的数字必须等于原图真实宽度（如 photo-800w.jpg 800w），写错会导致整个 srcset 被忽略
• sizes 值必须反映 CSS 实际渲染宽度，不是容器 max-width：比如侧边栏里一张图，sizes="(max-width: 768px) 100vw, 300px" 比 "100vw" 更准
• 不写 sizes 时，Chrome 默认按 100vw 算，Safari 可能直接跳过 srcset，回退到 src

为什么不能混用 w 和 x 描述符

浏览器遇到 srcset="a.jpg 400w, b.jpg 2x" 这种写法，会直接丢弃整个属性值——规范明确要求描述符类型必须统一。这不是兼容性问题，是解析失败。

• 现代响应式布局几乎全靠 w，因为 x 只解决“高分屏模糊”，解决不了“小屏加载大图”
• x 仅适用于固定尺寸容器（如 logo 宽高固定为 120×40px），且需确保所有 srcset 图片都按 1x/2x/3x 等比例缩放
• 如果用了 w 却漏写 sizes，等效于没写 srcset——浏览器根本没法算出该加载哪张

srcset 失效时，src 是唯一防线

IE11、旧版 Android WebView、禁用 JS 的环境，或者 srcset 因语法错误被忽略时，浏览器只认 src。它不是“次要选项”，而是最后能救命的资源。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• src 必须指向一个真实可访问的图：推荐主站同域下的 LQIP（低质量占位图）或 320w 缩略图，别用 CDN 失效路径或空字符串
• 如果 里 全部不匹配，最终仍会加载 ，所以这个 src 也得能抗住所有 fallback 场景
• 没设 width/height 或 aspect-ratio，src 图片加载瞬间会触发布局抖动，CLS 直接爆表

picture 是格式降级的刚需，不是 srcset 的增强版

和 srcset 解决的是不同维度的问题：srcset 解决“同一张图的多尺寸”， 解决“不同格式/不同裁剪/不同艺术方向”。想用 WebP 却让 IE 显示空白？只靠 srcset 不行。

• 必须配 srcset（不能只写 src），否则整条 被跳过
• type 值必须严格匹配 MIME 类型，image/webp 写成 webp 或 imageWebP 都无效
• 最后一个 标签不是“备选”，是强制渲染载体，它的 src 和 alt 都不可省

最容易被忽略的点是：所有这些属性的有效性，都依赖于图片 URL 的真实可用性。哪怕 srcset 和 sizes 写得再精准，只要其中任意一张图返回 404 或 CDN 挂了，浏览器就会跳过它，转而加载下一个候选——直到落到 src。所以降级链的每一环，都要当成生产环境的独立服务来验证。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！