Skip to content
ZeroServer.tools

Merge Images

Combine two or more images onto one canvas — side by side, stacked, or overlaid with adjustable opacity. Nothing leaves your browser.

Loading tools...

How merging images works

Merge Images composites two or more pictures onto a single HTML canvas entirely in your browser — nothing is uploaded anywhere. Choose side by side to place images left-to-right, stacked to place them top-to-bottom, or overlay to layer them directly on top of each other with an adjustable opacity slider (handy for comparing two versions of an image or creating a ghosted double-exposure effect). Reorder images with the up/down arrows before merging — order matters for side-by-side/stacked placement and determines which image is the base layer in overlay mode. The result can be exported as PNG (with transparency), JPEG, or WebP. For combining images into a single scrollable strip after merging, or resizing the output afterward, try the Image Resizer.

Built and maintained by Meet Shah · Last updated

What this tool is used for

  • Putting a before and after screenshot side by side in one file.
  • Stacking several screenshots into a single attachment for a ticket.
  • Overlaying two images at partial opacity to compare them.
  • Combining a set of panels into one graphic for a document.
  • Producing a single image where a platform allows only one upload.

Frequently Asked Questions

How are the images combined?
Drawn onto one canvas in sequence, either side by side or stacked, then exported as a single file. Nothing is uploaded — the images are decoded and composited locally, which is why it works offline and on screenshots you would not send anywhere.
What happens when the images are different sizes?
The canvas takes the largest dimension on the joining axis and the sum along the other, so a smaller image leaves empty space rather than being stretched. Scaling them to match first is usually what you want if the sizes differ a lot.
Which output format should I choose?
PNG when any source has transparency or contains text and sharp edges; JPEG when everything is photographic and file size matters. Merging two PNGs into a JPEG flattens transparency onto a background colour, which is the surprise to watch for.
Does merging lose quality?
Only through re-encoding. The pixels are copied exactly onto the canvas, so a PNG output is lossless; a JPEG output re-compresses everything including sources that were already lossy, which stacks artefacts from both generations.
Is there a size limit?
Browsers cap canvas dimensions — commonly around 16,384 pixels per side, lower on iOS — and exceeding it produces a blank result rather than an error. Merging many large photos into one strip is the case that hits it.

Common errors and gotchas

  • Merging images of different dimensions without deciding how to align them, which leaves uneven gaps.
  • Re-encoding lossy sources, which compounds artefacts on both halves.
  • Producing a combined image too large for the destination's size limit.
  • Losing transparency by flattening onto an unintended background colour.
  • Merging at differing pixel densities, so one half looks sharper than the other.

Related Design & CSS tools

Private & free — this tool runs entirely in your browser.

KinstaFast managed hosting — up to $500 + 10% recurring.affiliate