img sli

Drop in two images and drag the line between them to compare. You can zoom each side on its own, or lock them together and pan both at once. Nothing ever gets uploaded, even big files (up to 500 MB) get read straight into your browser. I built it because I kept wanting to compare edits without logging into some site and waiting on an upload.

Stack Vanilla JS

Version v1.4.1

Uploads Zero

Open App

Scroll to try it

the main thing

Drag to compare

The whole split is just one clip-path on the top image, no canvas compositing or DOM trickery. The handle has a big invisible grab zone around it too, so it never feels fiddly, even on a phone.

clip-pathCSS

PointerEventsAPI

sub-pxsmooth

zooming

Each side zooms on its own

Every panel keeps its own zoom and position. You can park one side at actual pixels and the other fit-to-window, pinch around either one, and they never get in each other's way.

2×matrices

pinchgesture

1:1pxactual size

syncing

Or lock them together

Flip on sync and both sides move as one. Pan one, the other follows. It even works when the two images are different resolutions, it just works out the scale difference for you.

sharedtransform

autonormalize

anyresolution

staying private

Nothing leaves your machine

Your images stay with you, full stop. There's no upload endpoint at all, files get read with FileReader and never leave the browser. You could run it offline and it'd be perfectly happy.

FileReaderAPI

0requests

offlinecapable

01 / 04

why i made it

I just wanted to open it and go.

Every image comparison tool I found wanted me to make an account or sit through an upload first, and I just wanted to drop two pictures in and look. So I built the version I wanted: no account, no server, no waiting. It turned out to be a nice little excuse to play with clip-path and pointer events too.

The stuff it's made of

HTML5

Vanilla JS

CSS clip-path

Pointer Events API

FileReader API

Three.js

No build step