Add a Before and an After image, then compare them with a slider, overlay, side-by-side, or flicker view. A magnifier shows fine detail at up to 4x.
This tool runs entirely in your browser. What you enter is never sent anywhere.Your input is never sent anywhere.
DetailsChoose both a Before and an After image to start comparing. Images are processed in your browser and are not uploaded.
Four Ways to Compare a Before and After Image
This tool puts two versions of an image in one viewer so you can see what changed. Pick the slider, overlay, side-by-side, or flicker view, depending on whether you want to inspect one spot, judge overall color, or catch tiny shifts.
A compressed or resized image can look fine at a glance and still have soft edges, blocky areas, or banded gradients. The magnifier enlarges the area under your cursor by 2x, 3x, or 4x, so you can check those spots before you publish or send the file.
The tool only compares images. It does not compress, resize, or convert them, so export your edited version first and then load the original and the result here.
Common Uses: Compression Checks, Retouching, Format Changes
Check a compressed image against the original
Load the original as Before and the compressed file as After to see whether the quality loss is acceptable for your page or email.
Review photo edits and retouching
See how color grading, sharpening, or skin retouching changed a photo by dragging the slider or crossfading with the overlay.
Compare file formats
After converting PNG to WebP or JPEG to AVIF, zoom in to check whether colors and fine detail held up.
Compare screenshots and design versions
Use flicker to find small layout, color, or text changes between two versions of a screenshot or mockup.
Share a before and after picture
Save the comparison as a single labeled PNG for a blog post, a social post, or a message to a client.
How to Compare Two Photos in 4 Steps
- Click the Before box and the After box to choose your images, or drag and drop a file onto each one.
- Choose a view: Slider, Overlay, Side by side, or Flicker.
- Drag the divider, move the overlay slider, or let the flicker view alternate between the images.
- Turn on Magnifier, pick 2x, 3x, or 4x, and move your pointer over the details you want to inspect.
Note: The images stay in your browser's memory and are not uploaded by this tool.
Limits to Know Before You Compare
- The comparison frame uses the aspect ratio of the Before image. Both images are scaled to fill it and cropped evenly from the center, so images with different shapes may lose their edges in the viewer.
- In the Slider, Overlay, and Flicker views, the magnifier enlarges whichever image is visible under the pointer (Before on the left of the divider, After on the right). In Side by side, it enlarges the image you hover over.
- The magnifier follows a mouse pointer, so it may not appear on touch-only screens.
- Very large files, such as tens of megabytes, can make the page slow on some devices.
- The saved PNG shows Before and After side by side at 640 px tall each, so its width depends on the images you loaded.
Slider vs. Overlay vs. Side by Side vs. Flicker
Match the view to what you are trying to find.
| View | Best for | How to control it |
|---|---|---|
| Slider | Inspecting one area, such as an edge, text, or a gradient, with Before and After meeting at a divider | Drag the divider or click anywhere on the image. With the handle focused, press the left and right arrow keys (hold Shift for larger steps) |
| Overlay | Judging overall color, brightness, and tone as one image fades into the other | Drag the slider from Before to After |
| Side by side | Comparing overall composition and layout with both images visible at once | Hover over either image to use the magnifier |
| Flicker | Catching small differences in color, position, or noise that are hard to see when looking at a still image | Play or pause the auto-switch, switch images by hand, and set the interval from 0.2 to 1.5 seconds |
Spotting Compression Artifacts and Retouching Changes
What to look for when you compare an original with an edited or compressed copy.
Pick the view by the type of change
Start by asking whether the change is local or global. Local changes, such as blurry edges or noise, are easiest to see with the slider and the magnifier. Global changes, such as a color shift or a brighter exposure, are easier to judge with the overlay crossfade. If you are unsure, check the same pair in more than one view.
Place the divider where quality usually drops first
Move the slider divider over text, logos, sharp edges, and smooth gradients. Near the divider, the original and the edited version sit side by side, so small differences in sharpness and edge quality are easier to notice. Then magnify the area to 3x or 4x.
Common compression artifacts to look for
Three things to check: 1) soft or ringed edges around text and logos, 2) banding in skies and other smooth gradients, and 3) visible blocks in flat or low-contrast areas. If you see them, export again at a higher quality setting and compare the new file.
Use file size alongside what you see
Once both images are loaded, the tool shows each file's pixel size and file size, plus how much smaller or larger the After file is. Try a few export settings and use the comparison to find the smallest file that still looks right to you.
Mistakes That Hide Image Quality Problems
Judging by file size alone
A file that is 80% smaller looks like a win until visitors notice soft text or banded skies after it goes live.
💡 See the solution▼
Comparing images with different shapes
The viewer crops both images to fill the Before image's frame, so a cropped edge can look like missing content or a quality problem.
💡 See the solution▼
Only looking at the whole picture
Dragging the divider quickly across the image and calling it done can miss small flaws like blurred letters or noisy shadows.
💡 See the solution▼
Loading Before and After in the wrong boxes
If the images are swapped, the edited file gets treated as the original, and your conclusions flip.
💡 See the solution▼
Checking only on a small phone screen
A flaw that is hard to see on a phone can stand out when the same image is shown large on a desktop monitor.
💡 See the solution▼
Questions About Comparing Photos
Q.How do I compare two images side by side online?
A. Add one image to the Before box and one to the After box, then choose the Side by side view. Both images appear next to each other, and the magnifier works on whichever one you hover over. If you want a closer check, switch to the Slider view and drag the divider across the area you care about.
Q.Are my images uploaded to a server?
A. No. The tool reads each file in your browser and draws the comparison there, so the images are not uploaded by the tool. They stay in the page's memory, and closing or reloading the tab clears them.
Q.Which image formats can I use?
A. Any file your browser can open as an image, such as JPEG, PNG, WebP, or GIF. Support for newer formats like AVIF depends on your browser version. If a file won't load, you'll see an error message. Converting it to JPEG or PNG first usually solves it.
Q.What happens if the two images have different sizes or aspect ratios?
A. The comparison frame uses the aspect ratio of the Before image. Both images are scaled to fill that frame and cropped evenly from the center, so edges of the After image can be cut off if its shape is different. The pixel size of each image is shown below the viewer so you can spot a mismatch. For the cleanest result, compare images with the same dimensions.
Q.Should I use the slider, overlay, or flicker view?
A. Use the slider to inspect one area, like an edge or a block of text, with Before on one side of the divider and After on the other. Use the overlay to crossfade between the two and judge overall color and tone. Use flicker to swap the images in the same spot: small shifts in color, position, or noise show up as movement.
Q.How can I check image quality after compression?
A. Put the slider divider over text edges, logos, and smooth gradients such as sky or skin, then turn on the magnifier at 3x or 4x. Look for blurred or ringed edges, visible blocks, and color banding in the gradients. The size panel also shows how much smaller or larger the After file is, so you can weigh quality against file size.
Q.Can I save the comparison as an image?
A. Yes. Click Save comparison PNG to download one PNG with the Before and After images side by side and labeled. Each image is scaled to 640 px tall and keeps its own aspect ratio, so nothing is cropped in the saved file. The PNG is created in your browser.
Your feedback
makes this tool better.
Tell us which features you'd like, what should be fixed, or which new tool you'd like to see. An engineer reads every submission and uses it to guide development.