HTML模板中srcset如何降级？常用处理技巧-html教程-PHP中文网

srcset本身不降级，仅负责选图；真正防止白屏的是src属性和picture结构的兜底能力。sizes缺失或写死会导致浏览器误选大图，混用w/x描述符会令整组srcset失效；picture中source匹配后失败不自动跳下一条，最终依赖img的src和alt兜底，且src必须真实可访问。

html模板中srcset如何降级？常用处理技巧

srcset 本身不降级，它只做“选图”，不是 fallback 机制；真正决定是否白屏的，是 src 属性和结构是否兜底到位。

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 混用时，的 `src` 是最后防线

很多人以为加载失败会自动跳到下一个，其实不会：浏览器只按顺序匹配 type 和 media，一旦匹配成功就发起请求；若该请求 404 或解码失败，也不会退到下一条，而是直接 fallback 到末尾的标签。

必须是的最后一个子元素，且必须含 src 和 alt
的 src 必须指向一个真实可访问的资源（如 CDN 上的 JPEG），不能是相对路径错误、?x-oss-process= 动态地址，也不能是空值
IE11 及更早版本完全忽略，只加载的 src——这反而是优势，前提是它真能加载

error 事件不能靠 srcset 自动触发，得手动监听并防重入

srcset 是预加载决策机制，不参与运行时错误恢复。当某个 srcset 项（比如 WebP 地址）返回 404 或 CORS 拒绝时，浏览器不会自动换源，也不会触发 error 事件——只有最终被选中并尝试加载的那个 URL 才会。

DeepBI DHTML 页面生成器

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

下载

要在上监听 error，而不是（不支持该事件）
替换 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 写对了，但的 src 指向了一个 404 路径——此时整个降级链就断了，不管前面多少都救不回来。