图片差异对比
Image Diff
逐像素比较两张图片,标出改动的地方并给出感知差异分数。
两张本该一模一样的截图,以及它们到底一不一样的问题。单靠变化像素数回答不了——抗锯齿会改变几千个像素而毫无意义——所以这个工具在它旁边报告 SSIM 和 DSSIM,并给你四种看差异的方式。
把“改动前”的图片放到这里
浏览器能解码的格式都行。
把“改动后”的图片放到这里
浏览器能解码的格式都行。
怎么用
拖入前后两张
接受不同尺寸:两张都用透明填充到并集,所以重叠部分正确比较,不重叠的部分显示为差异——它本来就是。
设容差
在 YIQ 里度量,所以同样幅度的亮度变化大约算色相变化的 2.5 倍——这是眼睛给它们的排序。设为 0 时任何地方差一个编码值就算失败。
把两类数字放在一起读
2% 像素变化、SSIM 0.999 是抗锯齿。2%、SSIM 0.94 是有东西在动。
小位移用擦除对比
它把两个版本放在同一个视网膜位置上,这是亚像素位移变得可见的唯一办法——眼睛没法把那么多细节带过并排比较所需的那次扫视。
常见问题
多少 SSIM 算好?
0.99 以上,两张是同一幅画面加上渲染噪声。0.95 以下,确实有东西不同。没有通用阈值;对照你自己流水线里一对已知正常的图来比。
为什么 DSSIM 和 SSIM 不一样?
DSSIM 在 L*a*b* 里跨五个尺度做同样的结构比较,所以纯颜色变化也算数,某个缩放级别上的差异也藏不到另一个后面。两者不一致时,变化是颜色而不是结构。
能用它做视觉回归测试吗?
用来查看一次失败,能——四个视图就是为此。要在 CI 里跑比较,你需要的是测试运行器里同样的算术,而不是一个浏览器标签页。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
图片裁剪
Image Cropper
按自由比例或固定比例裁剪,也能自动裁掉纯色和透明的边缘。
PDF 文档对比
PDF Compare
从文字和渲染像素两个方向比对两份 PDF,列出新增、删除和移动的内容。
PNG 压缩
PNG Compressor
量化调色板并重写 deflate 数据流,在不改变尺寸的前提下减小 PNG 体积。
图片抠图去背景
Background Remover
在 OKLab 色彩空间中抠掉纯色或均匀背景,输出透明 PNG,并可用画笔修补边缘。
EXIF 信息清除
EXIF Remover
删掉照片里的相机、GPS 和编辑记录等元数据,像素本身分毫不动。
Favicon 网站图标生成
Favicon Generator
一次生成整套图标——ICO、各尺寸 PNG、苹果触摸图标、web manifest——外加可直接粘贴的 HTML。