srcset本身不降级，只负责选图；真正决定fallback的是sizes、src和浏览器能力配合。漏写src或写错sizes（如"100vw"），即使srcset列全也会总加载1200w图，因浏览器按视口宽而非实际渲染宽匹配。
srcset 本身不降级，它只做“选图”，真正决定 fallback 行为的是 sizes、src 和浏览器能力三者配合。写错 sizes 或漏掉 src，再全的 srcset 也白搭。
为什么 srcset 列了 400w/800w/1200w 却总加载 1200w
浏览器不是按设备分辨率“猜”该用哪张，而是先算出图片在页面中实际占多宽（靠 sizes），再从 srcset 里挑最接近的宽度档位。如果 sizes 没写或写成 "100vw"，它就默认按整个视口宽去选——哪怕你手机只有 375px 宽，也会倾向加载 1200w 图。
-
sizes必须匹配 CSS 布局：比如图片容器在小屏下是满宽、桌面端是 50vw，就得写sizes="(max-width: 768px) 100vw, 50vw" - 别混用
w和x：同一组srcset只能用一种描述符；320w对应视口宽度适配，2x对应像素密度适配，混写会让 Chrome 直接跳过整条srcset - 每个
srcset项后的宽度值（如400w）必须和原图真实像素宽一致，不能写估算值；否则计算偏差会连锁导致选图错误
srcset + img[src] 的 fallback 链路怎么才算完整
img 标签的 src 属性不是可选项，它是所有不支持 srcset 的旧环境（IE11、部分安卓 WebView）唯一能识别的入口。一旦这个 src 指向 404、相对路径错误或 CDN 未部署的资源，降级链就断了——用户看到的不是“低清图”，而是空框或 alt 文字撑开布局。
-
src必须指向一个静态、高可用资源：推荐用 CDN 托管的 800w 主图，或内联 base64 的 1px GIF（src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="） - 不要把
src写成动态地址，例如logo.jpg?format=webp—— 后端挂了、CDN 缓存策略冲突、代理截断参数都会让它失效 - 如果用了
loading="lazy"，更要确保src可访问；否则断网或 JS 加载失败时，连这张图都出不来
DevTools 里怎么快速验证 srcset 是否真生效
光看页面显示正常没用。关键要确认“浏览器到底发了哪个请求”，以及“换设备尺寸后是否切换了 URL”。手动点 Network 面板太慢，得用可复现的方式盯住源头。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network → 勾选
Disable cache和Large rows，方便看清每张图的请求 URL 和响应大小 - 用设备模拟器切 DPR：iPhone 12（3x）、Mac Retina（2x）、普通笔记本（1x），观察加载的图名是否随 DPR 变化；不变说明
srcset或sizes没起作用 - 右键加载出的图片 →
Copy→Copy response，粘贴进编辑器看实际返回尺寸；如果返回的是 1200px 宽的图，但页面容器只有 300px，就是sizes描述失准
常见静默失败：WebP/JPEG 尺寸不一致导致布局跳动
不同格式图的原始像素尺寸（intrinsic size）必须完全一致。浏览器加载 WebP 时按它的 EXIF 宽高算容器，切到 JPEG 时如果元数据缺失或数值不同，就会重排布局——这不是 CSS 问题，是资源本身不统一。
- 用命令行验证：
file logo.webp和file logo.jpg，输出里都要明确写着相同宽高，比如800 x 450 - 修复 JPEG 元数据：
exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg - 生成时强制统一分辨率：
convert -resize 800x450\! input.png output.jpg（末尾\!表示忽略比例强行拉伸并写死尺寸） - 终极兜底：放弃依赖图片自身尺寸，给容器加
style="aspect-ratio: 16/9"或显式width/height属性
最容易被忽略的一点：所有降级手段都建立在「src 始终可加载」这个前提上。它不是“备用路径”，而是整个链路的锚点；一旦失效，srcset、sizes、甚至后续的 JS error 处理，全都失去意义。
