视网膜屏图片发虚主因是浏览器未获足够物理像素图：DPR=2时需600px源图填满300px CSS宽，否则拉伸模糊；应优先用srcset+1x/2x/3x适配固定尺寸图，src作兜底，sizes配合w描述符用于流式布局，验证须以Network面板实际请求为准。
视网膜屏图片发虚，根本不是图不够大，而是浏览器没拿到足够物理像素的图去渲染。比如 CSS 设定图片宽 300px，在 DPR=2 的 iPhone 上，实际需要 600 像素宽的源图才能填满不插值。只给一张 300w 的图，浏览器只能拉伸——结果就是模糊。
用 srcset + 1x/2x/x 描述符直接适配 DPR
这是最直接、最可靠的方式，适合固定尺寸的图片（如 logo、icon）。
- 必须写 src 属性作为兜底，旧浏览器或异常情况时靠它显示
- srcset 中只用 1x、2x、3x，顺序要从低到高：srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
- 不能加 sizes——一旦写了 sizes，浏览器就切换成宽度匹配模式，整个 2x/3x 描述符会被忽略
- 确保服务器返回的图片真实分辨率匹配：logo@2x.png 必须是原图 2 倍宽高，否则“标了 2x”也没用
sizes 配合 w 描述符更适合流式布局
如果你的图片宽度由 CSS 控制（比如 max-width: 100%、flex 或 grid 布局），那就必须用 w + sizes，不能只靠 x。
- sizes 要真实反映图片在各断点下的渲染宽度，例如：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 300px" - srcset 全部用 w 单位：
srcset="logo-400w.jpg 400w, logo-800w.jpg 800w, logo-1200w.jpg 1200w" - 浏览器会用 sizes 算出渲染宽度 × DPR，再向 srcset 中最接近的 w 值靠拢。例如：375px 宽视口 + DPR=2 → 按 750px 匹配 → 选 800w 图
- 混用 400w 和 2x 是非法写法，整组 srcset 会被静默丢弃，回退到 src
验证是否真生效，别信肉眼
“看起来清晰”不是标准，“模拟器缩放”也不准。唯一可信依据是 Network 面板里的实际请求。
- 打开 DevTools → Network → 过滤 img → 勾选 Disable cache
- 用真机调试，或 Chrome Device Toolbar 切到 iPhone 12（DPR=3）、iPad Pro（DPR=2）
- 刷新页面，点开图片请求，确认加载的是 @2x 图或 800w 图，而不是 fallback 的 src
- 检查 Request Headers 是否有 Sec-CH-DPR；没有说明 DPR 感知未启用（可能缺 viewport meta 或 client hints 被禁）
