图片对比与差异检测

两张图到底哪里不一样？并排看、滑动叠加看，或者让工具把每个变化的像素标出来。

图片不上传

导入两张图片

A 通常是原稿，B 是修改后的版本。两张图尺寸不同时，默认把 B 拉伸到 A 的尺寸再比较，也可以改成裁切填满。

常见问题

两张图尺寸不同怎么办？

默认把 B 拉伸到 A 的尺寸再比较，也可以改成按填满裁切。对比以 A 为基准，长边最多 1600 像素。

为什么整张图都是差异？

通常是 JPEG 重新压缩带来的 1 到 5 级噪声。把阈值调到 10 左右即可忽略这类干扰。

差异占比代表什么？

代表超过阈值的像素比例，用来判断改动幅度。它只说明像素有差别，不代表哪一张更好。

会上传图片吗？

不会。像素比较全部在浏览器本地完成，图片不经过服务器。

两个文件到底差在哪

设计稿改了一版、修图导出了两次、素材从不同渠道拿了两份——肉眼很难确认差异。这个工具提供三种对比方式：并排看整体、滑动叠加看同一位置、像素差异高亮看具体改了哪里，并给出差异像素占比与平均差值，让「有没有改动」变成可核对的结果。

并排对比

左右放置两张图并标注 A、B，适合看构图、色调与整体差异。

滑动叠加

拖动分隔线，同一位置来回切换，细微位移一眼可见。

差异高亮

逐像素比较 RGB 通道，超过阈值的像素标红，未变化区域压灰。

可调阈值

压缩噪声会让整张图都是「差异」，把阈值调到 10 左右即可过滤。

差异统计

给出差异像素数与平均通道差值，用于判断改动程度而不仅是「有变化」。

本地计算

像素比较完全在浏览器里完成，图片不上传。

这些场景最常用

  1. 设计稿验收：开发实现的截图与设计稿对比，差异高亮能直接指出圆角、间距、颜色的偏差位置。
  2. 修图前后对比：滑动叠加看磨皮、锐化是否过度，边缘是否出现光晕。
  3. 素材去重前的核对：两张看似相同的图，用差异高亮确认是否真的完全一致。