Combine Images into One PNG in Your Browser

Combine Images turns between two and twelve local raster files into a single PNG arranged by a layout you choose, and the entire job runs in your current browser tab without uploading anything. Each selected file is read in the order you select it, decoded by the browser's image bitmap path, then drawn onto one canvas at its original pixel size — never resized, never cropped, never recolored. The chosen layout determines placement: horizontal puts images left to right with the tallest image setting the canvas height, vertical stacks them top to bottom, and grid fits them into a near-square matrix sized from the ceiling of the square root of the image count. A configurable gap of 0 to 100 pixels separates each item, a six-digit color picker fills the unused canvas and the area between images, and the browser's PNG encoder produces the final file you download. Per-file size is capped at 25 MiB, the total selection at 100 MiB, the canvas side at 8,192 pixels, and the area at roughly 32 million pixels, all chosen to keep memory use predictable across browsers.

Why You Want Them in One File

People search for ways to combine images into one for very practical reasons, and the task almost always comes down to wanting a single shareable file instead of a folder of separate assets.

• Show a before and after or a step-by-step sequence as one image instead of multiple attachments.
• Build a comparison shot — color swatches, product variants, application screenshots — that fits on a slide or in a chat.
• Stack receipts, screenshots, or scan pages into one PNG that can be sent or archived as a single file.
• Prepare a horizontal banner or a vertical story strip from several smaller assets without opening full photo software.
• Drop two to twelve assets onto a clean canvas with a custom background so the result matches an existing template.

If any of those match the problem you walked in with, the local-browser approach offered by Combine Images keeps the operation private and predictable. None of your files leave the device during decoding, layout, drawing, or encoding, and every canvas rule is written out so the output size is something you can verify before downloading.

Combine Multiple Images: The Exact Workflow

Here is the precise, repeatable workflow inside the tool, with every input and every output step you control.

1. Open the tool and pick between two and twelve supported raster images in the order you want them placed. Accepted formats are PNG, JPEG, WebP, GIF, AVIF, and BMP. The selection order in your file picker drives left-to-right, top-to-bottom, or cell-by-cell placement in the final layout.
2. Select a layout: horizontal, vertical, or grid. Horizontal lays images left to right at their decoded pixel sizes, vertical stacks them top to bottom, and grid chooses the smallest square-like column count by taking the ceiling of the square root of the image count.
3. Set a gap of 0 to 100 pixels between items, then pick a six-digit background color to fill unused canvas space and the area between images.
4. Choose Combine images to generate the output. Verify the reported dimensions on the preview; the canvas will not exceed 8,192 pixels on either side or about 32 million pixels of area.
5. Download the resulting PNG. The file is encoded by the browser using the canvas toBlob path, producing a single static image — any animation from GIF, WebP, or AVIF sources is not preserved.

What Stays the Same and What Changes

A few properties of the source files change in the output and a few stay locked. Knowing which is which avoids surprises.

• Source pixel dimensions are preserved. Every decoded image is drawn at its original size and centered inside the layout cell or row position. There is no stretching, cropping, or aspect-ratio change.
• The selected opaque background is painted onto the canvas before any bitmap is drawn, so transparent pixels in a PNG become that background color. You cannot use the tool to keep transparency across the entire output, but you can use it to brand a stacked graphic.
• A single static PNG is produced. Animated GIF, animated WebP, and animated AVIF inputs contribute only the frame decoded by the browser, and motion is lost.
• EXIF, color-profile tags, layer data, original filenames, and any non-pixel metadata are not carried over. The PNG you get back is encoded from pixel values alone, not from the source file's wrapper.
• SVG input is deliberately rejected. SVG can reference external resources or carry very large render instructions, so excluding it keeps this local raster workflow bounded and predictable.

Layouts Compared

The three layouts behave differently, and the one you pick changes both the output dimensions and how uneven inputs are handled inside the canvas.

Layout	Best for	Direction	Resulting canvas
Horizontal	Row of icons, color swatches, before and after shots	Left to right	Width equals the sum of widths plus gaps; height equals the tallest image; shorter images centered vertically
Vertical	Sequences, scan stacks, story strips	Top to bottom	Height equals the sum of heights plus gaps; width equals the widest image; narrower images centered horizontally
Grid	Photo clusters, comparison tiles, mood boards	Cell by cell, row-major	ceil(√n) columns; every cell sized to the widest and tallest decoded image; empty cells and unused space show the background color

Hard Limits and Why They Exist

Every constraint you can hit is tied to keeping the in-browser operation stable rather than to product preferences.

Constraint	Value	Reason
Minimum images	2	One image is not a combination
Maximum images	12	Keeps the grid layout small and the canvas side count predictable
Per-file size	25 MiB	Limits single-decode memory spikes
Total size	100 MiB	Bounds cumulative bitmap memory
Canvas side	8,192 px	Sits below common browser canvas size caps
Canvas area	About 32 million pixels	Avoids allocation failures on large grids
Gap range	0 to 100 px	Bounded integer input for layout math
Accepted formats	PNG, JPEG, WebP, GIF, AVIF, BMP	Browser-decodable raster types
Rejected	SVG	Bounds external resources and large render trees

Files whose extension looks familiar can still fail when their bytes are corrupt or their codec is unsupported by your browser. If a file is rejected, swap it for another copy or run it through the Image Compressor to re-encode it as standard PNG or JPEG before combining.

Privacy and Where the Work Happens

Every step of the Combine Images job runs locally in your tab. Decoding uses the browser's createImageBitmap path documented on MDN — createImageBitmap returns ImageBitmap objects the page can paint without ever uploading the source bytes anywhere. Encoding the final canvas back to PNG uses the HTMLCanvasElement toBlob method also documented on MDN: toBlob produces a downloadable file through a revocable Object URL, and the page closes every ImageBitmap it created during the run. That sequence never touches a network request, so the source files can stay on your local disk before and after the operation.

Tips for Clean Output

• Order matters. The order you select files in the picker is the order they appear in horizontal, vertical, and grid layouts, so pause for a second to think left-to-right or top-to-bottom before confirming.
• Use a contrasting background color while you build the layout so the gaps and centering show up clearly, then switch to your real brand color once placement is locked in.
• If you want tight rows or columns, crop or resize the sources first so heights or widths roughly match. The tool itself never stretches anything to fit, and the Image Resizer can resize to exact pixel dimensions before combining.
• Send finished assets through PNG to JPG only if you actually need a smaller lossy copy. PNG keeps sharp pixels and the chosen opaque background intact, so prefer it for archival and sharing.
• If your real goal is a single document rather than a single image, the Image To PDF tool puts each image on its own page instead of combining them visually on one canvas.

For print production or color-managed compositing — where CMYK conversions, ICC profiles, or layered files matter — verify the exported PNG in dedicated software after download. The tool does not preserve color profiles, does not target a specific output byte size, and does not carry source metadata forward, so a downstream check is the only way to confirm those properties for print.