srcset 的 1x/2x 仅在 标签上且未设置 sizes 属性时，按设备 dpr 自动匹配；若出现在 中或 含 sizes，则 x 描述符被忽略，退化为顺序优先加载。

srcset 用在 picture 里，只对 <source></source> 或 <img> 生效；单纯写 srcset="a.jpg 2x" 不会按设备像素比（DPR）自动切图——必须确保没配 sizes，且用的是 x 描述符。

什么时候 srcset 的 1x/2x 才真正起作用？

只有当 srcset 出现在 <img> 标签上、且没写 sizes 属性时，浏览器才按设备 DPR 匹配 1x/2x。picture 内部的 <source></source> 即使写了 2x，若同时带 media 或 sizes，x 就被忽略。

• <img src="a.jpg" srcset="a@1x.jpg 1x, a@2x.jpg 2x"> → 正确触发 DPR 切换
• <source srcset="a@1x.jpg 1x, a@2x.jpg 2x" media="(min-width: 768px)"></source> → media 一出现，1x/2x 失效，浏览器只看匹配到的 <source></source>，然后加载其 srcset 里第一个资源（顺序优先）
• <img srcset="a@1x.jpg 1x, a@2x.jpg 2x" sizes="50vw"> → sizes 存在，强制进入「宽度匹配模式」，x 被完全无视

想用 picture 实现 DPR 适配，结构必须这样写

picture 本身不解析 DPR，但可以作为语义容器包裹一个仅靠 srcset + x 工作的 <img>。这时 <source></source> 是可选的——比如你后续要加 WebP 格式支持，就把它放前面；否则直接写 <img> 更轻量。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 推荐结构：<picture><source srcset="a.webp 1x, a@2x.webp 2x" type="image/webp"><img src="a.jpg" srcset="a@1x.jpg 1x, a@2x.jpg 2x" alt="..."></source></picture>
• <source></source> 的 srcset 也支持 x，但前提是它没配 media 或 sizes；一旦配了，就退化为「静态 fallback」角色
• 注意：<source></source> 必须在 <img> 之前，否则被浏览器跳过

常见错误：为什么 2x 图根本没加载？

不是图片路径错了，也不是 CDN 没缓存，而是浏览器压根没走 DPR 匹配逻辑。最常踩的三个坑：

• 在 <img> 上写了 sizes，哪怕只是 sizes="100vw"，2x 就失效
• 把 srcset 错写在 <picture></picture> 标签上（<picture srcset="..."></picture>），这个属性对 <picture></picture> 无意义
• srcset 值里多了一个空格，比如 "a@2x.jpg 2x"（两个空格），整个值被当作无效而丢弃

验证是否命中 DPR 切换的最快方式

别猜，直接看网络请求：

• Chrome DevTools → Network 面板 → 刷新页面 → 筛选 Img 类型
• 找到对应图片 → 右键 → Copy image src → 粘贴进新标签页，确认 URL 是 @2x 还是 @1x
• 在设备模拟器中切换 DPR（如 DevTools → ⚙️ → Sensors → Device pixel ratio），再刷新对比

真正容易被忽略的是：DPR 匹配只发生在 <img> 的 srcset 上，且绝不与 sizes 共存；任何试图在 <source></source> 里混用 media 和 2x 的写法，本质都是在自欺欺人。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！