<source> 不解析 2x 描述符，仅 <img> 的 srcset 支持 DPR 匹配；需用 <source> 处理 prefers-color-scheme，<img> 的 srcset 处理 1x/2x，并确保 src 兜底、网络请求验证真实加载。
picture 标签本身不渲染图片，所有视觉表现都依赖于内部 <img> 的实际加载行为；用错顺序、漏写 <img>、混用 media 和 2x，三者任一都会导致图片不显示或降级失效。
为什么 <source> 里的 2x 总是不生效
浏览器只在 <img> 的 srcset 中解析 1x/2x 描述符，且前提是没配 sizes。一旦你把 2x 写进 <source>，它就彻底被忽略——<source> 只认 media 或 type 条件，不参与 DPR 匹配。
常见错误包括：
-
<picture><source srcset="a@2x.jpg 2x"><img src="a@1x.jpg"></picture>→ 第一个<source>被选中，但2x无效，实际加载的是a@2x.jpg的第一个 URL（即未带描述符的那项） -
<source srcset="b@1x.jpg 1x, b@2x.jpg 2x" media="(min-width: 768px)">→media匹配成功，浏览器直接取第一个 URLb@1x.jpg，后面2x完全不看 - 想同时适配宽度和 DPR，必须把 DPR 逻辑全交给最外层
<img>的srcset，且确保它没写sizes
如何真正实现深色模式 + 高 DPR 双重适配
不能靠一个 <source> 同时处理 prefers-color-scheme 和 2x，得拆开：用 <source> 处理主题切换，用 <img> 的 srcset 处理像素密度。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
<picture>
<source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
<source srcset="logo-light.png" media="(prefers-color-scheme: light)">
<img srcset="logo-light@1x.png 1x, logo-light@2x.png 2x"
src="logo-light@1x.png"
alt="Logo">
</picture>
关键点：
- 两个
<source>按顺序匹配，系统深色时只加载logo-dark.png，此时<img>的srcset不参与决策 - 当系统为
no-preference（如部分 Windows/Linux 浏览器），所有<source>不匹配，回退到<img>，这时它的srcset才起作用，自动按 DPR 加载 @1x 或 @2x -
<img>的src是必须写的兜底地址，否则无图可显
验证图片是否真按预期加载，别信控制台
靠 window.devicePixelRatio 或媒体查询模拟器判断是否加载了 @2x 图，90% 情况下不准。真实加载行为必须看网络请求。
操作步骤：
- 打开 Chrome DevTools → Network 面板 → 刷新页面
- 筛选类型为
Img，找到对应图片资源 - 右键 → Copy image src → 粘贴进新标签页，确认 URL 是
xxx@2x.jpg还是xxx@1x.jpg - 切到 ⚙️ → Sensors → Device pixel ratio → 改成 2，然后用
Ctrl+Shift+R（硬刷新），避免缓存干扰
大图模糊？大概率不是 <picture> 的锅
即使 @2x 图成功加载，仍可能模糊，问题通常出在 CSS 或容器尺寸上：
-
img { width: 300px; height: 200px; }→ 把 600×400 的 @2x 图强行压缩进 300×200 容器，像素信息被丢弃 - 没加
max-width: 100%或height: auto，导致响应式断层 - 父容器用了
flex或grid但没设min-width: 0，触发图片最小尺寸计算异常 - 用了
object-fit: cover却没配object-position，关键内容被裁掉
真正让图片“清晰又炫酷”的，是加载路径可控、容器尺寸可信、CSS 缩放不破坏像素比——这些细节比写对 <source> 顺序更难调试，也更容易被忽略。
