前后对比截图

前后对比截图是针对同一对象的一对图像，一张在变更前截取，一张在变更后截取。两张图并排、上下排列，或以带滑块的叠加方式展示，差异一眼可见。

公平的对比要求除变更本身之外的一切保持不变。两张图需要相同的截取区域、视口尺寸、像素密度、滚动位置和应用状态，例如登录同一个账号、使用同一份测试数据。即使第二张图只偏移了几个像素，在像素对比中未变化的内容也会显示为差异。

前后对比为何重要

单张截图展示的是一种状态。一对截图展示的是变化，而评审者、客户和管理者通常需要据此做出判断。它还记录了变更前屏幕的样子，这在事后很难重现。

前后对比截图的使用场景

• 展示界面改版的发布说明和更新日志。
• 缺陷报告和修复确认。
• 设计评审和无障碍评审，例如对比度修复。
• 面向客户的网站更新报告。

如何截取有效的前后对比图

1. 在任何变更上线之前，先截取“变更前”的图像。
2. 记录设置：窗口尺寸、区域、缩放级别、主题和测试数据。
3. 使用相同设置截取“变更后”的图像。
4. 以相同格式导出两张图，并配上对应的标签展示。

对于网页，用相同的 URL、Device 和 Area 设置运行两次 Temposhot Website Capture。对于桌面应用，在 Auto Capture 中使用 Custom Area 截取源。选择器会在已保存的区域上重新打开，因此第二次截图使用同一个矩形。

常见错误

• 将 Retina 截图与 1x 截图对比。两者每个像素的大小都不同。
• 两次截图之间更改了浏览器缩放、主题或窗口尺寸。
• 直到变更上线后才想起要截取“变更前”的图像。
• 两张图的裁剪方式不同。

需要反复截取同样的画面？

在 网站截图自动化 中保存 URL 列表，每次发布前后各运行一次。

常见问题

对比图应该用 JPG 还是 PNG？

用 PNG。有损压缩会引入细微差异，并在像素对比中显现出来。

如何找出细微的差异？

将两个文件载入 Compare Images，即可高亮显示发生变化的像素。

参考资料

• Screenshot（维基百科）

相关资源

• Website Capture 选项：设备、区域和等待设置。
• 截取源：重复使用已保存的 Custom Area。
• Stitch Screenshots：将两张图像合并为一个文件。