使用“对比图像”通过滑动、并排、叠加或差异热图来检查前后对比。对齐第二张图像,通过同步缩放检查两者,并导出您需要的视图。此示例对比了两个拥有精确像素统计的设计修订版。 打开 图像对比.
按一致顺序加载两个版本
打开“对比图像”并选择两个文件,或打开示例以加载两个设计修订版样本。A 为第一张图像,B 为第二张图像。
第一张图像决定了对比框架。在本示例中,两个源图像均为 1200 × 850 像素,因此使用“原始像素 · 居中”并设置 100% 的第二图像缩放比例和零偏移,即可在不调整大小的情况下对比匹配位置。
输入可以是 JPG、PNG、WebP、GIF 或 BMP,每个文件最大 25 MB。该工具仅接受两张图像进行对比。动画输入将使用其第一帧静态图像。
为了公平的导出对比,请尽可能使用相同的裁剪和尺寸。即使内容未变,偏移的图像也可能产生较大的像素差异。
使用正确的视图检查这对图像
“滑动”以横跨图像的分割线开始。在 100% 视图缩放比例下拖动它,或使用“显示/叠加”来移动边界。示例修订版更改了标题、按钮和小的插图细节。
“并排”显示两个完整对齐的框架。“叠加”将它们混合,这使得偏移的边缘很容易被发现。“差异”显示强度热图而非源颜色。
视图缩放范围从 100% 到 400%;拖动放大视图以进行平移。两张图像会同步移动。缩放仅影响检查过程,因此保存的对比图仍包含完整的框架。
使用“滑动”进行设计审查,“叠加”用于对齐,“差异”用于微小的像素变化。
本指南中的示例
两个 1200 × 850 PNG 设计修订版;原始像素 · 居中;第二张图像缩放 100%;零 X/Y 偏移;差异容差 0%;差异视图;PNG 导出。
- 比较网格
- 1200 × 850 / 1,020,000 像素
- 已更改像素
- 35,683 / 约 3.50%
- 平均 RGB 差异
- 约 1.08%
- 输出
- 1200 × 850 PNG 热力图
对齐并解读测量结果
当尺寸不同时,“第二图像对齐”提供“原始像素 · 居中”、“适合第一张图像”和“填充第一张图像框架”。使用缩放和像素偏移进行更精细的调整。第一张图像框架之外的内容将被排除。
对于这对图像,请保留原始像素默认值并将差异容差设为 0%。实际测量结果显示在 1,020,000 个像素中有 35,683 个像素发生了变化,约占 3.50%。平均 RGB 差异约为 1.08%。
“变化像素份额”统计的是最大 RGB 通道差异超过容差的像素。平均 RGB 差异衡量的是所有对比像素的平均绝对通道变化,即使提高容差,该值也不会消失。
透明度在白色背景上合成。大于 16 兆像素或单边超过 8192 像素的网格会被缩小并明确标记为已重采样。缩放源图像也会产生重采样测量值。这些数字是像素比较,而非感知质量评分。
JPEG 压缩会改变许多细微的像素值。容差设置可以抑制这些微小变化,但无法判断设计修订版是否更好。
导出单张对比图
选择“差异”,选择 PNG 并点击“开始”进行示例演示。“下载”将保存上方比较中显示的实际 1200 × 850 热力图。
“之前”面板并排显示了两个源设计;这是为本文制作的对照表。“之后”面板是实际导出的热力图。深色区域表示变化未超过零阈值;彩色区域显示差异。
其他视图模式会导出其对应的合成图。并排视图使网格宽度加倍,而滑动和叠加视图保持单帧。导出网格限制为 16 兆像素,允许双面板结果最大达到 32 兆像素。
保留两张原始图像以备后续工作。输出的是扁平化的 PNG 或 JPG 比较图,而非可编辑的项目,且查看器缩放不会裁剪导出结果。
如果您需要精确的文件一致性检查,像素比较是不够的:元数据、编码以及测量帧之外的像素可能存在差异。
常见问题
0% 的更改意味着文件完全相同吗?
这意味着测量的对齐像素未超过您的容差。文件在元数据、编码、透明 RGB 值或测量框架之外的内容上仍可能存在差异。使用零容差来检测每一个表现出的 RGB 差异。
我可以比较不同尺寸的图像吗?
可以。选择第二张图像如何适应第一框架,并调整其缩放或偏移。界面会标记重采样测量值,第一框架之外的任何内容都会被排除。
为什么 JPEG 看起来一样却显示有更改?
有损编码可能会改变图像中微小的像素值。提高差异容差以排除微小的通道差异,同时请记住,平均 RGB 差异仍会报告所有测量的差异。
导出结果包含我缩放后的裁剪区域吗?
不包含。查看器缩放和平移仅用于检查。下载内容使用所选视图中的完整比较框架。
图像差异是使用人工智能计算的吗?
不是。该工具在您的浏览器中计算绝对 RGB 像素差异。它不使用语义识别,也不声称提供感知相似度评分。
我可以导出并排比较吗?
可以。在开始前选择“并排”。它将两个对齐的框架导出为一张 PNG 或 JPG 图像,宽度为比较网格的两倍。查看器缩放不会对其进行裁剪。
制作您自己仔细检查过的结果
尝试示例或使用您自己的文件,并在分享前检查结果。