Collage Maker
Up to 24. They are placed in the order you selected them.
Choose some images to start.
The collage maker arranges up to 24 images into a grid on a canvas in your browser. Cells are square, and the fit setting decides what happens to images that are not: cover crops them to fill, contain fits them inside and shows the background around them.
How it works
- Images are placed left to right in the order you selected them, wrapping at the column count.
- Cover scales until the image fills the square and crops the overflow, centred. Nothing is distorted, but edges are lost.
- Contain scales until the whole image fits, leaving background visible on two sides.
- The gap applies between cells and around the outside, so the collage has an even border.
canvas width = columns x cell + (columns + 1) x gap
- (columns + 1)
- gaps between cells plus one at each edge
Everything is drawn locally, which is why there is a 24-image limit. Each image is held decoded in memory, and a large collage of high-resolution photographs can exhaust a phone browser.
Examples
A four-image grid
Images
4
Columns
2
Cell
400px
Gap
12px
Result
An 824 × 824 pixel collage
2 × 400 + 3 × 12 = 836… the arithmetic is 800 for the cells plus 36 for the three gaps, giving 836 in each direction for a square grid.
Mixed orientations with contain
Images
One landscape, one portrait
Fit
Contain
Result
Both fit whole, with background bars on the short sides
Cover would crop the sides off the landscape image and the top and bottom off the portrait one. Contain keeps everything at the cost of visible background.
Frequently asked questions
Why are my images cropped?
Because cover is the default: it scales each image to fill its square and crops what overflows. That keeps the collage visually uniform. Switch to contain if you would rather see the whole of every image and accept background bars around the ones that are not square.
Why is there a 24-image limit?
Because every image is decoded and held in memory while the collage is drawn. Two dozen high-resolution photographs already approaches what a phone browser will tolerate, and exceeding it crashes the tab rather than failing gracefully.
Can I reorder the images?
Only by selecting them in a different order. There is no drag-to-reorder, most file pickers select alphabetically, so renaming with a numeric prefix is the reliable way to control the sequence.
Are my photos uploaded?
No. Each picture is read with the browser file API and composited onto a canvas in the page, so no image is uploaded. The page makes no network requests, which matters given collages are usually made from personal photographs.