srcset不生效的主因是缺失sizes属性或src不可用，浏览器因此退回到src加载；需确保sizes准确反映渲染宽度、src为真实可访问的兜底图（推荐320w–400w JPG，15–30KB），且路径大小写一致。
srcset 不生效，不是浏览器“不支持”，而是你没给它足够信息做选择——最常见原因是缺 sizes，或 src 本身不可用。
为什么 srcset 看起来像被忽略
Chrome、Firefox、Safari（14.1+）都支持 srcset，但它们只在满足条件时才启用：必须有 sizes 告诉浏览器“这张图会占多宽”，且 src 必须指向一个真实可访问的兜底图。否则浏览器直接退回到 src，根本不会尝试匹配 srcset 列表。
- DevTools Network 面板里只看到
src对应的请求，没发任何srcset中的 URL → 八成是没写sizes或写错了 - 写了
sizes="(max-width: 768px) 100vw, 50vw"，但 CSS 把图片容器限制在max-width: 600px→ 浏览器算出“目标宽度”远超预期，可能跳过所有srcset项 -
src="broken.jpg"返回 404 → 整个img标签降级失败，srcset根本没机会触发
兼容旧浏览器的最小可行降级方案
IE11、老版 Android WebView 不解析 srcset，但它们会老老实实加载 src。所以关键不是“让新浏览器用上 srcset”，而是确保 src 永远可用、体积小、格式广。
-
src必须是绝对路径或根相对路径，例如/images/product-thumb.jpg，不能是./images/...（不同页面层级下解析结果不同） - 兜底图推荐用 320w–400w 的 JPG，压缩到 15–30KB，托管在主站同域（避免跨域或 CDN 失效导致白屏）
- 不要把
src设为空、"#"或 base64 占位符——这些在旧浏览器里等于没图 - 如果必须用 WebP 作兜底，得放弃 IE 支持，改用
<picture></picture>（见下一条）
需要 WebP/AVIF 降级？必须用 ，不能只靠 srcset
srcset 只管分辨率和像素密度，不管格式。想让 Safari 13 以下、IE、老安卓也能显示，<picture></picture> 是唯一标准解法，且顺序和写法极其敏感。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<source type="image/webp" srcset="p.webp"></source>必须写完整 MIME 类型，image/webp错一个字母（比如写成webp）就失效 -
<source></source>必须放在<img alt="HTML中srcset不被支持怎么降级？一分钟搞定指南" >之前，且<img alt="HTML中srcset不被支持怎么降级？一分钟搞定指南" >的src必须真实存在、返回 200，否则整组降级崩掉 - 不要在
<source></source>里写src属性——它只认srcset，写了也忽略 - 本地双击打开 HTML 时，
file://协议下部分浏览器不支持type匹配，务必用本地 server 测试（如python3 -m http.server）
onerror 不是降级，是最后一道人工补救
监听 onerror 换 src 是 fallback，不是降级。它发生在浏览器已确认加载失败之后，用户已经看到破损图标或空白。但它能兜住路径写错、CDN 挂掉等意外。
- 写法要防死循环：
onerror="if (!this.src.includes('fallback')) this.src='/fallback.jpg'" - fallback 图建议用内联 SVG（无 HTTP 请求）或同域 1px GIF，避免二次失败
- 别在
onerror里再 fetch 大图——弱网下雪崩风险高 - 它对 CORS 错误、空响应（200 + 空 body）、
display: none容器里的图完全无效
真正容易被忽略的点：所有路径必须大小写一致、sizes 必须反映实际渲染宽度（不是容器 CSS 宽度）、<img alt="HTML中srcset不被支持怎么降级？一分钟搞定指南" > 的 src 是最终防线——它挂了，整个链路就断了，再漂亮的 srcset 或 <picture></picture> 都没意义。
