Before / After Comparer

📖 Tool Introduction

The Before / After Comparer is an online colour-grading assistant that places the original image and your tweaked version side by side inside a single frame, so the difference is impossible to miss. Anyone who has ever edited a photo knows the awkward moment: you nudge a slider and then wonder whether the picture actually looks brighter, flatter, more vivid or more washed out. This tool solves that by drawing a white divider straight down the middle of the image. The left half always shows the untouched original, while the right half updates in real time as you adjust things. Press and drag the divider left or right and you can scrub across the boundary pixel by pixel, exactly like the comparison slider found in professional editing software, observing how brightness, contrast and saturation change the photograph. Three sliders sit in the panel below, each ranging from fifty to two hundred percent; as soon as you move one, the preview re-renders instantly with no confirmation button to press. If you go too far, a single Reset returns every control to its default value. All rendering is done locally in your browser through the Canvas filter engine, so your photos never touch a server, and when you are happy you can export the whole adjusted image as a PNG in one click. Whether you are evaluating a look, weighing two editing ideas, or walking a colleague through the difference a grade made, this tool makes the change visible at a glance, and it works just as well on a phone screen as on a desktop display because the divider is driven by pointer events rather than a mouse-only gesture. You can come back and adjust the grade at any time: every slider movement rebuilds the off-screen canvas from the original pixels, so you never accumulate generations of quality loss the way repeated exports in a traditional editor would.

✨ Key Features

• Draggable divider: press and drag on the image to move the comparison boundary
• Live colour grading: brightness, contrast and saturation sliders update instantly
• Badged sides: Original on the left, Result on the right, so you never mix them up
• One-click reset: return all controls to 100% whenever you want to start over
• Local rendering: Canvas filters with automatic downscale to 1600px to save memory
• High-resolution export: download the full adjusted PNG when you are done

📝 How to Use

1. Drop your image onto the dashed area, or click it to choose a file
2. Press and drag across the image to move the white divider between the two halves
3. Drag the brightness, contrast and saturation sliders to fine-tune the right side
4. Click Reset params whenever the grade feels overdone
5. Click Download result to save the finished adjusted image

⚠️ Notes

• Gestures: drag directly on the image; touch input is fully supported
• What is exported: the download is the whole adjusted image, not a screenshot of the split
• Large images: pictures wider or taller than 1600px are downscaled to protect memory
• Slider range: brightness and contrast run from 50% to 200%, saturation from 0% to 200%
• Privacy: your image never leaves the browser, so sensitive photos are safe