Image Comparison Slider

How to use

1. 1Drop or pick a Before image and an After image. Drag-and-drop and the file inputs both accept PNG, JPEG, WebP, AVIF, GIF, BMP, and SVG up to 25 MB per file.
2. 2Use the Try samples button if you want to see the slider work before loading your own images. Both pictures stay in your browser at every step.
3. 3Pick a View mode: Slider for a draggable divider, Side by side for two panes shown together, or Toggle to flip the visible image with a click or the space bar.
4. 4In Slider mode, switch the Divider orientation between Vertical (drag left and right) and Horizontal (drag up and down), and drag the round handle to wipe one image over the other.
5. 5Use the arrow keys when the handle is focused for fine control. Press PageUp or PageDown for ten-percent jumps and Home or End to snap to the edges.
6. 6Click Swap before and after to flip which image is the baseline, or Reset to center to put the divider back at fifty percent.
7. 7Click Download composite PNG to save a flattened image with the divider baked in, or Copy HTML embed for a tiny snippet that recreates the layout on any page.

About this tool

Image Comparison Slider lets you load two pictures in your browser and reveal the differences with a draggable handle. The default slider mode stacks the after image on top of the before image and clips it with a CSS clip-path that follows the divider, so dragging left and right (or up and down with the horizontal orientation) wipes one image across the other. A side-by-side mode shows both pictures next to each other for layout reviews where the eye scans across rather than under a split, and a toggle mode flips between the two on click or space-bar press so subtle color and weight changes pop the way they do in flicker tests. Both files are read locally through a file input or a drag-and-drop area and rendered with object URLs, so neither picture is uploaded to a server. The tool surfaces each image's pixel dimensions, file size, and nearest standard aspect ratio, and warns when the two images do not share the same aspect ratio so you can resize one of them before comparing. Output options include a composite PNG that bakes the current divider position into a single file (useful for embedding in a doc or a post) and a small copyable HTML snippet that recreates the slider with your own files. Keyboard controls move the divider by 1 percent with the arrow keys and by 10 percent with PageUp and PageDown, and the handle reports its current position as an ARIA slider for screen readers. A Try samples button loads two built-in demo images so the interaction is obvious before you pick your own files.

Free to use. Works in your browser. No signup, no login.