@media不能节省带宽，因其仅控制样式生效与否，不阻止资源预加载；浏览器会在CSS解析阶段并发下载所有background-image引用的图片，无论DPR是否匹配。
只用媒体查询切换@2x图，不控制加载时机，反而会浪费带宽——高 DPR 设备可能加载了 2x 图，但低 DPR 设备也下载了它；关键得让浏览器「按需加载」，而 CSS 媒体查询本身不参与资源预取。
为什么@media不能节省带宽
CSS 媒体查询只决定样式是否生效，不决定资源是否发起请求。只要background-image: url("icon@2x.png")出现在某条匹配的规则里，现代浏览器（Chrome、Safari）会在解析 CSS 阶段就并发下载该图，哪怕用户根本没滚动到对应区域，或设备 DPR 实际是 1。
- 即使写了
@media (-webkit-min-device-pixel-ratio: 2)，1x 设备仍可能预加载 2x 图（尤其当规则未被 CSSOM 完全剪枝时） - 构建工具若未做静态分析，
icon@2x.png会被无条件打包进产物，体积膨胀不可控 - 没有
srcset那样的“候选集+决策权交给浏览器”的机制，CSS 没法表达“可选，非必须”
真正能优化带宽的方案：用 HTML 层级的 srcset + sizes
把图片逻辑从 CSS 移到 HTML，才能触发浏览器原生的资源选择与预加载策略。这是唯一被所有现代浏览器稳定支持、且能规避冗余下载的方式。
-
srcset必须用x描述符直连 DPR：srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x"，不能混用w -
sizes必须存在，否则x描述符在响应式布局中失效；例如：sizes="(max-width: 768px) 100vw, 50vw" -
src是 IE 和部分旧 WebView 的兜底，不可省略：src="icon.png" - 构建后务必验证
icon@2x.png真实存在于dist/路径下——Webpack/Vite 默认不处理srcset里的路径
如果非要用 background-image，必须接受带宽妥协
纯 CSS 方案本质是“覆盖渲染”，不是“按需加载”。要减少浪费，只能靠工程约束，而非媒体查询本身。
立即学习“前端免费学习笔记（深入）”；
- 只对关键视觉元素（如 logo、banner）用
@media切图，避免全站铺开 - 用
image-set()替代多条@media规则，但注意：Firefox完全忽略它，只走url()fallback；Chrome/Safari不预加载，LCP 可能变差 -
background-image: image-set("icon.png" 1x, "icon@2x.png" 2x);后面必须紧跟background-image: url("icon.png");作为 fallback - 所有
@2x图必须真实是 2 倍物理尺寸，命名严格匹配，否则模糊和带宽浪费双杀
最常被忽略的一点：媒体查询只是“开关”，不是“调度器”。想省带宽，就得把决策权交给浏览器——这一步只能发生在 HTML 解析阶段，而不是 CSS 计算阶段。
