The embed is genuinely self-contained
Both images are inlined into the code as data URIs and the drag behaviour is a dozen lines of vanilla JavaScript. There is no library to load, no CDN to trust, no file to host, and no request back to this site. Paste the block into any HTML page, a CMS block or a documentation site and it works.
The trade is file size: inlined images make the block large. It is the right choice for a one-off comparison in a blog post, and the wrong one for a gallery of fifty.
Getting a comparison that is actually fair
Both images must be framed identically or the slider shows camera movement rather than the change you are demonstrating. For photo edits, export both from the same source. For screenshots, take them at the same window size and scroll position.
Mismatched dimensions are stretched to fit and flagged with a warning, because a silently squashed 'after' makes any comparison meaningless.
Frequently asked questions
Why did my images get slightly softer?
They are capped at 1400 pixels wide and re-encoded as JPEG so the embed code stays a manageable size. For a pixel-exact comparison, host the full-resolution files yourself and swap the two data URIs in the code for their URLs.
Are my images uploaded?
No. Both images stay on your device — useful when the before and after are client work.
Something wrong with this tool, or an idea for it? Tell us