Image Joiner — Combine Two Images Side by Side or Vertically
How to join two images
Joining two images means placing them on a single canvas — either next to each other or stacked — and saving the result as one picture. The Image Joiner does this entirely in your browser with the Canvas API.
- Select the first image. Drop a file onto the first slot, click the slot to
browse, or paste an image straight from your clipboard with
Ctrl/⌘ + V. - Select the second image. Use the second slot the same way. You can replace or remove either image afterwards without starting over.
- Choose the layout. Side by side places the images left to right; Top to bottom stacks them. The preview updates immediately.
- Adjust sizing. Keep the original sizes, match heights or widths, or fit both images into an exact output canvas.
- Set spacing, alignment and background. Add a gap in pixels, choose how the images align, and pick a transparent, white, black or custom background.
- Choose an output format and download. Export as PNG, JPEG or WebP, rename the file if you want to, and press Download image.
Side by side vs. top to bottom
| Layout | Best for |
|---|---|
| Side by side | Front and back of an ID or business card, two diagrams, before/after comparisons |
| Top to bottom | Two scanned pages, two mobile screenshots, long screenshots stitched from parts |
For the front and back of a card, the two scans are usually almost the same size. Side by side with Match height lines up the shared edge without rescaling anything, which is why it is the default. Use the Swap button if the front and back ended up in the wrong order.
Sizing explained
The tool never changes an image's aspect ratio and never crops one. Sizing only decides how much each image is scaled, and what fills whatever space is left over.
| Sizing mode | What it does | When to use it |
|---|---|---|
| Preserve | Keeps both images at their natural pixel size. Nothing is scaled; gaps between mismatched sizes become background. | Two screenshots taken at the same scale, scanned pages at one DPI |
| Match height | Scales both images so their heights are equal. | Side-by-side cards, diagrams with the same height |
| Match width | Scales both images so their widths are equal. | Stacked screenshots, pages scanned at the same width |
| Fit to canvas | Pins the output to an exact width and height (either may be left on Auto) and fits each image inside its half. | A specific deliverable size, such as a GitHub README banner or a print proof |
Match height and Match width align on the smaller of the two dimensions. That means neither image has to be enlarged, so no resampling blur is introduced. If you do need a larger output, Fit to canvas will scale up — and the tool will say so, rather than quietly softening your image.
Output size presets
Original returns to natural sizes. 1080p, 1440p and 4K set an exact output size and switch the tool to Fit to canvas. Type any width or height for something else, tick Auto to hand an axis back to the tool, or lock the ratio so the other axis follows.
Gap and alignment
Gap is the number of pixels between the two images. Zero gives a clean seam; a value in the 8–32 px range looks deliberate in documentation and diagrams.
Alignment controls only appear when they can actually change the result. If both images end up exactly the same height in a side-by-side join, vertical alignment would be a no-op, so it is hidden rather than shown as a dead control. Set Preserve or Fit to canvas with mismatched images to see it appear.
Background and transparency
When the images do not completely fill the output, the background shows through. Choose Transparent, White, Black, or a Custom colour from the native colour picker.
- PNG and WebP keep transparency, so the preview switches to a checkerboard and the exported file has a real alpha channel.
- JPEG has no transparency channel. If you pick a transparent background with JPEG, the tool fills those areas with white and tells you, and the preview shows the same white — so what you see is what you get.
Output formats
| Format | Choose it when | Notes |
|---|---|---|
| PNG | Screenshots, diagrams, anything with text or transparency | Lossless, so large files for photos |
| JPEG | Photographs | Small files; no transparency |
| WebP | You want smaller files than JPEG with transparency support | Supported by all current browsers |
The Quality control appears only for JPEG and WebP, because PNG is lossless and has no quality setting. 85% is a sensible default for photographs; keep it closer to 100 for screenshots full of small text, where JPEG artefacts are most visible.
The file size shown before downloading is an estimate. The download itself is always rendered at the exact output dimensions shown in the Output panel — never at preview resolution.
Common use cases
- Front and back of a card. Scan or photograph both sides, join them side by side, and attach one file to a form or issue.
- Combining screenshots. Stack two mobile screenshots vertically so a bug report reads as one continuous capture.
- Two diagrams side by side. Match heights so the two diagrams share a baseline.
- Before and after. Join a "before" and "after" screenshot into a single comparison image.
- Two scanned pages. Combine page 1 and page 2 into one image for a quick review or a slide.
- Documentation and bug reports. Produce one image at a predictable width that stays readable in a README, an issue, or a chat message.
Where your images go
Images are processed locally in your browser and aren't uploaded to a server by this tool. Decoding, scaling and encoding all happen on your own device using the browser's Canvas API, and the download is handed straight to your browser's download mechanism.
There is no account, no database, and no server-side image processing in this tool. Once the page has loaded, the joining itself works without a network connection.
What the tool will not do
It will not silently stretch an image to fill a space, and it will not silently crop one. If an image does not fit the area it was given, it is scaled down to fit and the remaining space becomes background — and the alignment controls appear so you can decide where it sits.
It also stops before it can exhaust browser memory. If a composition would exceed what a browser canvas can allocate, the Output panel explains the limit and points you at Fit to canvas instead of failing part-way through.