srcset仅负责同一格式下的分辨率适配，无法实现跨平台格式降级；真正兼容旧浏览器（如IE、Safari 13.0以下）必须依赖src兜底，且src必须指向真实可用的JPG/PNG图，否则会白屏。
srcset 本身不负责“跨平台降级”，它只做同一格式下的分辨率适配；真正实现跨平台（如 Safari 13.0 以下、IE、老安卓 WebView）降级，必须配合 src 保底，且不能依赖 srcset 单独存在。
为什么 srcset 单独写会白屏
只写 srcset 属性的旧引擎（如 IE11）直接忽略整条属性，又没有 src，结果渲染空白框
- 支持 srcset 但不支持 WebP 的浏览器（如 Android 4.4 WebView），会尝试加载 a.webp，失败后不会自动 fallback 到 JPEG，而是停在 error 状态，仍为空白
- src 是强制兜底项，不是可选项；它必须指向一个真实可访问的 JPG/PNG 图
srcset + src 怎么配才真正生效
-
src必须存在，且格式为广泛兼容的.jpg或.png，例如src="photo.jpg" -
srcset中若用w描述符（如photo-400w.jpg 400w），必须同步提供sizes，否则浏览器按100vw估算宽度，大概率选错图 -
srcset中若用x描述符（如photo@2x.jpg 2x），sizes可省略，但仅适用于固定宽高容器（如头像、图标） - 所有
srcset里的图片 URL 必须和src指向同一语义内容，只是分辨率/体积不同；否则降级后用户看到的是完全不同的图
常见踩坑：sizes 写错导致降级失效
比如容器实际被 CSS 限制为 max-width: 600px，但写了：sizes="(max-width: 768px) 100vw, 50vw"
- 小屏下浏览器按 100vw 计算目标宽度，可能加载了 1200w 的图，却只渲染 320px 宽，浪费流量
- 更糟的是，如果 srcset 里没提供对应档位（比如只有 400w, 800w），浏览器可能退回到 src —— 表面是“降级”，实则是因配置错被迫兜底
验证方法：DevTools → Network → Disable cache → 切换设备模拟器 → 看实际加载的 URL 是否随 DPR 或视口变化
跨平台降级不能只靠 srcset，WebP/AVIF 必须用 picture
当你要用 WebP 或 AVIF 时：srcset 无法声明格式优先级，浏览器不会因为 a.webp 加载失败就去试 a.jpg。必须改用：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"> @@##@@ </source></source></picture>
关键点：
- type，值必须精确为 image/avif 或 image/webp
- 
src 必须可访问
- IE 和老安卓 WebView 会跳过所有
最易被忽略的一点：服务器返回 WebP/AVIF 时，Content-Type 响应头必须匹配 type 值。Nginx 没配 types { image/webp webp; }，或 CDN 返回 application/octet-stream，浏览器就会静默失败，且不往下 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
