关于此工具
Image Diff 完全在浏览器中逐像素比较两张图片，并精确标出差异所在。将“之前”的截图或设计稿作为图片 A，将“之后”的版本——新的截图、同一设计的实现版本，或重新导出的副本——作为图片 B 拖入。如果两张图片尺寸不同，两者都会被放到一个足以容纳较大图片的画布上；仅被一张图片覆盖的区域会被计为差异，因为尺寸变化本身就是你想要捕捉的东西。结果是一张差异图：重新渲染的图片 A，所有发生变化的像素都被涂成醒目的品红色，并附带差异像素的实时计数和百分比。
这是一个真正面向开发者的工作流：通过比较 CSS 或组件改动前后的两张截图来捕捉视觉回归问题，逐像素核对已实现的 UI 与原始设计稿是否一致，或发现同一张图片二次 JPEG/WebP 压缩带来的细微色块和条纹伪影。灵敏度阈值控制着颜色变化需要达到多大才算作“不同”——数值越低（越接近 0）越能标记出几乎任何变化，包括 1–2 比特的压缩噪声；数值越高则只标记明显可见的差异，这通常是比较同一源图两次导出结果时更需要的效果。不会上传任何内容：两张图片都通过 Canvas API 直接在你的设备上解码和比较，下载的差异图片也是以同样方式生成的。
常见问题
如果两张图片尺寸不同会怎样？
两张图片都会被放置在一个统一的画布上，该画布的大小适应两者中较大的一张，任何仅被其中一张图片覆盖的区域（因为另一张较小）都会算作差异——这能正确地将尺寸不匹配作为对比的一部分呈现出来，而不是默默地拉伸一张图片以匹配另一张（这会扭曲对比结果，并掩盖它们原本尺寸不同这一事实）。
我应该使用什么灵敏度阈值？
较低的阈值能捕捉到即使是微小、细微的差异（适用于检测压缩伪影或非常轻微的渲染变化），而较高的阈值只会标记明显不同的像素（适用于发现重大视觉变化，如元素移动或内容不同，同时忽略两张原本相同的图片之间轻微的抗锯齿/压缩噪点）。从范围中间开始，然后根据你看到的噪点过多（调高）或漏掉真实差异（调低）来调整。