srcset + sizes 是高清加载的最小必要组合，缺一不可；仅写 srcset 不写 sizes 会导致高 DPI 屏加载过小图而发虚，因浏览器退化为按 1x DPR 解析 w 描述符，忽略实际设备像素比。
srcset + sizes 是高清加载的最小必要组合
只写 srcset 不写 sizes，高 DPI 屏（如 iPhone、MacBook Pro）大概率加载过小图，直接发虚。浏览器在没有 sizes 时，会退化为按 1x DPR 解析 w 描述符，完全忽略设备实际像素比。
必须同时存在：
-
sizes告诉浏览器“这张图在不同视口下占多少 CSS 宽度”，比如sizes="(min-width: 768px) 50vw, 100vw" -
srcset提供对应物理像素需求的图源，单位必须统一用w（如photo-800w.jpg 800w），不能混x（2x） - 如果图是固定尺寸（比如按钮宽 32px），可省略
sizes，改用srcset="btn@1x.png 1x, btn@2x.png 2x"—— 但此时不能写sizes，否则2x失效
picture 元素里 2x 描述符根本不起作用
<source> 标签里的 2x 是无效的。浏览器只在最外层 <img> 的 srcset 中解析 1x/2x，<source> 即使写了 icon@2x.png 2x 也会被完全忽略。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 所有 DPI 版本都挪到
<img>的srcset里，例如：srcset="icon@1x.png 1x, icon@2x.png 2x, icon@3x.png 3x" -
<source>只用于宽度断点（media）或格式降级（type="image/webp"） - 如果只做 DPI 切换，不用
<picture>，直接<img srcset="">更可靠
验证是否真加载了高清图，别信 devicePixelRatio
window.devicePixelRatio 返回 2 只说明设备支持高 DPI，不代表图片就加载了 @2x 版本。真正决定加载哪张图的是 HTML 结构和浏览器解析逻辑。
唯一可信验证方式：
- Chrome DevTools → Network 面板 → 刷新页面 → 筛选
Img类型 → 找到目标图片 → 右键「Copy image src」确认 URL 含@2x或-800w等 - 模拟不同 DPR：DevTools → ⚙️ → Sensors → Device pixel ratio → 设为 2 / 3，再 **硬刷新（Ctrl+Shift+R）**，普通刷新可能走缓存
- 检查
<img>的currentSrc属性（Elements → Properties 面板），它才是当前渲染所用的真实地址
固定尺寸图标别乱加 sizes
按钮、logo、小图标这类 CSS 尺寸固定的元素，加 sizes 是典型错误。一旦写了 sizes（哪怕只是 sizes="32px"），浏览器立刻切换到宽度匹配模式，彻底忽略 1x/2x 描述符——结果就是 DPR=2 时仍加载 @1x 图。
该怎么做：
- 保持
width和height为固定 CSS 值（如width: 32px; height: 32px;） - 只用
srcset="icon@1x.png 1x, icon@2x.png 2x"，不写sizes - 如果图标在不同断点下宽度变化（比如移动端 24px、桌面端 48px），那就必须放弃
x描述符，改用w + sizes，并确保sizes值与实际渲染宽度一致
sizes、一个误放的 2x 在 <source> 里、一次没硬刷的 DPR 切换，都会让高清适配静默失效。关键不是“有没有写”，而是“浏览器到底按什么规则选了哪张”。 
