Overview
Introduction
This tool combines several separate PNG images into a single grid-layout mosaic, similar to a contact sheet, entirely in your browser.
Every image you upload gets its own cell in the grid, resampled to a consistent size so the layout stays even.
What Is PNG Mosaic Creator?
A client-side image compositor that takes an array of uploaded images, resamples each one to a shared cell size using nearest-neighbor scaling, and paints them side by side into one output canvas arranged in a grid.
It differs from a simple tiling tool in that every cell can hold a genuinely different image rather than a repeat of the same one.
How PNG Mosaic Creator Works
The tool first works out a grid shape: a column count (defaulting to roughly the square root of the image count) and however many rows are needed to fit every image.
Every source image is then resampled to a shared cell size (via the shared nearest-neighbor resize helper) and copied pixel-by-pixel into its position in the output canvas, row by row.
When To Use PNG Mosaic Creator
Use it to build a quick contact-sheet preview of several images, a simple grid collage, or a sprite-sheet-style overview of related graphics.
It's also handy for visually comparing a batch of icons, logos, or screenshots side by side in one file.
Often used alongside PNG Slideshow Creator, PNG Rotator and PNG Dimensions Finder.
Features
Advantages
- Handles source images of different sizes automatically by resampling them to a shared cell size.
- Configurable column count and cell size for control over the final grid's shape and resolution.
- Runs entirely client-side; none of your uploaded images are sent anywhere.
Limitations
- Each image is resampled to fit its cell exactly (no aspect-ratio-preserving letterboxing), so images with very different proportions can look stretched.
- Requires at least 2 images, and the total output size is capped at 4096x4096px, which limits how many images/how large a cell size you can combine at once.
Examples
Best Practices & Notes
Best Practices
- Use similarly-proportioned source images (e.g. all square icons) to avoid visible stretching in the grid.
- Pick a column count close to the square root of your image count for a balanced, roughly square-looking mosaic.
Developer Notes
The compositor reuses the shared resizeNearest, getPixel, and setPixel helpers from the pixel-buffer module instead of reimplementing scaling or pixel copying, and stays a pure function so the whole grid layout is unit-testable without touching a canvas.
PNG Mosaic Creator Use Cases
- Building a quick visual contact sheet of a batch of screenshots
- Combining a set of icons or logos into one comparison image
- Creating a simple photo collage from several uploads
Common Mistakes
- Uploading images with very different aspect ratios and expecting them to keep their proportions — each is stretched to fill its square cell.
- Requesting more columns/rows than the 4096px output cap allows at the chosen cell size.
Tips
- Lower the cell size first if you hit the maximum-output-size error, since it has a bigger effect on total size than the column count.
- Upload images in the order you want them to appear — they fill the grid left-to-right, top-to-bottom.