Before and After Photo Maker: Tools, Tips, and Ideas

A single before and after photo tells a story that paragraphs of text cannot. Whether you are showing a home renovation, a fitness transformation, or the results of a photo edit, the side-by-side format gives viewers instant visual proof of change. The challenge is picking the right before and after photo maker and preparing your images so the comparison actually looks professional.

This guide walks through the best tools for creating before-and-after comparisons, step-by-step methods for building them, and practical tips that keep your results clean and credible. If your images need resizing or cropping to match first, Pixotter's resize tool handles that in your browser — no upload, no account.

Best Before and After Photo Maker Tools

Not every tool works for every use case. Some produce interactive sliders, others create static side-by-side images. Here is how the most popular options compare:

Juxtapose by Knight Lab

Juxtapose is a free, open-source slider tool built by Northwestern University's Knight Lab. You provide two image URLs, and it generates an embeddable slider that visitors drag left and right. It is the go-to choice for journalists and bloggers who want an interactive comparison on a webpage. The limitation: it produces an embed, not a downloadable image. If you need a static file for Instagram or a PDF, you will need a different tool.

Pixlr X

Pixlr X is a browser-based photo editor with layer support. To make a before-and-after image, you place both photos on one canvas side by side. The free tier adds a watermark on some exports, but for basic side-by-side layouts it works without upgrading. It handles transparent backgrounds, which is useful if you are comparing circular crops or cutouts.

Canva

Canva offers dedicated before-and-after templates with pre-built layouts and divider lines. Search "before and after" in the template library, drop in your photos, and export. The free tier covers most needs. Pro ($12.99/month) unlocks background removal and brand kits. Canva's strength is speed — you get a polished result in under two minutes.

Apple Photos and Shortcuts

iPhone users can build a before-and-after image without downloading anything. The built-in Shortcuts app has a "Combine Images" action that places two photos side by side and saves the result to your camera roll. Select both photos in the Photos app, run the shortcut, and you have a side-by-side comparison. No internet connection needed.

Which to Pick

Use Juxtapose if you want an interactive slider for a blog or article. Use Canva or Pixlr if you need a static image for social media. Use Apple Shortcuts if you are on an iPhone and want zero friction. Regardless of which tool you choose, both photos should share the same dimensions — mismatched sizes produce awkward comparisons with uneven borders or stretched content.

How to Create a Before and After Photo

The process is the same regardless of tool: prepare your images, place them in a layout, and export.

Method 1: Interactive Slider (Juxtapose)

1. Host both images at public URLs. Any image host works — Imgur, Cloudflare Images, or your own domain.
2. Go to juxtapose.knightlab.com and paste the two image URLs.
3. Add labels (e.g., "Before" and "After") and optional credit text.
4. Preview the slider. Drag the handle to confirm both images align correctly.
5. Copy the embed code and paste it into your webpage, blog post, or CMS.

This method works best when both images have identical dimensions and framing. If one photo is wider or cropped differently, the slider misaligns and the comparison loses its impact.

Method 2: Static Side-by-Side (Canva)

1. Open Canva and create a custom design at double your image width (e.g., 2400 x 1200 px for two 1200 x 1200 images).
2. Search "before and after" in templates, or start with a blank canvas.
3. Upload both images and place them side by side on the canvas.
4. Add a thin vertical divider line in the center. Add "Before" and "After" text labels.
5. Export as PNG or JPG.

If you want to split the result into tiles for Instagram, export at a resolution divisible by your grid layout (e.g., 3240 x 1080 for a 3-panel carousel).

Method 3: Grid Layout

For comparisons involving multiple images — say, four rooms in a home renovation — a grid layout works better than a single side-by-side pair. A photo grid maker lets you arrange 4, 6, or 9 images in a structured layout with consistent spacing. Place all "before" images in the top row and "after" images in the bottom row for a clean comparison.

How to Standardize Before and After Images with Pixotter

The most common reason before-and-after comparisons look amateur is mismatched image dimensions. One photo is 4032 x 3024 from a phone camera, the other is 1920 x 1080 from a screenshot. Placing them side by side produces uneven borders, different aspect ratios, and a comparison that distracts from the actual change.

Pixotter fixes this in your browser before you combine anything.

Step 1: Resize to Matching Dimensions

Open Pixotter's resize tool and drop both images. Set both to the same width and height — 1200 x 800 px is a good default for web use, 1080 x 1080 for Instagram. The resize happens client-side, so your images stay on your device.

Step 2: Crop to the Same Frame

If your before and after photos were taken from slightly different distances or angles, Pixotter's crop tool lets you trim both to the same framing. Crop to center the subject identically in both frames. A comparison where the subject shifts position between shots weakens the impact.

Step 3: Compress for Delivery

A side-by-side image at full resolution can weigh 5-10 MB — too heavy for email or web pages. Use Pixotter's compress tool to bring the file size down without visible quality loss. Target 200-500 KB for web use. Client-side compression means your images never leave your browser.

Step 4: Combine

With both images at matching dimensions, open your preferred before-and-after maker (Juxtapose, Canva, Pixlr) and drop them in. The result will be clean, aligned, and professional because the prep work is done. For more techniques on merging images, see our guide on combining images.

Before and After Photo Ideas

The side-by-side format works across many contexts. Here are proven use cases that drive engagement:

Fitness transformations. The most shared category on social media. Show progress over 30, 60, or 90 days. Same pose, same lighting, same clothing makes the transformation undeniable.

Home renovation and interior design. Document every room before and after a remodel. Real estate agents use these to show the value of staging. Contractors use them in portfolios to win new clients.

Skincare and beauty. Product brands show results over time. Dermatologists document treatment progress. Consistent lighting and no makeup in both photos adds credibility.

Photo editing and retouching. Show the raw photo next to the edited version. Photographers use these to demonstrate their editing style. Tutorials use them to show what each adjustment achieves.

Seasonal and weather changes. Same location photographed in summer and winter, before and after a storm, or across years. Landscape photographers and environmental organizations use these to document change over time.

Organizing and decluttering. Before-and-after shots of closets, garages, desks, and pantries are a staple of organizing content on Pinterest and Instagram. The visual contrast is immediately satisfying.

Tips for Effective Before and After Photos

A mediocre before-and-after comparison fails to convince. These details separate amateur results from professional ones.

Shoot from the Same Angle

The single most important rule. If the camera angle shifts between shots, the comparison shows the angle change, not the actual transformation. Use a tripod or mark your position on the floor. For phone shots, use a phone mount or lean against the same surface each time.

Match the Lighting

Different lighting flatters or punishes a subject. A "before" photo in harsh fluorescent light and an "after" in warm golden hour is not a fair comparison — it is a lighting trick. Shoot both at the same time of day, in the same location, with the same light source. If you are indoors, use the same lamps and overhead lights for both shots.

Keep Dimensions Consistent

Both images must share the same width, height, and aspect ratio. A 4:3 image next to a 16:9 image forces one to stretch or leaves gaps. Resize both to identical dimensions before combining. Pixotter's resize tool handles this in seconds.

Use Clear Labels

Viewers should never have to guess which side is "before" and which is "after." Add text labels, or follow the universal convention: before on the left, after on the right. For vertical layouts, before on top, after on bottom.

Minimize Distracting Changes

If you are showing a kitchen renovation, make sure the countertop clutter is similar in both shots. If one photo has flowers on the counter and the other does not, the viewer's eye goes to the flowers instead of the renovation. Isolate the variable you are highlighting.

Choose the Right Format

Use PNG for comparisons where fine detail matters (text, UI screenshots, architectural details). Use JPG for photographs where file size matters more than pixel-perfect accuracy. For web embeds, WebP offers the best balance of quality and compression — see our guide on the best image format for web for a deeper comparison.

FAQ

What is the best free before and after photo maker?

For interactive sliders, Juxtapose by Knight Lab is the best free option — it is open source under the Mozilla Public License 2.0, runs entirely in the browser, and produces clean embeddable comparisons. For static side-by-side images, Canva's free tier offers the fastest workflow with dedicated before-and-after templates.

How do I make a before and after photo on my phone?

On iPhone, use the built-in Shortcuts app. Create a shortcut with the "Combine Images" action set to "Side by Side," select your two photos, and run it. On Android, Google Photos does not have a native combine feature, so use Canva's mobile app or Pixlr's mobile editor — both have free tiers.

What dimensions should before and after photos be?

Both images must be the same size. For Instagram, use 1080 x 1080 px (square) or 1080 x 1350 px (portrait). For blog posts and web use, 1200 x 800 px works well. For print, match your output DPI — typically 300 DPI at the final print size. Use Pixotter's resize tool to set both images to identical dimensions before combining.

How do I add a slider to a before and after photo on my website?

Use Juxtapose by Knight Lab. Upload both images to a public URL, configure the slider at juxtapose.knightlab.com, and copy the embed code into your HTML. The slider is responsive and works on mobile. For WordPress, paste the embed code in a Custom HTML block.

Can I create before and after photos without installing software?

Yes. Canva, Pixlr X, and Juxtapose all run in the browser with no installation required. Pixotter also runs entirely in your browser for resizing and cropping your images to matching dimensions before you combine them. Nothing gets uploaded to a server.

How do I make before and after photos look professional?

Three things matter most: consistent dimensions, matching lighting, and identical camera angles. Resize both images to the same pixel dimensions, shoot both under the same lighting conditions, and use a tripod or fixed position for the camera. Add clean "Before" and "After" labels, and use a thin divider line between the images. Avoid filters or edits that make one photo look artificially better — credibility depends on honest comparison.