Image Combiner

The bug report needed a before and an after. Two screenshots of the same settings screen, taken a week apart, and the only way to show them together was to attach two separate files that the help desk would open in two separate windows at two separate zoom levels. Everyone reading the ticket would toggle back and forth like a very boring slideshow.

So you go looking for a way to glue them into one image, and the search results are a swamp. Photo collage apps with sticker packs and sign-up walls. Desktop editors that take forty seconds to boot for a two-paste job. Ad-farm sites that promise 'side by side photo maker online free' and deliver a uploader, a queue spinner, and a watermark on the way out. The actual task is two images, a gap, and a download. That is all it ever was.

This combiner is that task, nothing more. Drop in two images or twenty, drag them into the order you want, pick horizontal, vertical, or grid layout, set the gap and background color, download. The whole thing runs locally in your browser — your photos never make a single network request after the page loads, which is exactly what you want when the images are receipts, medical documents, or client work.

1. 1

   Add your images

   Drag several files in at once, paste screenshots one after another, or pick them from your device. Thumbnails appear in a strip, and a counter confirms you grabbed everything — the missing-receipt problem is real.

2. 2

   Drag to reorder

   The strip is the order of operations. Drag the third image to the front if that is where it belongs; the layout updates the moment you drop it. Order matters more than people expect in comparison images.

3. 3

   Pick the layout

   Horizontal for side-by-side, vertical for stacked, grid for contact-sheet arrangements with a column count. The preview shows the real geometry — real sizes, real gaps — not a rough sketch.

4. 4

   Set gap, padding, and background

   A gap in pixels between images, optional padding around the outside, and a background color as a hex value. #F3F4F6 is a good starting gray for screenshots; white for print; transparent if the output lands on a styled page.

5. 5

   Choose the export format and download

   PNG for screenshots, text, and anything with transparency; JPG for photos where file size matters; WebP for both at once. The merged file downloads with one click — no queue, no email link, no watermark.

The merge happens on a canvas — the browser's native 2D drawing surface. The engine's first job is arithmetic: decide the final canvas size from the layout mode, the image dimensions, and the gaps. Horizontal mode sums the widths, adds gap times the number of images minus one, and takes the maximum height. Vertical mode does the same with axes swapped. Grid mode computes cell sizes from your column count, then stacks rows of cells with gaps between and around them.

The second job is normalization. Images that arrive in mixed sizes cannot just be pasted at native size — a 4000-pixel photo next to a 1170-pixel screenshot would make a lopsided mess. So every image is scaled to a shared extent: equal heights in horizontal mode, equal widths in vertical mode, equal cells in grid mode. Scaling preserves each image's aspect ratio. Images are never stretched, only resized, and the interpolation quality flag is set high so downscales come out clean rather than crunchy.

Then comes the paste loop. Each image is drawn at its computed position with the standard drawImage call — the same primitive every canvas-based tool uses — onto the background fill you chose. Positions come straight from the layout math, which is why the preview you see and the file you download agree exactly. No surprises between preview and export is a feature, not an accident.

One subtlety deserves a paragraph of its own: EXIF orientation. Phone cameras attach a rotation flag to photos instead of physically rotating pixels, and a combiner that ignores the flag produces sideways pastes. The tool relies on the browser applying the flag automatically — the default behavior in every current browser — so a portrait photo stays portrait. If a file from an ancient camera or a weird export pipeline still arrives rotated, one manual rotate-and-save anywhere strips the stale flag, and the file behaves forever after.

Back to the support ticket. Two iPhone screenshots, both 1170×2532. The goal: one image, side by side, with enough separation that the help desk reads them as two screens and not one wide one.

Now the variant where the two screenshots are not the same size — because somebody retook one at a different zoom. Before is 1170×2532; after is 1125×2436. Equal-height scaling sets the shared height to 2532, so the second image scales up slightly, to 1163 wide — a 1.1 percent stretch of area, invisible in practice. Total width becomes 2357. The engine made a decision and the preview showed it before you exported; that is the whole point of the preview.

For a four-image contact sheet — a real estate listing's room set, say — grid mode with two columns and a 16-pixel gap over four 800×600 photos gives a 1616×1216 canvas: 800 + 16 + 800 wide, 600 + 16 + 600 tall. Padding of 16 more pixels on every side makes it 1648×1248 with an even frame. The arithmetic is honestly this easy, which is why the tool refuses to make it mysterious.

Merging is simple, but the inputs are wild. These are the cases that generate support emails, and how to think about each one.

• Wildly mismatched sizes. A 4000-pixel DSLR photo above a 500-pixel logo will scale the logo up to match the width — into a soft, blurry blob. Pre-resize the big image down toward the small one's scale with the Image Resizer instead; never upscale the small side if you can help it.
• One image sideways. EXIF rotation, almost always. Fix the source file once and the problem is gone for every future merge.
• Dark or transparent edges. Transparent PNG regions show the background color through, which looks like a tinted border on dark images. Choose a background close to the images' own edge tones, or add padding deliberately so edges read as a frame.
• Very tall outputs. Twenty receipts stacked vertically can exceed some image viewers' comfort zone and a few platforms' upload limits — 15,000-pixel-tall images make preview panes unhappy. Split into two stacks of ten and send two files.
• Order regret. The strip exists so you can fix order before export. After export, the only fix is recombining — so drag first, download second.
• Color shifts between images. Two photos of the same room shot minutes apart with different white balance will sit side by side looking like different rooms. No combiner fixes that; a color pass on the sources does.

A merged image is a rectangle of pixels, and every pixel costs four bytes of memory while the canvas is alive — one byte each for red, green, blue, and alpha. That is the budget every layout decision spends from, and it is worth doing the multiplication before a twenty-image stack rather than after:

Browsers cap the canvas itself, and the caps differ by platform in a way that matters for tall jobs. Safari on iPhone and iPad limits a canvas to 16,777,216 pixels of area — 4096 × 4096 in square terms, which a fourteen-receipt month of average-height receipts already exceeds. Desktop Chrome permits far more, up to 16,384 pixels on a side, so the same stack that renders on a laptop fails on the phone it was made for. The defense is to know your target: a twenty-screenshot column at 1170 wide runs about 51,000 pixels tall — 59.8 megapixels, 239 MB of RAM — and belongs in two files of ten, not one heroic strip.

Print destinations get their own arithmetic, because printers want dots. A full-width 6-inch print at 300 DPI needs a canvas 1,800 pixels across; an 8-inch one needs 2,400. Merge at the resolution the destination actually uses, and remember that thermal receipts are born at 203 DPI — a 576-pixel-wide receipt prints at its native size only when sent to a printer at 203 DPI, and shrinks to about two inches wide if something reinterprets it at 300.

Who merges images all day? More people than the search results suggest:

• Support and QA teams — before/after screenshots that make bug reports legible in one glance
• Bookkeepers and admins — receipts batched into monthly bundles, one image per expense claim
• Real estate and rental listings — room sets arranged into single shareable sheets
• Comparison content creators — product A versus product B in one frame for posts and reviews
• Students and researchers — figure panels for reports and papers without fighting a full layout tool
• Small shops — size charts and fabric options combined for marketplace listings that allow only one image per variant

The pattern behind all of these: several images, one destination that accepts exactly one image. Whenever a form, a listing, or an email thread will only take a single attachment, the combiner is the bridge. It is the antidote to 'attach the files one by one' — and to the collage-app bloat that stands between you and a five-second merge.

The bookkeeper's version of this tool is the expense-month archive: every receipt from March, one file per claim, or one impossible zip of fourteen tiny images. Thermal receipts scan at a standard width — 576 pixels, which is what 72-millimeter paper produces at a thermal printer's native 203 DPI — and heights wander between 800 and 3,500 pixels depending on how much the cashier printed.

The arithmetic says split before the tool does. Fourteen receipts at the average height produce a 17.8-megapixel canvas — a number that clears desktop Chrome and fails the iPhone the bookkeeper is standing in line with. Two stacks of seven land at 8.9 megapixels each, under every limit in the wild, and as a bonus produce two files that upload faster and open in preview panes without scrolling a half-minute to find receipt number eleven.

Format choice repeats the screenshot rule with more force: thermal receipts are black text on white with maybe one color band, which is PNG's home turf — the run-length-friendly content compresses to a fraction of the raw size and every digit stays laser-crisp for the tax folder. JPG would blur the total line on the longest receipt, and the total line is the only line anyone audits.

The categories blur in search results, so here is the honest breakdown of what each tool family is for:

The trade this tool makes is deliberate: no filters, no sticker packs, no sign-up funnel — in exchange for exact numbers. You know the gap in pixels, the canvas size in pixels, and the background in hex. When the merged image needs to be a specific size — 1200×630 for a social share card, for instance — that precision is the difference between one export and five attempts.

And when the job eventually runs backward — one long receipt strip that needs to become individual receipts again — the Image Splitter cuts it back apart along clean lines. The two tools are a matched pair, and power users end up bookmarking both. Creators preparing multi-tile posts should also look at the Instagram Grid Splitter, which is the combiner's mirror image for social grids.

The combiner has no server to trust, because it has no server at all. Images are decoded in the browser, arranged on a canvas that lives in the page's memory, and encoded to your chosen format right there. The download is generated from that local canvas. At no point does a single pixel travel the network.

For the receipts-and-documents crowd this is not a nice-to-have. A batch of expense receipts contains account numbers and addresses; a medical image contains the most private data most people own; client photography contains work under embargo. Handing any of that to a 'free online collage maker' means reading a privacy policy closely enough to know their retention terms — and hoping the policy is followed. The local route removes the question. It also keeps working when the office wifi does not.

Three tools share a workflow with this one:

• Image Splitter — the reverse operation: one image into a grid or strips of numbered tiles
• Instagram Grid Splitter — social preset splitting for profile grids and carousels
• Watermark Image Adder — the natural next step after merging, when the combined image needs protection before it goes public

A workflow we see often: combine the before and after, watermark the result, attach. Three local tools, zero uploads, one minute. The Watermark Image Adder covers the middle step if that is where your job is headed.