ComparePictureCompare now

Make an image comparison slider for your site

Make a before and after slider for your site

Style it, preview it, then download one HTML file or copy a snippet.

Free · No sign-up · Pictures stay on your device

A before and after slider being styled in the builderExample result
ABeforeChoose picture APress Enter to choose image A, or drop a file here.
BAfterChoose picture BPress Enter to choose image B, or drop a file here.
Try an example:

PNG, JPEG, WebP, GIF (first frame), AVIF, BMP and HEIC where this browser can open it. Different sizes are fine — they are lined up for you.

Turn a before and an after picture into a draggable comparison slider for a web page — no plugin, no account and no hosting: download a single HTML file with the pictures inside, or copy a snippet that uses your own image addresses.

Two ways to take it away

The HTML file holds everything — both pictures as embedded data, the styles and under two kilobytes of script — so it opens offline, can be attached to an email, or uploaded anywhere as a single file. It makes no requests at all. The size is shown as you change the settings; above 2 MB the page suggests JPEG or a smaller longest edge.

The snippet is for a site you already run. Upload your two pictures there as usual, paste their addresses into the two fields, and copy the code into a WordPress “Custom HTML” block, an Elementor HTML widget or any page. It loads only those two pictures.

Accessible by default

The divider is a real slider for assistive technology: it has the slider role, announces its position as a percentage, and moves with the arrow keys (Shift for bigger steps) and Home and End for the ends. It works with a mouse, a finger or a pen, and each picture keeps the label you give it as its alternative text.

Yours to use

The generated code is yours to use on any site, commercial or not, with no credit line and nothing that phones home. The preview on this page is the downloaded file itself running in a sandboxed frame, so what you see is exactly what you get.

FAQ

Questions people ask

Do I need to host anything?

Not for the HTML file — it contains both pictures and works on its own. The snippet needs your two pictures to be online somewhere you control, such as your site's media library.

Does it work in WordPress or Elementor?

Yes. Paste the snippet into a Custom HTML block in WordPress or an HTML widget in Elementor; no plugin is needed.

Is the slider accessible?

Yes. The divider has the slider role and an announced value, moves with the arrow keys, Home and End, and each picture has alternative text from its label.