How do I make a before/after slider for a portfolio or social post?

Drop the original and the retouched photo. Drag the slider to compare — the tool exports a composite image you can post anywhere. Photo editors, makeup artists, interior designers, and fitness trainers use this to showcase results.

What dimensions should the two images be?

Same dimensions for both — otherwise the slider reveals stretched content. If they differ, use the Image Resizer or Crop tool to match dimensions first. Square 1080x1080 works great for Instagram before/after posts.

Should I use horizontal or vertical slider?

Horizontal (slide left-right) for portrait makeovers, room renovations, photo retouching. Vertical (slide up-down) for vertical compositions like full-body fashion, building exteriors, or roadmap-style comparisons.

Can I export an interactive HTML slider for my website?

Export as static composite PNG for social media. For an interactive draggable slider on your website, you'll need a JS library (e.g., img-comparison-slider) — this tool prepares the matched-dimension images you'd feed into it.

Can I add labels (Before / After) to the composite?

Yes — after generating the composite, drop into the Add Text to Image tool to overlay 'Before' and 'After' labels in the corners. Standard look for photo-editing portfolio posts.

Are my photos uploaded?

No — comparison and composite rendering happen in the browser. Confidential before/after client work stays on your device.

Image Compare Slider - Before / After Image Comparison Tool

Drop two images and drag the slider to reveal differences. Horizontal or vertical orientation, swap sides, export the side-by-side composite as PNG.

Before

Drop the "before" image

After

Drop the "after" image

Split %50

Drop both images to see the comparison.

About Image Comparison

A before / after slider is a fast way to show what changed between two versions of the same image — useful for retouching, design iterations, machine-learning before/after, and product photography. This tool runs entirely in your browser; no files are uploaded.

Continue Enhancing Your Images

Take your photo editing to the next level with these popular tools

📝

Add Text to Image

Add captions and titles to your enhanced photo

🖼️

Add Photo Border

Frame your effect with beautiful borders

🗜️

Compress Image

Optimize your enhanced image for sharing

📐

Resize Image

Change image dimensions

📝

Add Text to Image

Add captions and titles to your enhanced photo

Try it now

🖼️

Add Photo Border

Frame your effect with beautiful borders

Try it now

🗜️

Compress Image

Optimize your enhanced image for sharing

Try it now

📐

Resize Image

Change image dimensions

Try it now

🎨

Photo to Cartoon

Try a different artistic style

Try it now

✏️

Pencil Sketch

Create artistic pencil drawings

Try it now

Explore All Photo Tools

Frequently Asked Questions

Upload two images of the same dimensions and the tool overlays them with a draggable handle. Slide left to reveal the before image, slide right to reveal the after — perfect for showing edits, retouching, weight-loss, renovation, design iteration and AI generation results.

usage

Yes. Export the slider as an MP4 or animated GIF that loops the swipe automatically — ideal for Instagram, TikTok, X and LinkedIn posts where viewers cannot drag a handle. Frame rate and duration are configurable.

features

Ideally yes, since the slider compares pixel-for-pixel. When sizes differ, the tool offers to auto-crop or scale the second image to match the first, preserving the aspect ratio so the comparison stays accurate.

technical

JPEG, PNG, WebP, GIF and HEIC are all accepted. The exported video uses H.264 MP4 for maximum compatibility, and the GIF export keeps file size small enough for fast social sharing.

compatibility

Comparison and export happen in your browser, so neither image is uploaded to a server. That makes the tool safe for confidential client retouching, medical before/after photos and unreleased product comparisons.

privacy

Yes. Copy the generated HTML snippet and paste it into WordPress, Webflow, Squarespace, Shopify or any static site. The embed is dependency-free, mobile-friendly and works without external JavaScript libraries.

web

Use Cases

Before/After Photo Editing Showcases

Photographers, retouchers and Lightroom artists show portfolio clients the before and after of a retouch with a draggable slider that proves the edit was worth the fee

creative

AI Image Generation Comparisons

Compare DALL-E, Midjourney, Stable Diffusion and Flux outputs against the original prompt or reference image to demonstrate prompt engineering and model quality differences

creative

Renovation & Home Improvement Reveal

Contractors, architects and interior designers show kitchen, bathroom and full-room renovation before/after sliders on Instagram, TikTok and project portfolio websites

business

Fitness & Weight-Loss Transformations

Personal trainers, coaches and fitness creators publish 30-day, 90-day and year-long transformation sliders for Instagram Reels, TikTok and YouTube to attract new clients

social

Product Design Iteration & A/B Testing

Product designers, UX teams and marketing leads compare design variants side-by-side in Figma reviews, marketing decks and stakeholder presentations to make decisions faster

business

Restoration & Conservation Reveals

Art restorers, vintage car detailers and photo-restoration specialists show before/after sliders that visually justify the painstaking work and the price tag

creative