图片对比找差异

改版前后导出的两张图,逐像素比一遍,哪里变了、变了多少,一眼就看得见。

一次选两张,按选择顺序分别是「改版前」和「改版后」。也可以分开拖进来两次,先拖的那张算前一张。尺寸不同会自动把后一张缩到前一张的尺寸再比。

先选第一张图(改版前)

比对之前先看这几条

阈值定得太低会满屏都是差异。重存一次 JPEG,即使只是改了质量参数,每个像素的值都会动一两个数;截图工具重新编码、显示器色彩管理稍作转换也会这样。这些差异在视觉上完全无关紧要。默认阈值 12 就是把小于 12 的单通道差值当作相同,能把这类噪声全部消掉。反过来,如果要校验逐位一致的产物(比如二进制比对),阈值设为 0。

同一张图重存一次也不一样。JPEG 解码再编码不是恒等操作,像素值会有几个数的偏移,所以「用这张图重新导出一遍」得到的文件和数据流都不相同。做改版核验时不要看到「有差异」就以为设计被动了,正确的做法是先看差异比例:低于 0.1% 基本就是编码噪声,高于 1% 才值得细看高亮图。

抗锯齿和亚像素渲染会制造大量边缘差异。浏览器渲染文字时的位置可能是小数像素,同一段文字在两次渲染中落点差 0.3 像素,边缘的灰度就会整排变化。这类差异全部集中在字形边缘、而且是不连续的细线。判断方法是把阈值调到 40 以上看差异是否大面积消失,如果消失说明本来就是渲染细节,不是内容改动。

不同尺寸的图对比只能算参考。把一张图缩放到另一个尺寸时,重采样会同时改变边缘位置和插值方式,就算内容完全一样,缩放前后也会有成片的差异。所以尺寸先对齐(这里统一缩放到第一张的尺寸),但差异数字要当作上限而不是精确值。严格核验必须保持两边尺寸一致。

透明度差异要单独判断。PNG 导出时颜色相同但 alpha 从 254 变成 255,视觉上完全看不出,却是实打实的像素差异。反之,一张带透明背景的图和一张已合成白底的图,RGB 值可能很接近但叠在深色背景上效果完全不同。默认忽略透明度差异,做设计交付核对时再打开这一项。

大图比对很吃内存。比对时会同时持有多份像素数组:两张原图各一份,加高亮图、差异图和叠加结果。一张四千乘三千的照片,每份就是 48 MB,加在一起轻松超过 200 MB。所以超过一定尺寸的图会先在画布上缩小到比如两千万像素以内再比,差异分布不受影响,只是精确定位时坐标要按缩放比例换算。