About

A mosaic composition arranges N source images into a regular grid of c columns and r rows, where r = ceil(N ÷ c). Each tile is rendered at a computed cell size of w_cell × h_cell pixels. Incorrect aspect ratio handling during tiling produces visible stretching or cropping artifacts that degrade the final output. This tool composites images onto a single Canvas element using cover-fit geometry, preserving each source's native aspect ratio while filling the cell completely. The resulting PNG is rendered at the exact resolution you specify, not downscaled by browser reflow.

Spacing and border radius parameters accept sub-pixel values, and the layout engine accounts for cumulative rounding errors across the grid to prevent single-pixel gaps at tile boundaries. Note: source images below 200×200 px may exhibit interpolation blur when scaled to large cell sizes. For print-quality output at 300 DPI, ensure your source images are at least 1200×1200 px each.

Formulas

The mosaic grid geometry is computed from the number of source images and the chosen column count. The row count is derived as:

r = ceil(N ÷ c)

Each cell's pixel dimensions within the output canvas of width W and height H, with gap spacing g:

w_cell = W − g ⋅ (c + 1)c

h_cell = H − g ⋅ (r + 1)r

For cover-fit rendering, the scale factor for each source image of dimensions w_src × h_src is:

s = max(w_cellw_src, h_cellh_src)

The source crop rectangle is then centered:

x_crop = w_src − w_cell ÷ s2

Where N = total number of images, c = columns, r = rows, g = gap in pixels, W = output width, H = output height, s = cover-fit scale factor.

Reference Data

Output Preset	Resolution	Columns	Tile Size (approx.)	Best For
Instagram Post	1080 × 1080 px	3	360 × 360 px	Social media grid
Instagram Story	1080 × 1920 px	3	360 × 320 px	Vertical story collage
Facebook Cover	1640 × 624 px	4	410 × 312 px	Wide banner mosaic
HD Wallpaper	1920 × 1080 px	4	480 × 540 px	Desktop wallpaper
4K Wallpaper	3840 × 2160 px	6	640 × 720 px	High-res display
A4 Print (300 DPI)	2480 × 3508 px	4	620 × 877 px	Print-quality poster
Letter Print (300 DPI)	2550 × 3300 px	5	510 × 660 px	US Letter prints
Twitter Header	1500 × 500 px	5	300 × 250 px	Profile banner
Pinterest Pin	1000 × 1500 px	2	500 × 750 px	Vertical pin layout
YouTube Thumbnail	1280 × 720 px	3	427 × 360 px	Video thumbnail
Poster 24×36 (150 DPI)	3600 × 5400 px	6	600 × 900 px	Large-format poster
Square 2K	2048 × 2048 px	4	512 × 512 px	Album art, icons

Frequently Asked Questions

If N is not evenly divisible by c, the remaining cells in the last row are left empty and filled with the background color. The tool does not stretch or duplicate images to fill gaps. You can reorder tiles so the empty cells fall in the least visible position.

Cover-fit scales each source image so it completely fills the cell, cropping edges that overflow. Contain-fit scales the image to fit entirely within the cell, leaving letterbox bars filled with the background color. Cover-fit produces a cleaner grid with no visible padding, but may crop important content near image edges.

Browser Canvas implementations typically support up to 16384 × 16384 px (or 268 megapixels total). This tool clamps output to 8192 px per side to stay within safe memory limits. For a 300 DPI A4 print (2480 × 3508 px), this is well within range.

Yes. A gap of g px consumes g ⋅ (c + 1) horizontal pixels total. At 4 columns with a 20 px gap on a 1920 px canvas, that is 100 px consumed by gaps, leaving 1820 px for tiles (455 px per tile).

PNG compression is lossless and highly dependent on image entropy. Photographic content with high color variation produces files 5−20 MB at 4K resolution. Mosaics with large uniform gap areas compress more efficiently. The tool does not apply lossy compression; the full pixel data is preserved.

At very small cell sizes (below 50 px) with large border radius values, the clipping path may produce anti-aliasing artifacts where the rounded corner meets the gap. Keep border radius below 50% of the smaller cell dimension for clean results.