截图对比：Pixel Diff、pHash 和 SSIM 简单解释

截图对比是视觉测试工具用来确定同一网页的两张截图是否相同的算法过程——如果不同，差异有多大、在哪里。

每个视觉测试工具背后都有一个或多个图像对比算法。三种方法主导市场。每种方法都有不同的哲学，理解这些差异将帮助你选择正确的工具——或理解为什么你当前的工具产生令人沮丧的结果。

Pixel Diff：数点

pixel diff 是最直接的方法。算法取两张相同尺寸的图像，遍历每个像素，比较颜色值（红、绿、蓝、透明度）。如果值不同，像素就被标记为"不同"。

想象两张相同的方格纸，除了有人在第二张上把 3 个方格涂红了。pixel diff 会准确找到这 3 个方格。

算法产生两个东西：不同像素的数量（或百分比），以及一张差异图像，差异区域被红色着色。

它简单、快速、确定性。但很粗暴。文本上轻微的抗锯齿变化——肉眼不可见——可能会将数百个像素标记为"不同"。测试白白失败。要理解 pixel diff 的局限，请参阅我们关于逐像素对比 vs 感知对比的文章和我们关于减少误报的指南。

pHash (Perceptual Hash) 采取根本不同的方法。它不是逐像素对比，而是将每张图像简化为一个简短的"指纹"——通常 64 比特——捕捉全局视觉结构。

把它想象成一首歌的旋律。即使用钢琴、吉他演奏或被走调地唱，你也能识别"国歌"。旋律相同——细节改变。pHash 对图像也是如此。

算法将图像缩小到非常小的尺寸（例如 32x32 像素），转换为灰度，应用一个数学变换提取低频（全局结构），并产生一串比特。

两张视觉上相似的图像会有相近的指纹。指纹之间的"距离"（不同比特数，称为汉明距离）衡量相似度。

优点：免疫微变化（抗锯齿、轻度压缩、调整大小）。问题：对细节不够精确。微妙的颜色变化或 5 像素的偏移如果全局结构保持相似，可能会被忽略。

SSIM (Structural Similarity Index Measure) 是三种方法中最复杂的。它既不单独对比像素，也不全局对比图像——而是按三个感知标准对比图像区域。

亮度：区域同样明亮吗？对比度：亮度变化是否相似？结构：像素模式是否以相同方式排列？

算法用滑动窗口遍历图像，并为每个区域计算这三个度量。结果是 0 到 1 之间的分数——越接近 1，图像在感知上越相似。

SSIM 分数 0.99 表示"对人类来说几乎相同"。分数 0.95 表示"可见但小的差异"。低于 0.90，差异显而易见。

优点：这是最接近人类感知的方法。容忍渲染变化而不掩盖真正的变化。问题：比 pixel diff 慢，容忍阈值需要仔细校准。

pixel diff 错过上下文。它不知道一个不同的像素是否重要。抗锯齿变化和消失的按钮产生相同类型的警报。

pHash 错过细节。它的优势（整体视图）也是它的弱点。微妙的变化——略大的字体、修改了 2px 的间距——会逃过雷达。

SSIM 是最佳折中，但需要细致的阈值校准。太严格，行为像 pixel diff。太宽松，让回归通过。

存在第四种方法，根本不对比图像。结构分析直接对比计算的 CSS 属性和 DOM。这就是 Delta-QA 用其 5 阶段算法所做的。

它不问"像素相同吗？"，而是问"每个元素的 CSS 属性相同吗？"。font-size 变了吗？margin 移动了吗？颜色不同吗？

它更精确（与渲染相关的零误报）和更有信息量（我们确切知道什么变了多少）。但它也更复杂实现。

你的选择取决于上下文，而非数学：

pixel diff 最快。pHash 因为变换稍慢。SSIM 最慢，因为它用滑动窗口遍历图像。

良好校准模式下的 SSIM。pHash 也擅长忽略噪声但可能错过细节。pixel diff 产生最多误报。

并非总是。一些组合 pixel diff + SSIM。其他在上面添加 AI 层。Delta-QA 使用不依赖图像对比的结构方法。

仅当变化显著时。从深蓝过渡到稍亮的蓝可能会被忽略。从蓝过渡到红会被检测到。

严格回归测试：0.99。带噪声容忍的监控：0.95-0.97。低于 0.95，你冒着错过真正回归的风险。

不。对于绝对视觉精度很重要的情况（标志、图标、像素完美设计），pixel diff 仍然相关。其余情况，感知或结构方法通常更合适。

Pixel diff 告诉你某事变了。pHash 告诉你整体上视觉是否不同。SSIM 告诉你对人眼有多不同。结构分析告诉你确切什么变了和为什么。四种方法，四个层次的答案。正确的选择取决于你问的问题。