必须用包裹多个，每个配独立srcset+sizes，末尾的src是最终防线；中仍需srcset和sizes是因为type仅声明格式可用性，不解决分辨率适配问题，浏览器需据此选择最匹配尺寸的该格式图片。
必须用 <picture></picture> 包裹多个 <source></source>，每个 <source></source> 配独立 srcset + sizes，末尾 <img alt="HTML怎么使用picture标签协同srcset完成深度降级" > 的 src 是最终防线——少一个环节，降级就断在那儿。
为什么 <source></source> 里还要写 srcset 和 sizes
同一个格式（比如 WebP）在不同设备上仍需分辨率适配：<source type="image/webp"></source> 只声明“可用 WebP”，但不解决“该加载多大尺寸的 WebP”。浏览器会按你给的 srcset 列表和 sizes 声明，从中挑最匹配的 WebP 图；如果只写 src 不写 srcset，它就只能加载那一张图，高 DPR 设备会模糊，小屏手机又浪费带宽。
-
srcset必须全用w描述符，如photo-400w.webp 400w, photo-800w.webp 800w；混进2x会让 Chrome 直接跳过整条<source></source> -
sizes值必须反映该<source></source>实际渲染宽度，不是容器宽度。例如图片在移动端占满视口、桌面端固定 600px：sizes="(max-width: 768px) 100vw, 600px" - 每个
<source></source>的srcset至少含两个档位（如 400w 和 800w），否则 Safari 可能忽略该<source></source>
<picture></picture> 的匹配顺序和失效静默问题
浏览器从上到下扫描 <source></source>，遇到第一个 type 被支持 *且* srcset 中资源可请求（HTTP 2xx）的就加载，其余全部跳过——不报错、不提示、不 fallback 到下一个。写错顺序或 MIME 类型，新格式就永远不生效。
- 正确顺序：
<source type="image/avif"></source>→<source type="image/webp"></source>→<img src="fallback.jpg" alt="HTML怎么使用picture标签协同srcset完成深度降级" >。AVIF 放最前，旧 Safari 自动跳过；WebP 次之，覆盖 iOS 14+；<img alt="HTML怎么使用picture标签协同srcset完成深度降级" >是强制兜底，不是“备用” -
type必须是标准 MIME 类型：image/avif，不能写成avif、.avif或image/avif+lossless - 服务器返回 AVIF 文件时，响应头
Content-Type必须严格等于image/avif；若返回application/octet-stream或image/jpeg，浏览器解码失败，但不会切到下一条<source></source>
<img alt="HTML怎么使用picture标签协同srcset完成深度降级" > 的 src 不是摆设，而是最后一道可用性门槛
所有 <source></source> 都没匹配上？没问题，<img alt="HTML怎么使用picture标签协同srcset完成深度降级" > 还在。但若它的 src 是空、相对路径错误、或指向 404，整个 <picture></picture> 就退化为纯文本，连 alt 都可能不显示（IE11 下尤其明显）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
src必须指向静态可直访资源：推荐主站同域下的/img/fallback.jpg，禁用带参数地址（如logo.jpg?x-oss-process=style/small），Safari 对这类 URL 容易返回 406 - 开发时可用 base64 占位图保底：
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PC9zdmc+"，避免部署路径出错 - 必须设置
width/height或style="aspect-ratio: 4/3;"，否则<img alt="HTML怎么使用picture标签协同srcset完成深度降级" >加载前容器塌陷，引发布局抖动
验证是否真生效，别只看页面有没有图
页面显示正常 ≠ 降级链跑通。关键要看 Network 面板里浏览器到底发了哪个请求，以及失败时有没有退到 <img alt="HTML怎么使用picture标签协同srcset完成深度降级" > 的 src。
- 用 DevTools → Network → 勾选
Disable cache和Large rows，观察加载的 URL 后缀（.avif/.webp/.jpg）是否随设备模拟器 DPR 变化 - 手动把某个
<source></source>的srcset地址改成 404，看是否仍能加载<img alt="HTML怎么使用picture标签协同srcset完成深度降级" >的src；若不能，说明<img alt="HTML怎么使用picture标签协同srcset完成深度降级" >路径本身也失效了 - 在无网络环境下刷新页面，确认
<img src alt="HTML怎么使用picture标签协同srcset完成深度降级" >是否仍能加载（此时所有<source></source>请求必然失败）
最常被忽略的点：降级不是靠“浏览器聪明”，而是靠结构严丝合缝。漏掉一个 <img alt="HTML怎么使用picture标签协同srcset完成深度降级" >，写错一个 Content-Type，或 sizes 值与真实布局不符，都会让整条链在某处无声断裂——而你根本收不到任何警告。
