srcset用于为不同设备条件提供多图源，浏览器依据DPR、视口宽度及sizes声明自动选择最匹配图像；未匹配时回退至src指定的默认图。
srcset 的基本语法和浏览器选择逻辑
浏览器不会“自动降级”，而是根据当前设备的 dpr（device pixel ratio）、视口宽度、picture 中的 media 条件，以及你写的 srcset 候选集，从中选出它认为“最匹配”的那一张。所谓“降级”，其实是当高分辨率图加载失败、带宽受限或用户设置为省流量模式时，浏览器 fallback 到 src 指定的图——这才是真正意义上的兜底。
核心语法只有两个关键部分：srcset 列出候选图 + sizes 告诉浏览器每种断点下图片占多宽：
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w,
photo-x2.jpg 2x"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
600px"
/>
注意：480w 是图片原始宽度（单位是 w），不是显示宽度；2x 是设备像素比描述符，只和 DPR 相关，不参与宽度计算。
为什么写了 srcset 还加载了大图？常见原因
这不是 bug，是浏览器按规则选中的结果。常见误判点有：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
sizes写得太宽（比如全写100vw），导致浏览器以为你需要最大尺寸图，哪怕在手机上也选1200w - 没写
sizes，浏览器按默认规则（通常按 100% 视口宽）估算所需尺寸，容易高估 -
srcset里混用w和x描述符，而sizes只配合w工作；2x类型会忽略sizes，直接比对 DPR - 本地测试时没开响应式调试，或用了模拟 DPR=1 的环境，结果始终只加载
src或第一个w项
如何让 srcset 真正“降级”到小图？实操建议
想控制加载行为，重点不在加更多图，而在精准表达“在什么条件下该用哪张”：
- 把最小图（如
320w）放在srcset最前面，但必须配合理的sizes，否则无效 - 用
picture+source显式声明断点，比单靠srcset更可控：<picture> <source media="(max-width: 480px)" srcset="photo-320.jpg"> <source media="(max-width: 768px)" srcset="photo-768.jpg"> <img src="photo-1200.jpg" alt="..."> </picture>
- 给
img的src属性设为最小可用图（如photo-320.jpg），它是所有现代浏览器的最终 fallback - 避免在
srcset里塞远超需要的尺寸（比如 4K 图给移动端），既浪费带宽，也干扰浏览器判断
兼容性和实际加载行为要注意什么？
srcset + sizes 在 Chrome/Firefox/Safari/Edge 90+ 都支持良好，但旧版 iOS Safari（sizes 解析有偏差，建议用 picture 替代；IE 完全不支持，必须靠 src 回退。
真实网络中，浏览器还会结合 Save-Data 请求头、缓存状态、预加载优先级做二次调整——这意味着即使你写了完美的 srcset，用户开了省流量模式，也可能跳过所有 srcset 候选，直取 src。
最关键的细节：没有“强制降级”API，一切依赖你提供的候选集是否覆盖了目标场景，以及 sizes 是否如实反映了布局意图。漏掉一个断点，或 sizes 值和 CSS 实际渲染宽度差太多，就很容易加载错图。
