A grid is the simplest way to show several photos as one story. A set of holiday snapshots, a before and after pair, or four product angles all read more clearly side by side in one frame than as four things a viewer has to open and compare one at a time. The trick is getting every cell the same size without stretching or awkwardly cropping the photos that do not already share an aspect ratio, which is the part this image collage maker handles for you.
Every photo is decoded, cropped and composited entirely inside your browser tab. Nothing is uploaded while you build the layout, and the finished grid is encoded as a single PNG on your own device, so a batch of personal photos never has to leave your machine just to be arranged into one picture.
How this image collage maker fits photos into a grid
Every cell in the grid is the same fixed size, and each photo is scaled and centre cropped to fill that cell completely rather than being squashed to match it. A tall portrait photo and a wide landscape photo dropped into the same collage both end up filling their cell edge to edge, with the excess trimmed evenly from the sides or the top and bottom rather than distorting the image.
This is the same cover style of cropping a CSS background-size: cover rule or an object-fit: cover image produces on the web, applied manually with the canvas drawImage method using a source rectangle that matches the cell's aspect ratio before it is drawn into the destination cell.
Choosing a column count
Column count decides the shape of the whole grid as much as the number of photos does. Two columns produce large cells that suit a small set of photos meant to be looked at individually, three or four columns suit a broader set where the point is the overall pattern rather than any single picture, and anything beyond five columns starts to shrink each photo enough that fine detail stops being visible.
- Two columns for four to six photos you want shown at a reasonably large size.
- Three columns for a balanced grid of nine or twelve photos.
- Four columns and above for a dense mosaic where the pattern matters more than any individual photo.
- An odd number of photos still fills the grid correctly, the last row simply ends early rather than stretching to fill the width.
Gap and background colour
The gap control sets the space between cells in pixels, and the background colour shows through in that gap along with any thin margin around the outside edge. A gap of zero produces a seamless tiled look where the photos butt directly against each other, while a larger gap with a white or black background reads more like a printed contact sheet with a visible border around every photo.
Matching the background colour to the destination often matters more than the gap size itself. A white background disappears cleanly onto a document or a light website, while a dark background suits a collage destined for a slide deck or an app with a dark theme, so the seams between photos are never the first thing a viewer notices.
One shared canvas, position calculated from each photo's index in the grid
The tool calculates the row and column position for every photo from its index in the list, works out the pixel coordinates of that cell including the gap, decodes each photo with the browser's image loader, and draws a centre cropped version of it into that cell on one large canvas. Once every photo has been placed, the whole canvas is encoded as a single PNG file through canvas.toBlob.
Because the entire process runs client side, there is no upload step and no server side limit on how many photos you can combine, only the memory available in your own browser tab. A dozen photographs at typical camera resolution compose into a finished grid in a fraction of a second on current hardware.
Reordering and removing photos before you export
Photos fill the grid in the order they were added, left to right and top to bottom, matching how most people already think about a contact sheet. Removing a photo from the list closes the gap it left rather than leaving an empty cell behind, so the grid always stays fully packed regardless of how many times you add or remove a picture before exporting.
This is the fastest way to combine multiple photos into one file when you just need a single image to share or attach, rather than a folder of separate pictures a recipient has to open one at a time. If you want to make a photo collage online without installing a design program, dropping a handful of files in and adjusting the column count usually gets a usable result in under a minute.
Some people describe the same idea as a grid collage generator, since the defining feature is the even grid of equally sized cells rather than a freeform scrapbook style layout, and that is exactly what this tool produces.
How to make a photo collage
- 1
Add your photos
Drag several images onto the drop area or click it to choose them from your device.
- 2
Set the column count
Choose how many columns wide the grid should be. More photos usually suit more columns.
- 3
Set the gap and background
Adjust the spacing between cells and pick the colour that shows through the gap.
- 4
Build the collage
Press the button to crop and composite every photo into one grid image.
- 5
Download
Save the finished collage as a single PNG file.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.drawImageThe browser method this tool uses to crop and place each photo into its grid cell using a source rectangle.developer.mozilla.org
- W3C: CSS Images Module Level 3Defines the cover sizing behaviour this collage maker reproduces manually when it centre crops each photo.w3.org
- WHATWG: HTML canvas specificationThe specification covering the canvas element and toBlob encoding this tool uses to produce the final image.html.spec.whatwg.org
Frequently asked questions
Common questions about the image collage maker.
There is no fixed limit imposed by the tool itself. The practical ceiling is the memory available in your browser tab, since every photo has to be decoded before it is drawn. Most devices handle several dozen typical photographs without any difficulty.
No. Each photo is centre cropped to fill its cell completely rather than being squashed or stretched, the same way a cover style background image behaves on a website. Some of the edges of a photo with a very different aspect ratio to the grid cell will be trimmed, but nothing is distorted.
No. Each photo is placed with a single drawImage call that reads a cropped source rectangle straight out of the decoded bitmap and writes it into its cell on the shared canvas, repeated once per photo in the batch. That loop never constructs a request, so a dozen personal holiday photos are composited without any of them leaving your device.
Photos are placed in the order you add them, filling left to right and then top to bottom. Removing a photo and re adding it moves it to the end of the list, which is currently the way to reorder the layout.
Always PNG. That keeps the output lossless regardless of how many photos were combined, and it means any photo in the batch that already contains transparency is respected rather than being flattened onto an unexpected colour.
Yes. A grid of two, three or four photos at a chosen column count is exactly the layout most social platforms expect for a multi photo post, and downloading one combined file avoids uploading several separate images and hoping the platform arranges them the way you intended.