从相同场景、布局、视口或导出工作流程中的匹配基线和更改文件开始。
精确更改区域的像素检查
图像差异检查器可以定位两个相关图像之间的差异。它适合 UI 屏幕截图检查、产品润饰检查、压缩导出检查以及滑块中容易错过的微小视觉变化。
该工具比较共享画布上浏览器解码的像素。一旦最大的红色、绿色、蓝色或 Alpha 通道增量超过所选阈值，像素就会被视为已更改。
工作流程
差异检查顺序
首先加载基线图像
使用原始的、先前的屏幕截图或参考导出作为基线图像。清晰的基线使像素数的变化更容易被发现。
第二次加载更改后的图像
使用新的屏幕截图、编辑的照片、优化的图像或导出的变体作为更改后的图像。不匹配的尺寸需要在度量检查之前进行对齐检查。
运行突出显示差异
突出显示差异标记更改的区域并填充度量卡。滑块、并排和叠加视图可验证视觉上下文中突出显示的结果。
刻意调整阈值
较低的阈值可以捕获微妙的变化。较高的阈值会忽略压缩噪声、微小的光照变化和抗锯齿。更改阈值后更新差异。
阈值
如何选择差异阈值
该阈值设置更改像素的通道差异截止值。不存在普遍的最佳数值；将值与检查任务相匹配。
8
严格的用户界面检查
尝试使用 8 来获得应该清晰可见的小屏幕截图更改。
按钮标签从“保存”更改为“应用”。
图标轻微移动、细边框消失或文本间距发生变化。
该值还可以捕获文本和边缘周围的微小渲染噪声。
18
照片细节精美
尝试使用 18 进行图像编辑，只有仔细观察才能看到。
产品阴影变得更柔和，面部修饰去除了小痕迹，或者织物纹理发生了变化。
照片看起来几乎相同，但高光、反射或色块经过编辑。
适合仔细检查。
32
平衡默认
大多数比较都从 32 开始。
着陆页屏幕截图包含文本和照片。
再次导出产品图像，或者需要快速检查其他工具的预览。
数值调低可获得更严格的检查；文件本身噪点较多时可调高。
64
主要可见变化
尝试 64 以关注明显的变化。
更换背景、移动对象、更改裁剪或出现强烈的颜色变化。
JPEG 或 WebP 导出的噪点很小，但检查只关心人们快速注意到的变化。
小文本、精细图标和细线边框可能不再引人注目。
指标
如何读取图像差异指标
改变像素
高于当前阈值的可比较画布像素数。该值在很大程度上取决于阈值和对齐。
更改的像素百分比
更改的像素除以所有可比较的像素。它有助于比较具有不同图像尺寸或裁剪区域的两次运行。
平均 RGB 增量
RGB 通道的平均绝对差。即使变化面积百分比很小，这里也会显示出广泛的颜色或亮度变化。
RMSE
RGB 均方根误差。较大的局部差异比微小的分散差异对 RMSE 的影响更大。
PSNR
峰值信噪比。 PSNR 越高，通常意味着 RGB 信号中的图像越接近； PSNR 越低意味着误差越明显或可测量。
常见陷阱
需要再次查看的差异结果
图像略有偏移
1 像素的偏移可以照亮许多区域，即使图片看起来几乎相同。打开 叠加 并检查主边缘是否对齐。
图像尺寸不匹配
不同的宽度或高度使得比较不那么直接。使用视觉视图找到可见的变化，然后裁剪或导出匹配的尺寸以获得更清晰的指标。
出现压缩噪点
JPEG 和 WebP 导出通常会在平面颜色和边缘上添加微小的斑点。如果检查是关于可见编辑的，则提高阈值。
渲染期间文本边缘发生变化
浏览器、字体或导出更改后，字体、图标和矢量边缘可能会出现略有不同的像素。使用较低的阈值进行屏幕截图质量检查，然后通过眼睛确认突出显示的区域。
使用案例
查看本指南的任务
UI截图回归检查
图像压缩质量对比
产品照片修饰检查
编辑检查之前和之后
布局或导出差异较小
试用
阅读指南后打开工具
加载基线图像和更改的图像，运行突出显示差异，然后调整阈值，直到突出显示的区域与检查任务匹配。
常见问题
使用图像差异检查器
我应该在图像差异检查器中使用什么阈值？
从 32 开始进行一般检查。使用 8 进行严格的同尺寸屏幕截图检查，使用 18 进行精细的照片细节，使用 64 进行较大的可见更改。
是什么在相似的图像中产生了许多变化的像素？
小的对齐偏移、抗锯齿、压缩噪声、颜色配置文件差异和微小的照明变化都可以算作更改的像素。使用叠加视图和阈值调整来了解结果。
RMSE 和 PSNR 是否比更改像素百分比更好？
他们回答了不同的问题。更改的像素百分比显示有多少区域超过了阈值，而 RMSE 和 PSNR 总结了可比画布上的 RGB 误差。
我的图像数据安全吗？
是的。图像预览和像素比较在浏览器本地运行。差异不需要服务器上传，因此您的图像数据保留在活动浏览器会话中。