Merge images side by side
Put two or more photos next to each other in one image, with matched heights, an adjustable gap and your own background colour. No upload.
- Runs in your browser
- Files are never uploaded
- Free, no account
Making a clean before-and-after
A side-by-side is a comparison, and a comparison is only fair if the two panels are the same height and the join is obvious. Two settings do all the work: set height matching to Scale all to the smallest so neither photo is enlarged, and give the pair a gap of about 1% of the total width in a colour that appears nowhere in either image. Without the gap, viewers read a single wide photograph and miss the comparison entirely.
Step by step
- Drop in the “before” image first, then the “after” — order runs left to right and you can drag the chips to swap them.
- Leave the direction on Side by side.
- Set height matching. “Scale all to the smallest” is the safe default; only use “largest” if you need a specific output width.
- Add a gap (10–20 px is usually right) and pick a background colour.
- Export PNG for screenshots and documents, JPG for photographs.
Two photos, two different heights
This is the case every naive merger gets wrong. There are only three sane answers, and the tool makes you pick one explicitly:
- Scale to match. Both panels end up exactly the same height, the join is invisible, and no padding is needed. Almost always the right answer for a comparison.
- Pad the shorter one. Keeps both at native resolution; the shorter image sits in a band of background colour, positioned by the alignment control (top, centre or bottom).
- Crop first. Not done here — but if the two shots differ in framing rather than scale, cropping them to the same aspect with Crop Image before merging gives a much stronger comparison than any amount of scaling.
Common uses
| Use | Suggested settings |
|---|---|
| Before / after renovation or repair | Match to smallest, 16 px white gap, centre alignment |
| Design A/B comparison | Match to smallest, 24 px mid-grey gap, PNG export |
| Product colourways | Match to smallest, 0 px gap, transparent background, PNG |
| Two-page scan of a document | Match to largest, 4 px gap, white background, then set 300 DPI |
| Wide banner from several photos | Match to smallest, 0 px gap, JPG at quality 85 |
More than two images
Nothing stops you: add a third and fourth and the row keeps growing. Beyond about four the result becomes very wide and each panel becomes unreadably small on a phone, so at that point switch the direction to Grid — two rows of three reads far better than one row of six on a 360 px screen.
Resolution and quality
The preview is scaled to fit your screen; the export is composited at full resolution from the original bitmaps, so the output is as sharp as your inputs. Downscaling uses a Lanczos-quality filter, which preserves fine detail far better than the browser's default smoothing. Nothing is uploaded at any stage, so there is no per-file size cap and no queue between attempts — if the gap looks wrong, change it and re-export in a second.
Related tools
Combine Images is the same engine with all three layouts to hand, Photo Collage Maker starts on a grid, and Add Text to Image will label the two panels “Before” and “After” for you.
Questions
How do I make a before-and-after image?
Add the before shot first, then the after. Set height matching to “Scale all to the smallest” so both panels line up, and add a 10–20 px gap in a contrasting colour so the join is obvious rather than looking like one wide photo.
The two photos have different heights — what happens?
With matching switched off, the shorter photo is padded to the taller one and positioned by the alignment control. With matching on, the shorter one is scaled up (or the taller one down) so both share an exact height and no padding is needed.
Can I stack them vertically instead?
Yes, switch the direction to “Stacked”. Vertical stacking matches widths instead of heights, which suits screenshots of long pages.
Will the merged file lose quality?
Only if you export as JPG at a low quality. Exporting as PNG is lossless, and any scaling uses a Lanczos-quality resample rather than a crude nearest-neighbour stretch.