↔️ Before & After Slider Maker
Drop two photos and get three files: an animated GIF of the wipe, an MP4 of the same sweep, and a draggable HTML slider with both images built into the file, so there is nothing to host anywhere.
or click to choose
or click to choose
Drop both files at once and the first one becomes the before shot. Your photos are read inside this browser tab and are never uploaded.
Drag straight across the picture to move the divider. This preview is drawn exactly the way the GIF and the MP4 are drawn.
🌐 Draggable HTML slider
One file with both photos written into it as data. Drop it into a GoHighLevel custom HTML block, a WordPress HTML block or any page, with no image hosting and no plugin.
🎞️ Animated GIF
Plays by itself in most email clients, in Slack and in a proposal document. No player needed, but the file is large and the colors are reduced to 256. Outlook on Windows shows only the first frame, which here is the before photo, so paste a still of the finished result next to it.
🎬 MP4 video
Far smaller and much sharper than the GIF. Use it for social posts, ads and anywhere a video will play.
Proof beats adjectives
A before and after slider is the fastest way to make a result believable. Nobody reads "we improved the layout", but everyone drags a handle across a photo. Agencies use them for site redesigns, landscapers and cleaners for job photos, dentists and clinics for treatment results, photographers for retouching, and estate agents for staged rooms.
Why three different files
They are not interchangeable. Most email clients and chat apps will not run a video, so a GIF is usually the only thing that moves there, with one loud exception: Outlook on Windows shows the first frame of a GIF and nothing else, so send a still of the result alongside it. Social platforms and ad managers want an MP4, which is sharper and roughly a tenth of the size. A website wants the interactive version, because a visitor who drags the handle themselves stays on the page much longer than one who watches a loop. This page produces all three from the same setup, so they match.
What the HTML file actually contains
Both photos are re-encoded, scaled to the width you choose, and written into the file itself as base64 data. That means one file to paste in and no image URLs to break later when a media library gets tidied. The trade off is page weight: base64 adds about a third to the size of an image, so keep the total under a megabyte. The size is shown before you download, and the tool warns you when it climbs too high. Lower the quality slider or the embedded width to bring it down.
Getting a clean result
The wipe only reads as a real comparison when the two shots line up. Same camera position, same framing, same lighting where you can manage it. If the two photos are different shapes, choose a frame shape and the tool will either crop both to fill it or fit both inside it with a solid background. Cropping usually looks better for a website, fitting is safer when nothing important can be lost from the edges.
Honest limits
Most up to date desktop browsers have a video encoder built in and write the MP4 in a fraction of a second. On a browser without one the tool records the sweep in real time instead, which takes as long as the sweep and usually produces a WebM file. A recorded WebM carries no duration in its header, so some players show no length for it and cannot scrub it, and some upload sites reject it outright. The GIF encoder runs everywhere but holds every frame in memory, so the width and the frame count are capped on purpose. Everything happens inside this tab and the two photos are never sent anywhere. The page itself loads its encoder libraries from a CDN and logs an anonymous page view, nothing else.