Combining multiple images into one image means joining two to twelve raster files into a single PNG with no uploads, three layout options, and full local processing. The result is one flattened picture rather than a layered project file, and every input keeps its original pixel size inside the chosen arrangement.
This is a frequent need: a before-and-after pair for a product page, a strip of screenshots for documentation, a four-panel mood board, or a tile of detail crops for a marketplace listing. Each case calls for a different layout, and the right layout depends on what the final image is meant to do — read like a row, stack like a column, or scan like a grid. Combine Images is a browser tool that handles all three of those layouts, encodes the output as PNG, and never sends your source files to a server. Below is a practical walkthrough of which layout to pick, how the tool handles transparency and limits, and how to verify the output once it's ready.
What the tool accepts and what it skips
Combine Images is built for raster files that a browser can decode natively. Accepted formats include PNG, JPEG, WebP, GIF, AVIF, and BMP. Anything else is rejected up front. SVG is the most common exclusion: vector files can reference external resources or contain very long render instructions, so the tool treats them as out of scope and asks you to rasterize them first if you need to combine them.
Animation is also out of scope for the output. Animated GIF, animated WebP, or animated AVIF input contributes the single frame that the browser decodes for the bitmap path. That single frame is what gets placed into the final PNG. The tool does not stitch animations together, so if you need a moving result, a separate animated GIF workflow is the right detour.
Every source keeps its original pixel size. There is no resizing, no cropping, and no aspect ratio change. The tool draws each decoded bitmap once, centered inside the cell it belongs to. That makes the output predictable but also means that very different source sizes will produce uneven padding inside the chosen layout — which is exactly where the background color comes in.
Picking a layout that matches the goal
The three layouts are deterministic. Each one follows a fixed rule for canvas size, cell placement, and which dimensions of your inputs control the output. Choosing one is mostly about asking whether your final image should read horizontally, vertically, or as a balanced grid.
The table below summarizes what each layout actually does to your output.
| Layout | Column or row count rule | Output dimensions | How sources are placed | Typical use |
|---|---|---|---|---|
| Horizontal | One row, all images in selection order | Width is the sum of all image widths plus the total gap; height is the tallest image | Each source is drawn at its decoded size, centered vertically | Side-by-side comparisons, step-by-step screenshots, before-and-after pairs |
| Vertical | One column, all images in selection order | Height is the sum of all image heights plus the total gap; width is the widest image | Each source is drawn at its decoded size, centered horizontally | Tall carousels, story sequences, product detail stacks |
| Grid | Column count is the ceiling of the square root of the image count | Cell width is the widest image; cell height is the tallest image; canvas size follows the row and column counts | Each source is centered in its cell without stretching or cropping | Mood boards, contact sheets, marketplace detail grids |
A quick way to decide: if your result will be read left-to-right or right-to-left, pick horizontal. If it scrolls top-to-bottom like a phone feed, pick vertical. If you have more than three or four items and no strong reading direction, the grid layout is almost always the right choice.
How to combine multiple images into one image with Combine Images
The steps are short and the order matters: select your files in the order you want them placed, then lock in the layout before clicking combine.
- Open the Combine Images tool in your browser.
- Choose between two and twelve raster images in the exact order you want them to appear. The tool preserves that order in the output.
- Pick horizontal, vertical, or grid layout. The output dimensions are calculated from this choice and your inputs, not from a separate canvas size setting.
- Set the gap between images. The gap accepts any value from zero to one hundred pixels and applies to every gap in the chosen layout.
- Set the background color using the six-digit hex picker. This fills any unused canvas area and the gap between items.
- Choose Combine Images, review the reported output dimensions, and download the generated PNG.
If the order looks wrong, change the input order before combining — the tool re-runs the layout from scratch each time, so there is no need to undo individual placements.
File and canvas limits to know up front
The tool enforces four limits at the same time, and any one of them can stop a run. Knowing them up front is the difference between a one-attempt result and a back-and-forth with file prep.
| Limit | Value | What it affects |
|---|---|---|
| Per-file size | 25 MiB maximum | Each individual source image |
| Total size | 100 MiB maximum | All selected files combined |
| Canvas side | 8192 pixels maximum | Either width or height of the resulting PNG |
| Canvas area | 32 million pixels maximum | Width times height of the resulting PNG |
The canvas limits exist to keep memory use predictable in the browser tab. A large grid of wide images can easily blow past the area cap even when every individual file is small, so it is worth checking the reported output dimensions before you commit to a layout. If a horizontal strip ends up taller than 8192 pixels because one source image is unusually tall, switching to a grid layout and breaking the row into two rows is usually the simplest fix.
Files whose extension looks familiar can still fail. Corrupt bytes or an unsupported codec inside a PNG, JPEG, or WebP container will be rejected at decode time. When that happens, re-exporting the source from its original application is the fastest recovery.
How transparency and the background color interact
The chosen background color is painted onto the canvas before any image is drawn. That order matters: any transparent area in a source image is filled by the background color in the exported PNG, so the output is fully opaque from the first pixel to the last.
This is a feature for cases like a four-panel mood board on a brand color, but it is a footgun when you expected the PNG to keep its alpha channel. If you need transparent gaps between sources, the closest workaround is to set the background color to match the surface where the image will be displayed — white for documents, black for dark mode previews, the exact page color for a web embed. True alpha-only output is not an option in this tool.
What the exported PNG keeps and what it drops
The output is a single PNG produced by the browser's built-in encoder. Sharp edges and pixel-accurate transparency in the sources are preserved exactly where they fall, and the layout itself is fixed once you click Combine Images. Beyond that, the output is intentionally minimal.
The exported PNG does not carry over EXIF, color-profile tags, source filenames, or any other metadata. It does not preserve animation, layers, or compression settings from the sources. It also does not target a specific byte size — the file you get is the size that the PNG encoder produces for the chosen canvas and pixel content. If you need a smaller file, the right next step is to feed the PNG into a dedicated PNG compressor or a re-encode workflow; if you need a print-ready output with color management, verify the result in a tool that handles ICC profiles explicitly.
For most everyday tasks — comparison strips, contact sheets, story stacks, mood boards — that minimalism is exactly what you want. The output is one flattened PNG, sized by your inputs and your layout choices, with no surprises buried in metadata.
Matching a layout to common tasks
A few concrete scenarios help when the choice is not obvious.
A two-image before-and-after for a product page is almost always horizontal. The two images end up at their full decoded heights with the taller one driving the canvas height, and the shorter one centers vertically inside that row.
A vertical carousel for a social story or a documentation scroll is almost always vertical. Each screenshot keeps its full width and stacks in selection order, which makes the output behave like a single tall image you can hand to any tool that accepts one image.
A six-to-twelve item mood board or marketplace grid is almost always the grid layout. With six items, the column count becomes three, giving you a two-row, three-column canvas. With twelve items, the column count rounds to four, giving you three rows of four. Empty cells in the last row show the chosen background color, which is a clean way to keep a grid readable even when the count is not a perfect square.
Once you know the layout you want, the rest of the workflow is mechanical: pick the files in order, set the gap and background, and Combine Images.