视网膜屏图片发虚主因是浏览器未获足够物理像素图：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。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 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 被禁）