跳转到主要内容
Develop Tools
← 返回使用指南

如何逐像素比较两张图片

检查 UI 变更、图片编辑结果或截图回归时,差异视图可以发现肉眼难以察觉的 1 像素偏移和颜色变化。

对齐两个图像、左右排列并检查重叠和差异的过程。
对齐两个图像、左右排列并检查重叠和差异的过程。

如何使用不同的比较方法

显示方式容易发现差异
左右并排主要布局更改、省略、添加
滑块边界位置、尺寸和裁剪范围的差异
半透明叠加几个像素未对齐、缩放
差异高亮颜色、轮廓和逐像素变化

比较程序

  1. 将参考图像加载到左侧,将比较图像加载到右侧。
  2. 如果尺寸不同,请检查差异是故意的还是由于存储条件造成的。
  3. 使用滑块和透明覆盖层检查位置偏移,然后切换到差异强调。
  4. 确定不可接受的差异的位置和原因,并在必要时保存生成的图像。

容易造成差异的因素

即使在同一屏幕上,文本的轮廓和阴影也可能会根据操作系统、浏览器、字体、放大倍率、GPU 和拍摄时间的不同而发生变化。比较网页时,固定屏幕尺寸和放大倍数。

JPEG 每次保存时压缩伪影都可能发生变化,因此精确的像素比较更适合使用 PNG 等无损格式。

不要仅因为差异率不是 0% 就判定失败。请确认差异出现的位置和外观是否在可接受范围内。

在浏览器中试用

输入内容仅在浏览器中处理。请保留原始数据,确认结果无误后再保存或分享。

打开图像差异比较工具