在线图片对比工具：像素级差异、高亮标记和滑块对比
这个图片对比工具用于比较两张图片的视觉差异，适合设计稿验收、网页截图回归测试、UI 改版检查、海报版本对比、商品图修图前后对比等场景。上传两张 JPG、PNG、WebP 或 BMP 图片后，工具会在浏览器本地读取像素，生成差异高亮图，并给出不同像素数量、差异比例、对比画布尺寸和原图尺寸是否一致等统计信息。
这个工具可以对比出什么
图片对比的核心是像素级比较。两张图在同一位置的颜色、透明度或内容不同，就会被标记为差异。常见可发现的问题包括：
- 页面截图中按钮、文字、图标、边距、阴影或背景颜色变化
- 设计稿导出前后出现的错位、缺失、裁切或缩放问题
- 图片压缩、格式转换后产生的颜色损失和细节变化
- 产品图、证件图、海报图修图前后的局部变化
- 自动化截图测试中出现的 UI 回归问题
工具默认使用差异高亮视图，不同区域会以醒目的颜色标记；也可以切换到滑块对比视图，拖动滑块在两张图之间快速切换，适合人工检查整体视觉变化。
如何使用图片对比工具
- 上传左侧图片，通常可以放旧版本、基准图、设计稿或原始截图。
- 上传右侧图片，通常可以放新版本、实际截图、修改后图片或压缩后图片。
- 根据图片情况设置差异阈值。阈值越低越敏感，越容易标出微小颜色差异；阈值越高越能忽略轻微压缩和抗锯齿差异。
- 如果是网页截图或文字较多的图片，建议开启“忽略抗锯齿”，可以减少字体边缘产生的大量噪点。
- 如果两张图片尺寸不同，可以选择居中对齐、左上角对齐或拉伸到第一张图尺寸后对比。
- 点击开始对比，查看差异高亮图、滑块对比和差异统计。
- 需要留档时，可以下载差异高亮 PNG。
对齐方式怎么选
如果两张图片尺寸一致，居中对齐和左上角对齐通常结果相同。如果尺寸不同，选择方式会影响对比结果：
- 居中对齐：适合设计稿、海报、截图整体居中但画布尺寸不同的情况。
- 左上角对齐：适合网页截图、App 截图、从左上开始布局的 UI 页面。
- 拉伸到第一张图尺寸：适合两张图比例接近，但导出尺寸不同，需要先统一尺寸再看视觉差异的情况。
如果两张图本来不是同一尺寸或同一缩放比例，像素差异会明显增多。做截图回归测试时，最好保持同一浏览器、同一设备像素比、同一窗口尺寸和同一字体环境。
差异阈值和抗锯齿说明
图片对比并不是只看“内容是否一样”，而是比较每个像素的颜色值。浏览器渲染、系统字体、阴影、圆角、图片压缩都会造成微小差异。差异阈值可以控制敏感度：
- 0.00 到 0.05：非常敏感，适合 PNG 截图和严格视觉回归。
- 0.06 到 0.15：适合大多数网页截图和设计稿对比。
- 0.16 以上：适合 JPG 压缩图、社媒图片和轻微色差容忍场景。
开启忽略抗锯齿后，工具会尽量减少文字边缘和斜线边缘造成的误报，但它仍然是像素工具，不会理解图片语义。
隐私和性能
图片读取、像素对比和差异图生成都在当前浏览器完成，图片不会上传到服务器。超大图片会占用较多内存，因为对比时需要同时保存两张图和一张差异图的像素数据。如果图片特别大，建议先压缩或调整尺寸后再对比。
适合的关键词场景
图片对比、图片差异对比、像素对比、截图对比、设计稿对比、UI 回归测试、图片 diff、image compare、pixel diff、visual regression test。