Show before and after with one draggable slider

Side-by-side screenshots hide subtle edits. Drop two versions, drag the slider to reveal exactly what changed, and export a shareable before-and-after PNG in seconds.

图片对比 result preview

之前

拖入「之前」的图片

之后

拖入「之后」的图片

What you can do with 图片对比

Everything this tool helps you accomplish — no learning curve, no setup.

  • Make a before-and-after slider from two images
  • Show edits with a draggable split view
  • Switch between horizontal and vertical splits
  • Swap which image sits on each side
  • Export the before/after comparison as a PNG

Settings information

Every control in 图片对比, explained — what it does and when to use it.

对比

方向预设
选择两张图片的分隔方式:“水平”(默认)将“之前”和“之后”左右并排,中间为竖向分隔线;“垂直”则将“之前”置于“之后”上方,中间为横向分隔线。选项: 水平垂直
拆分百分比SliderRange: 0–100% · 默认: 50%
设置分隔线在两张图片之间的位置,从 0(只显示“处理后”的图片)到 100(只显示“处理前”的图片);导出的合成图会沿用同一位置。
交换One-click
无需重新上传即可立即交换前后两张图片,适合放错顺序或想要翻转对比展示方向的情况;两张图片都加载完成后即可使用。
Uploads are encrypted in transitRemoved under our retention policy

常见问题

上传两张尺寸相同的图片,工具会用一个可拖动的滑块将它们叠加。向左滑动显示修改前图像,向右滑动显示修改后图像——非常适合展示修图、精修、减肥、装修、设计迭代和 AI 生成的效果对比。

usage

可以。将滑块导出为自动循环滑动的 MP4 或 GIF 动图——非常适合用于 Instagram、TikTok、X 和 LinkedIn 等观众无法拖动滑块的帖子。帧率和时长均可配置。

features

理想情况下是的,因为滑块是逐像素进行对比的。当两张图尺寸不同时,工具会自动裁剪或缩放第二张图以匹配第一张,并保持宽高比,从而确保对比准确。

technical

JPEG、PNG、WebP、GIF 和 HEIC 均可接受。导出的视频采用 H.264 MP4 以实现最大兼容性,导出的 GIF 文件足够小,便于快速分享到社交平台。

compatibility

并排对比预览在你的浏览器中完成,但导出合成图时会将两张图片上传到我们的安全服务器以渲染最终文件;之后它们会被自动删除,绝不会被分享或用于训练模型。对于绝不允许上传的高度机密材料,请对屏幕上的预览截图,而不要使用导出功能。

privacy

可以。复制生成的 HTML 代码片段,并将其粘贴到 WordPress、Webflow、Squarespace、Shopify 或任何静态网站中。该嵌入代码无依赖、适配移动端,且无需外部 JavaScript 库即可运行。

web

使用对比面板中的方向控件,在水平(左右滑动,最适合横向照片和并排布局)和垂直(上下滑动,更适合竖向长图,或装修、成长照片这类前后高度对比)之间切换。

features

分割 % 设定分隔线在前图和后图之间的位置,从 0(完全显示后图)到 100(完全显示前图)——默认为 50 即均等分割。如果你想在导出的合成图中更多地显示某张特定图像,就把它移向一侧,例如设为 70 以强调“之后”的效果。

usage

在「对比」面板中点击「交换」按钮,即可无需重新上传立即互换前后图片——如果你放反了顺序,或想翻转揭示方向以获得不同的视觉效果,这很方便。

usage

对于整间房改造,竖向布局配 50% 分割效果很好,因为它能让观众自上而下地比较地板和天花板等细节的变化。对于并排的家具或色彩变化,横向布局配 40–60% 分割(偏向效果更抢眼的那张图)往往最能吸引视线。

tips

图片对比 如何助您完成任务

它每天都在解决真实的问题——服务企业、创作者和日常任务。找到适合您的用例,几秒即可开始。

面向创作者

照片编辑前后对比展示

摄影师、修图师和 Lightroom 调色师用可拖动的对比滑块向客户展示修图前后的效果,证明这笔修图费物有所值

面向创作者

AI 图像生成对比

将 DALL-E、Midjourney、Stable Diffusion 和 Flux 的输出与原始提示词或参考图进行对比,直观展示提示词工程和模型质量上的差异

面向企业

翻新与家居改造展示

承包商、建筑师和室内设计师在 Instagram、TikTok 和项目作品集网站上,用前后对比滑块展示厨房、卫浴和整屋翻新效果

社交媒体

健身与减重前后对比

私人教练、健身指导和健身创作者发布 30 天、90 天和一整年的蜕变对比滑块,用于 Instagram Reels、TikTok 和 YouTube 吸引新客户

面向企业

产品设计迭代与 A/B 测试

产品设计师、UX 团队和营销负责人在 Figma 评审、营销演示文稿和向干系人汇报时并排比较设计方案,从而更快做出决策

面向创作者

修复与保护对比展示

艺术品修复师、老爷车精修师和照片修复专家用前后对比滑块直观展示其精心打磨的成果,从而印证工作的价值与价格

房地产

房产布置和挂牌对比

在房源照片和社交帖子中,把虚拟布置或整体翻新前的房间与之后并排展示——对于高挑的房间照片使用垂直方向,让买家一眼看到从地板到天花板的变化。

面向开发者

软件 UI 重新设计更新日志

产品和工程团队在发布说明和内部设计评审中对比应用的旧界面与重新设计后的界面,使用“分割百分比”滑块精确控制导出截图中每个版本各自显示的比例。

个人使用

护肤与牙科治疗进展

皮肤科诊所、正畸医生和护肤品牌用干净的前后对比拼图记录治疗效果,用于患者咨询和诊所营销——对比和导出完全在浏览器中完成。

教育经历

科学与课堂演示

教师导出植物生长、化学反应或侵蚀实验的前后对比合成图,用于课件幻灯片或讲义,并切换方向以匹配变化所沿的坐标轴。