Photo Collage Maker: several photos, one picture
A photo collage maker takes a handful of separate photographs and composes them into a single image — a grid of four holiday shots, a before-and-after pair side by side, one large picture with two smaller ones stacked beside it. This tool does that entirely inside your browser tab. You pick photos from your own device, choose a layout, adjust the spacing, drag each picture to frame it, and download the finished file. No photo is uploaded, because there is nowhere to upload it to: this site is a set of static files with no server that handles images.
This tool is the inverse of the Instagram Grid Image Splitter. That one takes a single picture and cuts it into several files that reassemble on a profile grid. This one takes several pictures and combines them into one file. If you want one image spread across nine posts, you want the splitter; if you want nine images inside one post, you want this.
How the grid arithmetic works
Every layout here is stored as a list of rectangles written in fractions rather than pixels. The top-left cell of a 2 × 2 grid is simply x: 0, y: 0, w: 0.5, h: 0.5 — the first half across and the first half down. Nothing in that description knows how large the finished collage will be.
Turning those fractions into pixels happens in a fixed order. The outer margin comes off all four sides of the canvas first, leaving a content box. Each cell's fractions are multiplied by that box. Each resulting rectangle is then pulled in by half a gutter on every side, so two neighbours end up a full gutter apart. Finally the rectangle is rounded to whole pixels.
Because a layout is data rather than code, one drawing routine handles all of them. Every layout therefore gets identical margin handling, identical gutters, identical corner rounding and identical cover-fitting — and adding a new arrangement never risks breaking an existing one.
Why spacing is a percentage, not a pixel count
Both the margin and the gutter are fractions of the collage's shorter edge rather than fixed pixel values, and that is deliberate. A 20-pixel gap is a comfortable separation on a 1080-pixel collage and an almost invisible hairline on a 4096-pixel one. If spacing were measured in pixels, the arrangement you composed in the preview would quietly stop matching the file you downloaded as soon as you changed the output size. Expressed as fractions, the proportions you see are the proportions you get at any size.
There is one place pixels do matter. When the gutter is set to zero, two cells share an edge, and a canvas clip along a shared edge is antialiased on both sides — a one-pixel line of background shows through every join. So when the gutter rounds below a single pixel, the tool pushes every interior edge outwards by one pixel. Neighbours overlap slightly, the later cell paints over the sliver, and there is no seam for the background to bleed through.
Why each photo is decoded small and then released
This is the part most in-browser collage tools get wrong, and the reason is memory rather than speed. A photograph from a modern phone is somewhere between 12 and 50 megapixels, and a decoded image costs roughly four bytes per pixel regardless of how small the original .jpg file was. Six full-size photos held in memory at the same time is comfortably several hundred megabytes. A mobile browser does not report that as an error a page can catch — it simply ends the tab.
So the renderer never holds them all. It works one cell at a time: decode that photo, already scaled down to roughly the size of the cell it is going into, draw it, release it, move to the next. A 4000-pixel photograph landing in a 540-pixel cell is decoded at about 810 pixels and never exists at 4000. Peak memory is the collage canvas plus a single cell-sized image, no matter how many photos are in the arrangement.
Two limits back that up: a maximum of twelve photos, and a combined ceiling of roughly 200 megapixels across all of them together. The combined figure is the one that actually protects the tab — a per-photo limit would happily wave through twelve large photographs one at a time.
Framing, rotation and file size
Each cell is filled edge to edge: the picture is scaled until it covers the cell, and whatever falls outside is trimmed. Drag inside a cell to choose what survives the trim. The drag is clamped, so it stops before a strip of background could appear at any edge.
Photos taken on a phone carry a rotation flag rather than rotated pixels, and ignoring it is how a collage ends up with a sideways picture in one cell. The tool applies that flag where the browser supports it and tells you plainly when it could not.
For output, PNG is lossless and ignores the quality slider entirely, so the slider is disabled for it; JPEG and WebP use it. PNG can also export with a transparent background, leaving the margins and gutters empty rather than filled — an option JPEG cannot offer, because the format has no transparency. After each export the tool reports the real byte count of the file it produced, measured rather than estimated.