srcset本身不降级，仅负责选图；真正防止白屏的是src属性和picture结构的兜底能力。sizes缺失或写死会导致浏览器误选大图，混用w/x描述符会令整组srcset失效；picture中source匹配后失败不自动跳下一条，最终依赖img的src和alt兜底，且src必须真实可访问。
srcset 本身不降级，它只做“选图”，不是 fallback 机制；真正决定是否白屏的，是 src 属性和 <picture></picture> 结构是否兜底到位。
srcset 配了但还是加载大图？检查 sizes 是否缺失或写死
只写 srcset 不配 sizes，浏览器默认按 100vw 估算渲染宽度，哪怕你页面里这张图只占 320px 宽，Chrome 仍可能拉取 1200w 的图——浪费带宽、增加超时失败风险。
-
sizes不是建议值，是告诉浏览器“这张图在不同断点下实际占多宽”，必须用媒体条件 + 宽度值，例如：sizes="(max-width: 768px) 100vw, 50vw" - 避免写成固定值如
sizes="100vw"或sizes="500px"，否则无法响应视口变化 -
srcset中所有项必须统一用w描述符（如photo-400w.jpg 400w），混用x和w会让部分浏览器直接忽略整组
srcset + picture 混用时，<img alt="HTML模板中srcset如何降级？常用处理技巧" > 的 src 是最后防线
很多人以为 <source></source> 加载失败会自动跳到下一个，其实不会：浏览器只按顺序匹配 type 和 media，一旦匹配成功就发起请求；若该请求 404 或解码失败，也不会退到下一条 <source></source>，而是直接 fallback 到 <picture></picture> 末尾的 <img alt="HTML模板中srcset如何降级？常用处理技巧" > 标签。
-
<img alt="HTML模板中srcset如何降级？常用处理技巧" >必须是<picture></picture>的最后一个子元素，且必须含src和alt -
<img alt="HTML模板中srcset如何降级？常用处理技巧" >的src必须指向一个真实可访问的资源（如 CDN 上的 JPEG），不能是相对路径错误、?x-oss-process=动态地址，也不能是空值 - IE11 及更早版本完全忽略
<picture></picture>，只加载<img alt="HTML模板中srcset如何降级？常用处理技巧" >的src——这反而是优势，前提是它真能加载
error 事件不能靠 srcset 自动触发，得手动监听并防重入
srcset 是预加载决策机制，不参与运行时错误恢复。当某个 srcset 项（比如 WebP 地址）返回 404 或 CORS 拒绝时，浏览器不会自动换源，也不会触发 error 事件——只有最终被选中并尝试加载的那个 URL 才会。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 要在
<img alt="HTML模板中srcset如何降级？常用处理技巧" >上监听error，而不是<source></source>（<source></source>不支持该事件） - 替换
this.src前务必加 guard，例如：if (!this.dataset.attempted) { this.dataset.attempted = "true"; this.src = "/fallback.jpg"; } - fallback 图也应是压过的 WebP 或 PNG，别再加载未压缩大图；若二次失败，建议插入内联 SVG 占位，而非留空
开发阶段怎么确认 srcset 真生效了？别只看页面显示
页面看起来正常 ≠ srcset 起作用。关键要看 Network 面板里到底发了哪个请求，以及是否随 DPR 或视口变化而切换。
- 打开 DevTools → Network → 勾选
Disable cache和Large rows - 用设备模拟器切 DPR：iPhone 12（3x）、Mac Retina（2x）、普通笔记本（1x），观察请求 URL 后缀或宽度参数是否变化
- 手动修改
sizes值（如改成"300px"），看是否强制加载最接近 300w 的图；不变说明解析失败或被忽略 - curl 检查服务器响应头：
curl -I https://example.com/photo.webp，确认Content-Type: image/webp正确返回
最容易被忽略的是：srcset 和 sizes 写对了，但 <img alt="HTML模板中srcset如何降级？常用处理技巧" > 的 src 指向了一个 404 路径——此时整个降级链就断了，不管前面多少 <source></source> 都救不回来。
