17370845950

高清屏图片模糊的根本原因是1x图被拉伸，解决核心是用srcset提供多倍图让浏览器按DPR自动选择；推荐结合宽度与像素密度的srcset写法，并用picture+source做精细媒体查询控制。

图片在高清屏（如 Retina 屏、2x 屏）上模糊，本质是浏览器用 1 像素对应 2×2 物理像素渲染，但你只提供了 1x 分辨率的图片，导致系统拉伸放大、细节丢失。解决核心是：让高清屏加载更高分辨率的图片资源，同时保持普通屏不浪费带宽。

用 srcset 提供多倍图，让浏览器自动选

srcset 是最直接有效的方案，它告诉浏览器“我有多个版本的图”，由浏览器根据设备像素比（dpr）、视口宽度等自主选择最合适的资源。

• 基础写法（按设备像素比区分）：
  
  高清屏（dpr≥2）会优先加载 logo-2x.png，清晰度翻倍。
• 更推荐按宽度 + 像素密度组合（适配响应式+高清）：
  
  这样既适配不同屏幕宽度，又确保每张图在对应 DPR 下仍是“1物理像素 = 1图像像素”。

配合 media 属性做精细控制（picture + source）

当需要按屏幕尺寸、DPR、甚至横竖屏等条件组合判断时， 更灵活。它支持 media 属性，可结合 CSS 媒体查询逻辑。

• 示例：小屏用 1x 图，大屏且高清用 2x 图：
  

  
  
        
  
        
  
        @@##@@
  
      

• 注意：media 中的 min-resolution 推荐用 dppx 单位（如 2dppx），更标准；192dpi ≈ 2dppx，但 dppx 语义更准确。

图片资源本身要“够大、够清”

再好的 srcset 也救不了低质量原图。关键细节：

• 2x 图的尺寸应为 1x 图的 2 倍（比如 1x 是 400×300，2x 就该是 800×600），不是简单放大已有小图——那只是插值模糊。
• 导出时关闭“压缩过度”：WebP/JPEG 质量建议 ≥80；PNG 用无损或轻微有损（如 TinyPNG 保留细节）。
• 图标类资源优先用 SVG：矢量图天生适配任意分辨率，零模糊。

验证是否生效（别只靠肉眼）

实际加载哪张图，不能只看效果，要用工具确认：

• Chrome DevTools → Network 标签 → 刷新页面 → 筛选 Img → 查看 Size 和 Content-Type，对比请求的文件名是否为你写的 2x 版本。
• 在 macOS Retina 或 iPhone 上打开，右键「检查元素」→ 查看 的 currentSrc 属性值（控制台输入 $0.currentSrc）。
• 用 window.devicePixelRatio 在控制台确认当前设备 DPR（通常 Retina 是 2，iPhone 13 Pro 是 3）。

基本上就这些。srcset 是现代浏览器标配，兼容性到 iOS 8+/Android 4.4+ 都没问题；搭配合理的图片输出和简单 media 控制，就能兼顾清晰度与性能。不复杂，但容易忽略细节。