是唯一可靠方案，浏览器按的type顺序匹配首个支持格式并停止，为强制兜底且必须含src与alt；WebP应置首，AVIF次之，JPEG/PNG置于中。
srcset 本身不提供格式降级能力，只做分辨率/像素密度适配；要实现 WebP/AVIF → JPG/PNG 的格式回退，必须用 <picture></picture>，srcset 只能配合 sizes 在同一格式内选图。
为什么 srcset + src 不能 fallback 到不同格式
浏览器看到 srcset="a.webp 1x, a.jpg 1x" 时，会把两个候选都当作 image/webp 类型处理（因为没声明 MIME），不支持 WebP 的浏览器尝试加载 a.webp 失败后，不会自动切到 a.jpg——它甚至不“知道”后面那个是 JPG。这就是为什么单靠 <img alt="HTML怎么设计带有降级回退机制的srcset响应式方案" > 标签永远无法安全启用现代格式。
-
srcset的语义是「同一张图的多个尺寸或 DPR 版本」，不是「多种格式的备选」 -
src是给不支持srcset的旧浏览器（如 IE）用的，不是给不支持 WebP 的浏览器兜底的 - 哪怕你用 CDN 动态转码（比如
photo.jpg?format=webp），返回头Content-Type: image/webp缺失或错误，浏览器仍会解码失败且不跳转
正确组合：picture + source + img 的三段式结构
这是目前唯一零 JS、无额外请求、SEO 友好、原生支持的方案。关键在顺序和属性值是否精确匹配浏览器能力。
-
<source></source>必须按格式优先级从高到低排列：image/avif→image/webp→ （可选）image/jpeg或image/png；IE 完全忽略<picture></picture>，只渲染最后的<img alt="HTML怎么设计带有降级回退机制的srcset响应式方案" > - 每个
<source></source>的srcset内部可混用w和x描述符（如hero-800w.webp 800w, hero@2x.webp 2x），但不同<source></source>之间必须保持格式一致 -
<img alt="HTML怎么设计带有降级回退机制的srcset响应式方案" >的src必须指向一个真实可用的 JPG 或 PNG，不能是占位符路径（如"#"或空字符串），否则 IE 和断网场景直接白屏 -
<img alt="HTML怎么设计带有降级回退机制的srcset响应式方案" >必须是<picture></picture>的最后一个子元素，否则 HTML 解析失败，整个结构被忽略
sizes 属性必须写在 ![HTML怎么设计带有降级回退机制的srcset响应式方案]()
上，且反映真实渲染宽度
sizes 不是样式控制，而是告诉浏览器「这张图在当前布局下会有多宽」，它直接影响 srcset 中哪个候选被选中。漏写、写错或写成固定值，都会导致高分辨率图在小屏上强制下载。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 如果
<img alt="HTML怎么设计带有降级回退机制的srcset响应式方案" >在 CSS 中是width: 100%; max-width: 600px;，对应sizes="(max-width: 600px) 100vw, 600px" - 如果图在栅格中占 1/3 宽，且断点从
768px开始，则sizes="(max-width: 768px) 100vw, 33.33vw" - 不要写
sizes="100vw"图省事——当父容器有padding或max-width限制时，浏览器仍会选中远超需要的图 -
sizes中不能出现calc()、百分比单位（如50%）或无单位数字（如400），否则整条属性失效
容易被忽略的验证点和线上陷阱
本地开发看着正常，上线后白屏或加载错图，往往卡在这几个细节上：
- 用
curl -I https://yoursite.com/photo.avif检查响应头是否真为Content-Type: image/avif；Nginx 需显式配置types { image/avif avif; } - 所有
srcset中的 URL 必须真实可访问，哪怕只是 1px 占位图；浏览器不校验资源内容，只管发起请求，404 会导致网络错误但不会触发 fallback - 移动端 Safari 对
sizes解析较严格，iOS 11–12.0 遇到非法语法可能直接忽略整个srcset，务必在真机上测试 -
<picture></picture>里不能包裹display: none的容器——Safari 和部分 Android WebView 会跳过该元素，后续也唤不回来
最常出问题的不是逻辑没想清，而是 <img alt="HTML怎么设计带有降级回退机制的srcset响应式方案" > 的 src 指向了带查询参数的动态地址（如 photo.jpg?x-oss-process=image/format,webp），结果旧浏览器发请求后收到 404 或 406，连 fallback 都没了。
