Compare Two Images Before and After
Load two versions of the same image and sweep a divider across them — the fastest way human eyes catch compression damage, retouching drift or render regressions. When the inspection is done, export the pair as one side-by-side PNG to share. Local and free.
Loading the tool…
How it works
- Drop the "before" image on the left target and the "after" on the right.
- Drag the divider — or use arrow keys — to sweep between versions.
- Park the divider on suspect regions: edges, text, skin, sky gradients.
- Export a side-by-side PNG when you need the comparison in a document.
Worth knowing
A wipe comparison beats flipping between tabs because your eye holds a fixed anchor while content changes across the line. Compression artefacts announce themselves at the boundary: ringing around text, blocking in flat skies, smeared fine texture. Two seconds of sweeping settles arguments that paragraphs of quality-setting talk cannot.
The classic inspection targets: hard edges and lettering (where JPEG ringing concentrates), smooth gradients (where banding and blocking appear first), fine repetitive texture like fabric or foliage (the first thing encoders smooth away), and faces (where retouching or model-based processing shows as plastic skin). Park the divider mid-feature rather than sweeping fast — the discontinuity along the line is what your visual system is built to catch.
The exported side-by-side is deliberately a plain PNG: it drops into a pull request, a client email, a bug ticket or a slide without any viewer requirement. Both halves are scaled to matching height with a thin separator, and PNG is used so the export itself adds no compression artefacts to a comparison about compression artefacts.
Nothing requires the two images to be versions of the same shot — the slider works equally well for two crops, two edits, or two products photographed identically. It simply works best when geometry aligns, since the wipe then reads as one image transforming rather than two images swapping.
The wipe layout works because the human visual system is exquisitely sensitive to discontinuities along a moving edge — differences that are invisible when images are viewed sequentially become obvious at the divider line.
What this tool will not do
- It will not auto-align mismatched images; if the two versions differ in crop or scale, align them first or the wipe reads as a jump.
- It produces no difference metrics — this is a tool for eyes, not a PSNR calculator.
Questions people ask
How do I compare JPEG quality settings visually?
Export the same source at the two settings, load both here, and park the divider on text edges and sky. If you cannot find the boundary at 100% view, the lower setting is free savings.
Can I compare images of different sizes?
Yes — both are displayed at matched height. For pixel-level judgement, though, compare same-dimension versions; scaling hides exactly the artefacts you are looking for.
Is there a keyboard control for the slider?
The divider takes focus and moves with the left and right arrow keys in small steps — useful for nudging precisely onto an edge.
Why export as PNG rather than JPEG?
A comparison image that adds its own compression would contaminate the evidence. PNG is lossless, so the export shows exactly what you inspected.
Can I use this for retouching approval with clients?
That is one of its best uses: send the side-by-side, or walk the client through the wipe live. Approvals go faster when the difference is visible instead of described.
Usually the next step
More in Inspect & Developer Utilities
This page processed nothing on any server — there is no server. The technical explanation.