Combining multiple photographs into a single shareable image is one of the most common tasks creators face when a platform only allows one upload, when you want a clean before-and-after narrative without building a full carousel, or when you need a printable contact sheet for review. Traditional desktop suites can do it, but they also mean installing software, managing color profiles, and exporting through dialogs that were designed for print shops—not for a marketer on a laptop between meetings. SynthQuery’s **Photo Combiner** is a free, browser-based **multi-photo collage maker** that keeps the workflow lightweight: you add between two and ten images, pick a grid template such as two-by-one, three-by-three, or a **custom grid** with up to ten cells, drag photos into cells, adjust the gap and **background color**, pan each photo inside its cell for a precise crop, set exact **output width and height**, preview the composite, then download PNG, JPEG, or WebP. Everything runs **client-side** with the Canvas API—your pixels are not uploaded to SynthQuery for assembly, which matters for client galleries, unreleased products, and any policy that discourages sending originals to third-party servers. The tool is **mobile-responsive**, so you can rough in a layout on a phone and refine dimensions on a larger screen before posting to Instagram, LinkedIn, Shopify, or internal Slack channels.
What this tool does
**Layout templates** encode common social and print patterns without forcing you to calculate track sizes manually. Presets include two-by-one, one-by-two, two-by-two, three-by-one, one-by-three, two-by-three, three-by-two, and three-by-three; each maps to a deterministic row-major cell order so keyboard and screen-reader labels stay consistent. **Custom grid** mode reads your column and row inputs, then coerces combinations that would exceed ten cells or fall below two, which prevents accidental thirty-tile layouts from freezing low-memory devices. **Drag-and-drop placement** uses two channels: dropping a library thumbnail assigns that photo to the hovered cell (and removes it from any previous cell), while dragging the cell grip swaps two occupied or empty slots—handy when you meant to place the hero shot bottom-right instead of top-left. **Gap control** spans zero to fifty pixels in export space; the layout engine subtracts total gutter thickness before distributing integer pixel widths and heights so the outer dimensions you type match the downloaded file. **Background color** accepts a native color input plus hex text for exact brand matches. **Custom output dimensions** drive the final raster independently from how large the on-screen preview appears; preview rendering scales down when needed so laptops stay responsive. **Cell-level cropping** is implemented as a cover transform with bounded pan slack: every image is scaled until it fills its rectangle, then you slide along the long axis without exposing empty margins. **Preview before download** regenerates a PNG snapshot whenever assignments, pans, gap, colors, or dimensions change, while the download path respects your selected format and quality. Together, these pieces mirror professional compositing semantics—without leaving the browser tab.
Technical details
The compositor is a deterministic **grid layout engine**: given outer width, outer height, integer column and row counts, and a uniform gap, it distributes inner pixels so each cell receives whole-number dimensions and the outer border matches the user target after summing gutters. Images draw with **cover** scaling—scale equals the maximum of cellWidth divided by natural width and cellHeight divided by natural height—then translate within clamped slack so no letterboxing appears inside active cells unless the source fails to decode. **Canvas 2D** performs clipping per cell, which avoids antialiased halos that sometimes appear when alpha tiles are stacked without isolation. **Pan offsets** live in output pixel space and map from pointer deltas using the ratio between logical cell size and the on-screen cell width captured at pointer-down, so dragging feels consistent even though the interactive grid is not one-to-one with the export resolution. **PNG** exports preserve transparency when sources include alpha; **JPEG** and **WebP** routes flatten transparent edges against the selected background color before encoding, matching expectations from other SynthQuery imaging utilities.
Use cases
**Social media managers** batch stills into a single asset when a network’s upload slot is singular but the story needs multiple angles—think product front/back, event stage plus crowd reaction, or tutorial steps in one frame for a link preview. **E-commerce teams** combine color variants or size comparisons for marketplace listings that discourage multi-image slots, then reuse the same grid template across a season for visual consistency. **Event photographers** export quick grids for clients who want a one-page proof before selecting full retouching, especially when email attachment limits make ZIP folders awkward on mobile. **Real estate marketers** merge exterior, kitchen, and lifestyle shots into a branded collage for print flyers or blog heroes while keeping gutters wide enough for office printers that shift alignment. **Family and school organizers** build yearbook-style tiles for newsletters without asking volunteers to learn layered PSD templates. **Product designers** align UI screenshots across phones, tablets, and desktops inside a fixed canvas so stakeholders see parity at a glance. **Researchers** pair microscopy or chart stills side-by-side for lab notes where figure files must remain static images. Because processing stays on-device, teams under **data residency** rules can still produce composites when cloud creative suites are off-limits.
How to use this tool effectively
Start with the highest-quality masters you can—recompressed chat attachments band when stretched across a large grid cell. Open **/photo-combiner** and use **Browse images** or drag files into the dashed drop zone; you can queue between two and ten photos in JPG, PNG, WebP, BMP, or TIFF formats, each up to forty megabytes. Wait for thumbnails to finish decoding: rows that still spin need another moment before they can be placed in the grid. Choose a **layout template** that matches your story—two-by-one and three-by-one work well for comparison strips, two-by-two and three-by-three suit mood boards, while one-by-two and one-by-three emphasize vertical sequencing. If none of the presets fit, switch to **Custom grid**, type columns and rows (the tool keeps the product between two and ten cells so exports stay predictable), and read the effective grid summary. Press **Reset cell assignment** whenever you want row-major ordering again after experimenting. Drag any thumbnail from the **Photos** list onto a cell to assign it; the list notes whether a file is already in the grid. To swap positions, drag the **grip handle** in a cell header onto another cell—assignments and per-cell pan values travel with the swap so you do not lose framing work accidentally. Click **Clear** on a cell to return it to the background color, or remove a file entirely with the trash control in the list. Use the **Gap** slider to separate tiles with anything from a hairline to a thick border-like gutter, then pick a **background color** that matches your brand page or print margin; empty cells and JPEG/WebP letterboxing use the same fill. Set **Output width** and **Output height** explicitly when a marketplace, ad network, or CMS demands exact pixels—values clamp to four thousand ninety-six on the long edge to protect browser stability. Drag inside a filled cell (not on the grip handle) to **reposition the image within the cell**; the engine uses cover-style scaling so the rectangle stays full while you slide the visible region. When the **Final preview** looks right, choose **PNG** for lossless transparency, **JPEG** for smaller photos with adjustable quality, or **WebP** for modern browsers, then press **Download collage**. If you need motion instead of a still grid, follow up with **GIF from Photos** or refine single-tile crops in **Image Resizer**.
When every photo should share one row height with a horizontal strip, use the dedicated side-by-side tool for matched heights and fast comparison layouts.
Extract ultrawide frames from drone or landscape masters, then pair them with tighter detail shots inside a multi-cell collage.
Frequently asked questions
You can upload **two to ten** source images. Templates range from two cells up to nine on a three-by-three grid, and **custom grids** coerce column and row products so the layout always stays between two and ten cells. You do not have to fill every cell—empty slots show your chosen **background color**—but you must place at least two decoded photos into the grid before download unlocks, matching the minimum upload rule.
Templates are curated presets (for example two-by-three or three-by-two) with fixed cell counts that mirror common design habits. **Custom grid** lets you type columns and rows up to five each; if the product would exceed ten cells, the tool automatically reduces rows or columns until the layout is valid. The effective grid label under the inputs shows exactly what will export so you are never surprised by silent rounding.
No file on disk is modified. Pan adjustments change how each bitmap is **sampled into its rectangle** during Canvas export, similar to repositioning a cover-style background in CSS. Your originals remain untouched in the browser until you download a new composite. Keep archival masters elsewhere; treat downloads as derivatives.
**PNG** is lossless and preserves transparency when your sources include alpha—choose it for graphics, screenshots with soft edges, or any workflow that might re-edit the collage. **JPEG** applies lossy compression; raise the quality slider for photos with gradients and watch file size in downstream email systems. **WebP** often delivers smaller bytes than JPEG at comparable visual quality but is not universally accepted in every legacy print pipeline—verify your destination before batching.
The numbers you type define the **outer bounding box** of the entire collage, including gutters. The layout engine divides the inner area (after subtracting gaps) across columns and rows, so changing width stretches every column proportionally while height does the same for rows. If you need a drastically different aspect, adjust both dimensions together rather than expecting automatic letterboxing beyond empty cells.
The draggable grid is a responsive mock with CSS gaps sized for touch targets; the **Final preview** renders through the same Canvas pipeline as download, sometimes scaled down so mid-range laptops stay responsive. Downloaded files always use the full **output width** and **output height** you entered. If previews look soft, zoom the downloaded PNG in an editor—you are seeing preview scaling, not export resolution loss.
No. Files are read with the File API, decoded with browser imaging primitives, composited locally, and exported with blob URLs—ordinary web logs may show that you visited the page, but the image bytes are not transmitted to SynthQuery for assembly. This matches the privacy posture of our other client-side collage utilities.
Each uploaded file can occupy **at most one cell** at a time to keep drag-and-drop semantics predictable. If you need duplicates—two identical product angles, for example—upload the file twice so each instance receives its own cell assignment and pan settings.
Rows that error show a short message in the list and are skipped during export. Clear the broken entry, re-export from your editor to JPG or PNG, and add it again. Animated GIF sources are not a focus of this still grid; convert to a flat frame first if you see decode failures.
**Side-by-Side Collage** optimizes a single horizontal row with matched heights and width caps—fastest when you never need multiple rows. **Top-Bottom Collage** stacks up to five images vertically with shared width. **Photo Combiner** generalizes to arbitrary rows and columns (within the ten-cell cap), adds per-cell pan, explicit outer dimensions, and richer assignment UX—choose the narrow tool when it fits, and graduate here when you need a full grid.
Upload two to ten photos, pick a layout (or define a custom grid up to ten cells), drag thumbnails into cells, adjust the gap and background, pan inside each cell, set exact output width and height, then preview and download.
0/10 images · JPG, PNG, WebP, BMP, TIFF · max 40 MB each
Layout template
Grid preview (drop & pan)
Drop a photo onto a cell to place it. Drag between cells to swap. Drag inside a filled cell to reposition the crop (cover).
1
Empty
2
Empty
3
Empty
4
Empty
12px
Empty cells and JPEG/WebP letterboxing use this color.
Final preview
Scaled preview for speed. Download uses full 1080×1080px output.