Image Tiler
Combine one or more images into tiled patterns — repeat a single tile, alternate two in a checkerboard, stack layers, build a 4×4 border pattern, or scatter a random mix across a grid. All processing happens in your browser — your images never leave your device.
Drop images here or click to browse (multiple allowed)
PNG, JPG, WebP, BMP, GIF — add more at any time
What is Image Tiler?
The Image Tiler combines one or more images into a single tiled output image — the fast way to build repeating textures, backgrounds, and pattern sheets for games and design work. Import several tiles, pick a layout mode, and the tool scales every image to a uniform tile size and paints them onto a grid you control. Five modes cover the common cases: repeat one tile everywhere, alternate two tiles in a checkerboard, stack semi-transparent layers into a composite tile, frame a 4×4 pattern where the corners match the center and the edges use a second tile, or scatter a random mix of every imported image across a grid from 2×2 up to 10×10. Everything runs on the HTML5 Canvas in your browser, so your images are never uploaded to any server.
Tiling Modes
- Single: Repeats one image across every cell of the grid — click any imported tile to make it the active one. The classic way to preview and export a seamless texture repeat.
- Checkered: Alternates two images like a checkerboard — assign any imported image to the A and B roles. Ideal for floor tiles, board-game surfaces, and two-tone backgrounds.
- Layers: Stacks your enabled images on top of each other (in slot order) into one composite tile, then repeats that tile across the grid — click tiles to toggle them in or out of the stack. Use transparent PNGs to build up decals, overlays, and grunge on a base texture.
- 4×4 Pattern: A fixed 4×4 grid where the four corners and the 2×2 center use one image and the edge cells use another — assign both roles from any imported tiles for a quick bordered-panel or window pattern.
- Mix: Randomly places your enabled images across the grid (2×2 up to 10×10) — toggle tiles in or out of the pool, then hit Shuffle until you like the arrangement. Great for organic variation in ground tiles, foliage, and rubble.
How to Use
- Import Images: Drag and drop one or more images, or click to browse. Use the + card to add more later; each image gets a numbered slot, and you can reorder or remove them.
- Pick a Mode and Assign Tiles: Choose Single, Checkered, Layers, 4×4 Pattern, or Mix. Click a tile to set the active image (Single) or the A / Center role, use the dropdowns to assign both roles in two-image modes, and click tiles to toggle them on or off in Layers and Mix.
- Set the Grid and Tile Size: Choose columns and rows (2–10) and the pixel size each tile is scaled to. The 4×4 Pattern mode locks the grid at 4×4.
- Preview Live: The result re-renders instantly as you change anything. In Mix mode, click Shuffle to re-roll the arrangement.
- Download: Click "Download PNG" to save the tiled image to your device.
Common Uses
- Game backgrounds: Turn a single ground or wall tile into a full repeating background sheet sized exactly to your level.
- Texture variation: Use Mix mode with several grass, stone, or dirt variants to break up obvious repetition in terrain.
- Board and puzzle surfaces: Build checkerboards, tile floors, and game boards from two alternating tiles.
- Composite tiles: Layer transparent decals (cracks, moss, markings) over a base texture and repeat the result.
- Pattern prototyping: Quickly mock up wallpaper, fabric, and UI panel patterns before committing to full-resolution art.
Frequently Asked Questions
What image formats can I import?
PNG, JPG, GIF, BMP, and WebP. Transparency in PNG and WebP images is preserved — which is exactly what makes Layers mode work for stacking decals over a base tile. The output always downloads as PNG so nothing is lost to compression.
Do my images need to be the same size?
No. Every image is scaled to the tile width and height you set in the controls, so mixed sizes and aspect ratios are fine. The tile size defaults to the dimensions of the first image you import; images with a different aspect ratio will be stretched to fit the tile, so tiles work best when your sources share proportions.
How do I choose which image each mode uses?
Click a thumbnail to set the active image in Single mode (or the A / Center role in the two-image modes), use the dropdowns to assign both roles in Checkered and 4×4 Pattern, and click thumbnails to toggle images in or out of the stack or random pool in Layers and Mix.
How does the 4×4 Pattern mode decide which image goes where?
The grid is fixed at 4×4. The four corner cells and the four center cells (the middle 2×2 block) use the Center image; the twelve remaining edge cells use the Edge image. The result reads as a framed panel — useful for windows, bordered floors, and UI plate textures.
How large can the output image be?
Up to a 10×10 grid of 1024px tiles — 10,240×10,240 pixels. That is within what desktop browsers support, but very large canvases can be slow on lower-end devices; for most game work, tiles of 64–256px are plenty.
Is my image uploaded anywhere?
No. All tiling happens entirely in your browser using the HTML Canvas API. Your images never leave your device — there are no server uploads, no cloud processing, and nothing is stored anywhere.