关键要点
- 超过 75% 的移动用户和越来越多的桌面用户在 Retina 或 HiDPI 屏幕上浏览（来源：StatCounter，2025）
- 在 2x 屏幕上以 1x 分辨率提供的图片会显得模糊——这是开发者非 Retina 屏幕上看不到的缺陷
- 单元测试和功能测试不验证提供给浏览器的图片分辨率
- HiDPI viewport 上的视觉测试能够捕获用户实际看到的渲染效果，并检测尺寸不足的图片
根据 ISTQB 的定义，视觉测试是指 「通过将基准截图与应用程序的当前状态进行比较，验证软件用户界面是否按照预期的视觉规格正确显示」。
这里有一个几乎所有 Web 开发团队都忽略的问题：你的网站对大多数用户来说可能看起来很模糊，而你对此一无所知。
这不是夸张。当苹果在 2010 年随 iPhone 4 推出 Retina 屏幕时，像素比从 1x 跃升到 2x。每个 CSS 像素由四个物理像素渲染。此后，这一趋势已变得无处不在。当前 iPhone 以 3x 显示。MacBook Pro、iPad、三星屏幕、Google Pixel——全部使用 2x 或更高的比率。根据 StatCounter 2025 年的数据，超过 75% 的移动会话来自高像素密度设备。
结果就是：如果你为一个 400x300 CSS 像素的显示区域提供了一张 400x300 像素的图片，该图片在 1x 屏幕上是清晰的。但在 2x 屏幕上，浏览器必须将那 400x300 个物理像素拉伸到 800x600 个物理像素。图片变得模糊。不是灾难性的模糊——而是微妙的模糊。足以让你的 logo 失去锐度、产品照片看起来「不专业」、图标出现像素化。
最糟糕的是：你看不到这个问题，因为你可能在非 Retina 屏幕上开发，或者你的开发浏览器没有模拟实际的像素比。
Retina 问题：开发者看不到的模糊
Device Pixel Ratio 详解
Device Pixel Ratio（DPR）是屏幕物理像素与浏览器使用的 CSS 像素之间的比率。DPR 为 1 的屏幕每个 CSS 像素显示一个物理像素。DPR 为 2 的屏幕（Retina）每个 CSS 像素显示四个物理像素（2x2）。DPR 为 3 的屏幕每个 CSS 像素显示九个物理像素（3x3）。
当浏览器需要在 2x 屏幕上的 200x200 CSS 像素容器中显示一张 200x200 像素的图片时，它需要 400x400 个物理像素。如果源图片只有 200x200，浏览器会使用插值算法来生成缺失的像素。结果：一种特征性的模糊，在包含文本、细线条、logo 或图标的图片上尤其明显。
为什么开发者看不到
如果你在非 Retina 屏幕上开发（例如一台外接的 1080p 显示器），1x 图片显示得完美无缺。如果你在带有 Retina 屏幕的 MacBook 上开发，但使用 Chrome DevTools 的响应式模式进行测试，模拟的 DPR 取决于你的配置。默认情况下，Chrome 对最常见的模拟设备使用 DPR 1。
对质量感知的影响
认知心理学研究表明，图片清晰度是影响网站质量和可信度感知的最具影响力的因素之一。Google 和巴塞尔大学联合发表的一项研究（Tuch et al., 2012）表明，用户在不到 50 毫秒内就会对网站的可信度做出判断，而视觉质量是主导因素。
技术解决方案及其局限性
srcset 和 sizes 属性
HTML 的 srcset 属性允许为不同的像素密度指定多个图片版本。理论上很理想。实践中却充满陷阱：你必须为每张图片生成和维护多个版本，而你的测试流程中没有任何环节会验证 srcset 是否正确。
CSS 图片和媒体查询
对于 CSS 背景图片，常规技术使用 resolution 媒体查询。风险是一样的：遗忘或维护错误。
矢量格式（SVG）
SVG 图片天生不受 DPR 影响。但并非所有内容都能使用 SVG。照片、截图和复杂的位图插图仍然以 PNG、JPEG 或 WebP 格式存在。
手动验证的问题
所有这些技术解决方案都有一个共同的弱点：它们都不会自我验证。手动验证在理论上是可行的，但在规模化实践中是不可能的。
HiDPI 视觉测试：唯一可靠的验证方式
捕获用户实际看到的画面
一个配置为以 DPR 2 或 3 捕获截图的视觉测试工具，会像 Retina 屏幕那样精确渲染页面。如果一张图片是 1x 的而 viewport 是 2x 的，图片在截图中就会显得模糊——与用户屏幕上看到的效果完全一致。
检测分辨率回归
HiDPI 视觉测试在检测回归方面尤为有效——即 2x 图片不再是 2x 的情况。这种情况比你想象的更频繁：CMS 更新重置了图片变体、存储迁移遗漏了高分辨率版本、模板更改用简单的 src 替换了 srcset。
覆盖不同的像素比率
屏幕市场是碎片化的。当前 iPhone 使用 DPR 3。MacBook 使用 DPR 2。Android 屏幕在 1.5、2、2.75 和 3 之间变化。一次完整的视觉测试应该在多个 DPR 下捕获你的页面。
超越图片：HiDPI 还能揭示什么
高分辨率视觉测试还能揭示以下问题：在不同 DPR 下渲染方式不同的 1px CSS 边框、在 2x 下出现色带（banding）的渐变、亚像素渲染不一致的自定义字体，以及分辨率不足的 favicon。
在你的工作流中实施 HiDPI 视觉测试
从三个代表性 viewport 开始：桌面 1440px DPR 2（MacBook Pro）、移动 390px DPR 3（iPhone 14/15）、平板 810px DPR 2（iPad）。优先处理图片关键页面。每个页面的额外开销仅需几秒钟。
停止盲开发
你的大多数用户在高分辨率屏幕上浏览你的网站。如果你不在高分辨率下测试，你测试的是你的用户看不到的版本。DPR 2 和 3 下的视觉测试不是奢侈品——对于任何认真对待视觉质量的人来说，它是必需品。而且借助 no-code 工具，它触手可及：无需脚本，无需复杂配置，只需将高分辨率截图自动与你的基准截图进行比较。
常见问题
Retina、HiDPI 和高分辨率有什么区别？
这些术语描述的是同一概念，只是来源不同。「Retina」是苹果的营销术语。「HiDPI」是通用技术术语。「高分辨率」是日常用语。它们的含义都是 DPR 大于 1 的屏幕。
DPR 2 视觉测试比 DPR 1 消耗更多资源吗？
是的，但幅度适中。DPR 2 截图包含四倍于 DPR 1 的像素。实际上，每页的开销是几秒钟，配合现代压缩技术，存储空间也是可管理的。
我的网站使用 WebP 或 AVIF 图片，Retina 问题还适用吗？
适用。WebP 和 AVIF 是压缩格式，不是分辨率解决方案。一张 400x300 的 WebP 图片在 2x 屏幕上和一张 400x300 的 JPEG 图片一样模糊。
如何知道网站上哪些图片不是 Retina 分辨率？
最直接的方法是 DPR 2 视觉测试。使用配置为 DPR 2 的工具捕获页面，并与 DPR 1 基准进行比较。模糊区域在差异图中会清晰显现。
HiDPI 视觉测试能替代 srcset 吗？
不能。srcset 是代码端的解决方案。HiDPI 视觉测试是验证该解决方案是否正确工作的手段。两者互补。
除了 DPR 2，还需要测试 DPR 3 吗？
取决于你的受众。DPR 2 覆盖了最常见的情况。2x 和 3x 之间的差异比 1x 到 2x 的差异要小得多。从 DPR 2 开始，如果你的分析数据支持，再添加 DPR 3。
延伸阅读
你的用户在高分辨率下浏览你的网站。你应该以同样的方式测试它。Delta-QA 以 DPR 2 和 3 捕获你的页面，在用户看到之前检测模糊图片。