Image Compare Slider

图片对比工具可直观比较两张图片的差异，支持并排对比、滑动对比（滑块切换）、叠图对比（调整透明度）和差异高亮等多种对比模式。该工具帮助设计师和开发者快速识别两张图片之间的细微变化，如视觉效果调整、压缩前后质量差异、或 UI 版本的迭代变更。

图片对比在设计和开发中有广泛应用：UI 设计师使用它对比设计稿与实际实现的差异（像素级对比）、前端开发者在图片压缩优化后对比质量损失、QA 测试人员对比不同分辨率的渲染效果、产品经理对比 A/B 测试中的 UI 变体、以及技术文档中展示"修复前 vs 修复后"的效果。

对比过程中如需调整图片，可使用 图片格式转换器 统一格式。图片压缩器 可用于预处理对比素材。文本差异对比工具 提供了文本内容对比的类似功能。图片裁剪器 可统一两张图的尺寸。

图片对比的几种实现方式：并排对比最简单，将两张图放在左右两侧。滑动对比使用 CSS clip-path 或 overflow hidden 技术，通过滑块控制露出第二张图的部分。差异对比通过像素级算法（如 pixelmatch）逐像素计算两张图的差异，将不同的像素用特定颜色（如红色）标记。计算过程需要先对齐两张图的尺寸，逐像素比较 RGB 值，差异大于容忍阈值的像素标记为不同。

• 尺寸不一致：如果两张图片尺寸不同，滑动对比和叠图对比效果会很差。差异对比模式下需要先缩放到相同尺寸。
• 容忍度阈值：像素差异比较需要设定容忍阈值。阈值太低会产生大量噪声差异，太高会漏掉真实的细微变更。
• 抗锯齿差异：浏览器渲染的细微抗锯齿差异可能导致像素对比产生大量"假阳性"，需要合适的容忍度或忽略这些区域。
• 色彩空间：确保对比的两张图使用相同的色彩空间（sRGB vs Display P3），否则所有像素都会标记为不同。

在视觉设计审查、UI 还原度验证或快速效果对比时使用此工具。适合设计师和前端开发者的协作场景。对于需要集成到 CI/CD 管道的自动化视觉回归测试，推荐使用 Playwright 的 toHaveScreenshot、BackstopJS 或 Percy 等工具，它们提供自动化批量对比、基线管理和持续集成支持。