srcset中w描述符必须与图片真实宽度一致，否则导致解码失败、模糊或跳过加载；sizes需匹配CSS计算出的渲染宽度，且所有img必须提供兼容性良好的src作为降级兜底。
srcset里w描述符必须和原图真实宽度一致
浏览器按sizes计算出“需要多宽的图”，再在srcset里找最接近的w值匹配——如果写320w但实际图片只有280px宽，解码失败或渲染模糊是大概率事件，甚至直接跳过该选项不加载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
identify -format "%w" image.jpg（ImageMagick）或在线工具确认每张图的真实像素宽，别靠文件名或PS里目测 - 避免写
srcset="small.jpg 320w, medium.jpg 768w"这种估算值；应写srcset="small.jpg 280w, medium.jpg 752w" - DevTools Network 面板勾选「Disable cache」后刷新，右键图片 → 「Open in new tab」，看地址栏返回的实际尺寸是否匹配
sizes属性没对齐CSS布局就会退化成单图
sizes不是媒体查询替代品，它只告诉浏览器“这张图在当前视口下大概会渲染多宽”，最终选哪张图仍取决于srcset中哪个w最接近这个值。如果CSS把容器限制在max-width: 600px，但sizes="(min-width: 768px) 50vw"，那768px以上时浏览器以为要渲染384px宽的图，结果可能永远选不到你准备的768w图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在Chrome DevTools Elements 面板里选中
img，右键 → 「Scroll into view」，再看Computed → 「width」值，这就是浏览器认为的渲染宽度 -
sizes值应尽量贴近这个宽度：比如Computed width是398px，就写sizes="(max-width: 768px) 100vw, 400px" - 禁用所有CSS后测试一次：若
sizes失效导致图片变小/错位，说明它依赖了未生效的样式（如transform或display: grid隐式影响）
srcset + sizes在IE和老Android WebView里完全无效
srcset带w描述符的语法，IE全系、Android 4.4 WebView、部分三星默认浏览器根本不识别——它们会直接忽略整个srcset，只加载src。如果你没写src，或者src指向一个WebP图，页面就白屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有带
srcset的img必须同时提供src，且src必须是JPG/PNG等广泛支持格式，不能是src="photo.avif" - 不要写
src="photo.jpg?format=webp"这类带参数的地址：旧浏览器发请求，后端可能返回406或损坏响应 - 兼容性底线：把
src当成降级兜底，而不是可有可无的备选
srcset中混用x和w描述符会破坏匹配逻辑
浏览器对srcset的解析是单模式的：要么按w匹配（配合sizes），要么按x匹配（纯设备像素比）。如果混写srcset="a.jpg 1x, b.jpg 2x, c.jpg 320w"，多数浏览器会直接忽略整个srcset，退回src。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 明确使用场景：
w+sizes用于响应式布局（不同容器宽），x用于高DPR设备适配（同容器宽不同清晰度） - 同一
srcset中只用一种描述符，不要交叉；需要两者兼顾时，用<picture></picture>拆分逻辑 - 验证方式：在Chrome DevTools → Rendering → 「Emulate CSS media features」里切换
device-pixel-ratio，观察是否仍走w逻辑
srcset语法完全正确，只要src本身不可访问（比如路径写错、CDN未部署、相对路径在file://协议下失效），整张图就失去降级基础——src不是“可选后备”，而是所有浏览器都认的最后防线。 
