Mosaic Tiles: Turn a Photo Into Tiles or Stained Glass
Irregular hand-cut tiles rather than a rigid grid, each taking the average of the pixels it actually covers, with grout drawn wherever two tiles meet even when they happen to be the same colour.
Drop images here
or click to browse · or paste with Ctrl+V
JPG · PNG · WebP · GIF · BMP · AVIF
Small tiles keep the subject readable. Large tiles turn it into pattern.
At zero you get a perfect grid. Raising it lets tile centres wander, which is what real mosaic and stained glass look like.
Grout is drawn wherever two tiles meet, even if they happen to be the same colour.
Dark grout reads as stained glass, pale grout as ceramic mosaic.
Presets
Your photos are never uploaded. The tiling and the export both run inside this browser tab.
People also use
Everything this tool does
Tiles that wander, like hand-cut ones
Tile centres are displaced by a deterministic amount, so the shapes meet at angles the way real mosaic and stained glass do. At zero irregularity you get a perfect grid if that is what you want.
Every tile averaged over its real area
Not sampled at the centre. On a flat test image with light noise, centre sampling gave tiles varying by 31 levels while averaging gave tiles identical to each other.
Grout follows the tiles
It is drawn wherever two tiles meet, even when they are the same colour. On a completely flat image the full lattice appeared, 4,665 grout pixels, where a colour-difference approach would have drawn nothing.
Completely deterministic
Tile positions come from a hash of their coordinates rather than a random generator, so the same photo and settings always give the same mosaic and a batch matches.
Grout colour is yours
Dark grout reads as stained glass leading, pale grout as ceramic tile. It is the single control that decides which craft the result resembles.
Drag to compare
Before and after share one frame with a slider between them, which is how you judge whether the tile size has kept your subject readable.
Six purpose-built presets
Ceramic mosaic, stained glass, fine tiles, square grid, bold panels and no grout.
Batch with one ZIP
Tile a whole set with identical settings and take everything as a single archive built in your browser.
Transparency preserved
The alpha channel is untouched for PNG and WebP output.
Nothing is uploaded
No server, no queue, nothing to delete afterwards. Close the tab and every trace of the image goes with it.
What each control does
Tile size decides how much of the photograph survives, irregularity decides whether it reads as machine-made or hand-cut, and the grout decides which craft it looks like.
| Setting | What it does | Try | Good for |
|---|---|---|---|
| Size 6-12 | fine tiles, subject readable | grout 1 | Portraits, detail |
| Size 20-40 | clearly a mosaic | grout 2-3 | Most photos |
| Size 45-60 | large panels, abstract | grout 3-5 | Backgrounds, pattern |
| Irregularity 0 | a perfect square grid | any | Pixel tile look |
| Irregularity 50-80 | hand-cut shapes | any | Real mosaic feel |
| Dark grout | black or near black | grout 2-4 | Stained glass |
| Pale grout | white or cream | grout 1-2 | Ceramic mosaic |
Average
over each real tile
0
files uploaded
0
randomness, fully deterministic
6-60
tile size range
ZIP
batch download
Free
no account needed
FlipMyFormat vs other mosaic tools
| Capability | FlipMyFormat | Typical free tool |
|---|---|---|
| Files stay in your browser | ||
| Irregular hand-cut tile shapes | ||
| Each tile averaged over its real area | ||
| Grout drawn between same-coloured tiles too | ||
| Deterministic, so a batch matches | ||
| Batch ZIP download without paying | ||
| No watermark on the output |
How to make a mosaic that looks made rather than filtered
Two decisions separate a convincing mosaic from an obvious filter, and neither of them is the tile size. The first is whether the tiles are all the same shape. A perfect square grid is what software finds easiest and what no mosaicist has ever produced, because tiles are cut by hand and set by eye, so their centres wander and their edges meet at angles. Allowing those centres to move is what makes the result read as a made object rather than a rendered one, and it costs nothing except a little irregularity. The second decision is what happens at the boundaries. Grout is not a decorative outline around dark areas; it is the physical gap between two adjacent pieces, and it is there whether or not the two pieces happen to be the same colour. A filter that draws lines where colours differ produces something that looks like a cartoon outline, with grout appearing around the subject and vanishing across a plain sky. Grout that follows tile membership appears everywhere, evenly, exactly as it does on a wall. Beyond that it is a question of subject and scale. Mosaics work by simplification, so bold shapes and strong colour survive and fine detail does not. Tile size is the lever: small enough and a face stays recognisable, large enough and you have made a pattern out of a photograph, and both are legitimate as long as you have chosen which one you wanted.
- 1
Add a photo
Drag it in, click to browse, or paste with Ctrl+V. Bold shapes and strong colour survive tiling far better than fine detail.
- 2
Set the tile size and irregularity
Size decides how much of the photo survives. Irregularity turns a rigid grid into hand-cut shapes.
- 3
Choose the grout, then export
Dark grout reads as stained glass, pale grout as ceramic. Export PNG so the grout lines stay crisp.
Why the two easy shortcuts look wrong
Averaging the tile, not sampling its middle
The cheap way to colour a tile is to read the pixel at its centre, which takes one lookup instead of hundreds. It works acceptably on a clean image and falls apart on anything with grain, because a single noisy pixel then decides the colour of an entire tile and neighbouring tiles jump around for no visible reason. Averaging over the pixels a tile actually covers is the honest approach and it is stable: on a test image made of one flat colour with light noise added, centre sampling produced tiles varying by 31 levels across the picture, while averaging produced tiles that were identical to each other. The difference is most obvious at larger tile sizes, where each mistake covers more of the frame.
Grout belongs to the tiles, not the colours
It is tempting to draw the grout where colours change, because that is a single comparison per pixel and it looks right on a busy photograph. It is wrong, and a flat area exposes it immediately: two adjacent tiles cut from the same sheet of glass are still two tiles with a gap between them, and a mosaic of a plain blue sky is still visibly a mosaic. Here the grout is drawn wherever a pixel's tile differs from its neighbour's, regardless of what colour either tile ended up. We check it on a completely flat image, where a colour-difference approach would produce nothing at all: the tile-membership approach drew 4,665 grout pixels, the full lattice, exactly as it should.
What people use it for
Stained glass artwork
Large irregular tiles with heavy dark grout is exactly the leaded glass look, and it suits portraits and religious imagery.
Wall art and prints
The mosaic look prints well at large sizes, where the tiles are meant to be seen individually.
Backgrounds and textures
Large tiles turn any colourful photo into an abstract pattern that sits behind text.
Craft and pattern design
A useful starting point for planning an actual mosaic, since the tile layout is visible.
Obscuring a face or a plate
Large tiles make a region unreadable while looking like a deliberate treatment rather than a redaction.
Event and festival graphics
The bright, blocky look reads well on posters and at small sizes.
Album and cover art
Stained glass framing gives a portrait an immediately classical association.
Children's activity sheets
A grid mosaic with pale grout makes a good colour-by-tile template.
Six tips worth knowing
Raise the irregularity. A perfect grid is the giveaway that it was made by software rather than by hand.
Dark grout reads as stained glass and pale grout as ceramic mosaic. It changes the result more than the tile size does.
Bold shapes and strong colour survive tiling. Fine detail does not, so crop tight on your subject first.
For a readable face, keep the tiles under about twelve pixels relative to the size the image will be viewed at.
Set grout to zero if you want the tiles to meet directly, which reads more like a low-polygon render than a mosaic.
Export PNG. Flat tiles with hard grout lines are exactly the content JPEG fringes worst.
Troubleshooting
It looks like a pixelated photo
Your irregularity is at or near zero, so the tiles are a perfect grid. Raise it to fifty or more.
My subject is unrecognisable
The tiles are too large for the amount of detail in the photo. Reduce the tile size, or crop tighter so the subject fills more of the frame.
The grout disappeared in places
It should not. Grout is drawn wherever two tiles meet regardless of colour. Check the grout width is not zero, and that its colour is not similar to the tiles around it.
Tiles look noisy and jump around
That should not happen here, since each tile is averaged over its whole area. If it does, the source image may already have heavy compression blocks.
Frequently asked questions
How is this different from pixelating an image?
Pixelation uses a rigid square grid with no gaps. This uses irregular tile shapes with grout between them, which is what mosaic and stained glass actually look like.
Why does irregularity matter so much?
Because a perfect grid is the one thing no mosaicist has ever produced. Tiles are cut by hand and set by eye, so their centres wander and their edges meet at angles. Allowing that is what makes it read as a made object.
How is each tile's colour chosen?
By averaging every pixel the tile actually covers. Sampling the centre pixel instead is cheaper but unstable: on a noisy test image, centre sampling gave tiles varying by 31 levels where averaging gave tiles identical to each other.
Why is grout drawn between tiles of the same colour?
Because grout is a physical gap, not an outline. Two tiles cut from the same sheet still have a join between them. On a completely flat test image we drew the full lattice, 4,665 grout pixels, where a colour-difference approach would draw nothing.
What tile size should I use?
Under about twelve pixels relative to the display size keeps a face readable. Twenty to forty clearly reads as a mosaic. Beyond forty-five you are making a pattern rather than a picture.
How do I get a stained glass look?
Larger tiles, high irregularity and heavy dark grout, around four pixels. The dark leading between bright irregular shapes is the whole signature of the medium.
Is the layout random?
It is irregular but not random. Tile positions come from a hash of their coordinates, so the same photo and settings always produce exactly the same mosaic.
Can I turn the grout off?
Yes, set it to zero and the tiles meet directly. That reads more like a low-polygon render than a mosaic, which is a legitimate look in its own right.
Which photos work best?
Bold shapes and strong colour. Mosaics work by simplification, so fine detail is lost by design. Crop tight on your subject before tiling.
Can I use it to obscure a face?
Large tiles will make a region unreadable and look deliberate rather than redacted. For genuine redaction, a solid block is safer.
Does the image change size?
No. The output keeps your original width and height, with the tiling drawn into it.
Which format should I export?
PNG. Flat areas of colour separated by hard grout lines are precisely what JPEG handles worst, adding fringing along every line.
Are my photos uploaded to a server?
No. The tiling and the export both run in your browser using the canvas API. Nothing is sent anywhere.
Is transparency preserved?
Yes for PNG and WebP output. The alpha channel is untouched. JPG has no alpha, so transparent areas are filled with the background colour first.
Can I use this to plan a real mosaic?
It is a reasonable starting point, since the tile layout is visible and each tile has one flat colour. You would still need to map those colours onto tiles you can actually buy.
Can I process a batch?
Yes. Add as many photos as you like and the same tile size, irregularity and grout are applied to each.
Can the effect be undone?
No. Averaging discards the detail inside each tile permanently. Your uploaded file is never modified, so keep the original.
Does it add a watermark or need an account?
No to both. No sign-up, no email wall, no daily limit and no watermark on the output.