picture标签通过type属性按顺序匹配浏览器支持的MIME类型来切换图片格式，优先加载首个支持的格式（如avif→webp→jpeg），必须提供img的src作为兜底，且type值须为标准MIME类型。

标签用于根据设备能力切换图片格式，核心是利用的type属性匹配浏览器支持的MIME类型，浏览器按顺序尝试，命中即停。

格式切换必须靠type，不是media
每个通过type指定图片格式，如image/avif、image/webp、image/jpeg。浏览器只加载第一个它能解码的格式，不关心文件名或尺寸。
例如：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="风景照">
</picture>

Chrome 120+会加载avif；Safari 16.4之前不支持avif和webp，直接跳过前两个，最终渲染里的jpg。

type必须写对，且顺序不能颠倒

DeepBI DHTML 页面生成器

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

下载

• type值必须是标准MIME类型，不能写成.webp或avif
• 优先放最新格式（avif → webp → jpeg），因为浏览器不会“降级尝试”，只取首个支持项
• 错误示例：把jpg放在最前 → 所有浏览器都用jpg，avif和webp永远不生效

srcset可省略路径后缀，但推荐保持一致
srcset里只需提供路径，无需带格式说明：
✅ 推荐：srcset="photo.avif"
✅ 也可：srcset="photo.jpg"（只要type声明正确）
❌ 避免混用：不要在同一个srcset里写"photo.avif, photo.webp"——srcset不处理格式判断，那是type的事

是强制兜底，src不可少
即使所有都写了type，仍必须含src属性：

• 老浏览器（如IE）完全忽略和type，只读
• 所有浏览器在无匹配时都会 fallback 到
• 漏掉src会导致图片区域空白

验证是否生效，看实际加载的URL

• 在Elements面板中右键图片 → “Open in new tab”，看地址栏是否为.avif或.webp
• Network面板过滤图片请求，确认Content-Type是否为image/avif等
• 不要依赖预加载请求，它可能只是占位或preload，真正渲染的是最终选中的那个

基本上就这些。