Before and After Image Maker

Before photo

Click or drag

After photo

Click or drag

Layout

Show the difference your work makes. Upload a before photo and an after photo, and this tool combines them into a single professional comparison image with labels. Perfect for renovation reveals, fitness progress, cleaning results, landscaping, beauty treatments, car detailing, and any business that wants to show transformation. Download as a single PNG ready to post.

No signupRuns in your browserFormula explained belowGeneral information only

How to use this tool

  1. 1Upload the 'Before' photo using the first upload area.
  2. 2Upload the 'After' photo using the second upload area.
  3. 3Choose the layout: side-by-side (horizontal) works best for landscape photos, stacked (vertical) works best for portrait photos.
  4. 4Optionally edit the label text. Labels default to 'BEFORE' and 'AFTER' but you can change them to anything - 'Day 1', 'Week 8', 'Before Treatment', 'After Renovation', etc.
  5. 5Click 'Download PNG' to save the combined comparison image.

Example

Renovation contractor showing a kitchen transformation

Before: photo of dated 1990s kitchen. After: photo of the finished renovation. Layout: side-by-side. Labels: 'BEFORE' and 'AFTER'. Download PNG and post to Instagram and the company website portfolio page. The single image fits natively into any social feed post.

Personal trainer showing a client's 12-week progress

Before: front-on photo from day 1. After: same pose at week 12. Layout: stacked. Labels: 'Week 1' and 'Week 12'. Client shares the result on social media with permission. One image tells the story more clearly than any text description.

Common use cases

  • Renovation contractors and builders showing project transformations for portfolio and social media
  • Cleaning and restoration businesses demonstrating results before quoting or after completing a job
  • Personal trainers and fitness coaches sharing client progress photos with permission
  • Landscapers and gardeners showing garden makeovers
  • Car detailers and body shops showing paint correction or restoration results
  • Beauty therapists and hair stylists showing treatment results

Common mistakes

  • Using photos taken from different angles or distances - the comparison is most persuasive when both images are shot from the same position.
  • Using very different image sizes - the tool matches heights, but extreme size differences reduce quality. Ideally use photos taken with the same camera at the same resolution.
  • Over-editing the 'after' photo but leaving the 'before' unedited - adjust both consistently or use identical editing for a fair comparison.
  • Adding too much label text - short labels like 'BEFORE' and 'AFTER' or dates are clearest at a glance.

Frequently asked questions

Are my photos uploaded to a server?

No. The comparison image is built entirely in your browser using the Canvas API. Your photos never leave your device.

What image formats are supported?

JPG, PNG, and WebP as inputs. The output is always PNG to ensure the best quality and avoid double compression.

Can I change the label text?

Yes. The label fields default to 'BEFORE' and 'AFTER' but you can type anything - dates, names, treatment names, or any short text that fits the context.

How are the two images aligned if they are different sizes?

Both images are scaled to the same height (side-by-side layout) or the same width (stacked layout), then placed next to each other with a divider line. The total canvas width or height is the sum of both scaled images.

Can I remove the labels entirely?

Yes. Clear the label text fields and the labels will not appear on the output image.

What is the output image size?

The output size depends on your input images. For side-by-side, the height matches the shorter image and both images are scaled proportionally. The total width is the sum of both scaled widths. Use the Image Resizer or Image Compressor if you need a specific output size.

Related tools

Last updated