This page is shown in English, the language your browser asks for.
This page's code did not start.
Opening index.html directly from a folder blocks JavaScript modules, so nothing will happen when you choose images. Serve the folder over http instead:
This opens as soon as you choose a file above.ready — disconnect from the internet and this still works.not available in this browser (everything else still works).needs https:// or localhost to cache for offline use.caching unavailable here, but nothing is uploaded either way.your files have gone nowhere. {total} files loaded, all of them this page's own. {platform}something contacted {hosts}, which this tool never does. Treat that as worth investigating. {platform}The page's own ad, measurement and donate-button scripts loaded from {hosts} host; not one of them was given a file or a byte of one.The page's own ad, measurement and donate-button scripts loaded from {hosts} hosts; not one of them was given a file or a byte of one.Something broke: {detail}. Reload the page to start over.Reading {count} file…Reading {count} files…Try an exampleBuilding an example…This browser could not build the example. Choose a file instead.
Image Layout — collage and contact sheet maker
Put your pictures together. Keep them on your machine.
● Your images are never uploaded. There is no server.
Your images are read, arranged and written by your own browser, using the canvas and image encoders it already has. This tool has no network feature of its own: no upload, no remote image import, and no codec to fetch.
✗ No upload
✗ No account
✗ No watermark
✓ Works offline
✓ Open source
✓ Files stay on your device
Live check:checking…
Offline:checking…
Open DevTools, watch the Network tab, and make a layout. No request carries an image, a thumbnail, a filename or a byte of your pictures. Or disconnect from the internet and make one anyway.
How the privacy claim is verifiable
The pictures stay here. Your browser reads the files you choose and draws the combined picture in memory. This tool has no network feature and no endpoint to receive your files. The page's Content-Security-Policy names the addresses it may contact; your pictures, their names and their thumbnails are never handed to them.
The layout is made by this page. There is no image service behind the preview and no remote renderer behind the download. The same rectangles decide where the pictures land in both, and the browser's own encoder turns the finished canvas into a PNG, JPEG or WebP.
The original files are left alone. A layout is a new image. The files you picked stay as they were; no edited copy is written over them. Source EXIF, GPS, camera and date tags are not copied into the layout, because it is made from pixels rather than from the original file containers.
What Google loads, and what it is not given. The page's advertising and measurement scripts come from Google. Neither is given your images, their names, their dimensions, their number, or anything drawn from them. The code that reads and arranges a picture is served from this origin.
What the donate button loads, and what it is not given. The “Buy me a coffee” button is drawn by a script from cdnjs.buymeacoffee.com and letters itself from Google Fonts. It is a link, and it is handed nothing about your pictures. Clicking it opens the service's own page.
Disconnect and check. After the page has loaded, it can import, preview and export with the network disconnected. The example is drawn in the page too; it is never downloaded from somewhere else.
Check it yourself. None of the above has to be taken on trust. This page is generated from the templates and config in the repository by a build script you can read and run yourself, and the result is committed to the dist branch — so you can diff what is served against what a build of the sources produces:
The files worth reading first are config/site.toml for the Content-Security-Policy, src/arrange.js for the geometry shared by the preview and export, src/shared/image-list.js for how the chosen pictures are read, and src/shared/image-convert.js for the browser's encoder and the check that it wrote the format you asked for.
If your employer's security software warns about an upload. It is watching the moment a file is chosen in a browser, and it cannot know whether the page intends to send it — so it warns on the choosing. Nothing is sent here: open your browser's developer tools, switch to Network, and choose a file. There is no request carrying it, and no request at all beyond the page's own local preview. That is the same check anyone in your IT team can run in half a minute.
1 Choose and order images
Drag an image to move it, or use its arrows. Images fill the layout in this order, from left to right and top to bottom.
2 Arrange the layout
Layout preset Choose a ready-to-use layout, then adjust any setting. Presets keep your images and their individual crop adjustments.
Output width (px) Height follows the layout. Up to 8,192 px per side and 32 megapixels.
Image fit Fitting starts with the whole picture. Filling starts with a crop that covers the box. Adjust each image in the preview.
Transparent background Transparency is available in PNG and WebP.
Transparent background The preview shows placement and cropping. The download uses the original images at the output size.
Zoom 100% 100% uses the Image fit setting. Zoom in to crop closer, or zoom out to show more background. Each frame supports 25%–400%.
Vertical position A position slider is available whenever the image and frame have different sizes.
Live preview
Choose images, or try the example, to see your layout here.
Adjust one frame
Select a frame in the preview, then drag its image. Zoom and position apply only to that frame.
1 image{n} imagesMove {name} earlierMove {name} laterRemove {name}{width} × {height} pxCould not read {n} file(s): {names}. Try a JPG, PNG, WebP or AVIF that your browser can open.Enter whole numbers within the shown ranges. Original shapes are available in strips.The gaps and margin leave too little room for the images. Reduce them or increase the output width.This layout exceeds 8,192 pixels on a side or 32 megapixels. Reduce its width, add grid columns, or use fewer images.The browser could not draw this preview. Try fewer or smaller images.The browser could not read these images. Try again with fewer or smaller files.The browser could not create the image. Reduce the output width or try PNG.The browser could not encode {format}. Try PNG or a smaller output width.This browser cannot write {format}. Choose PNG or JPEG.Something went wrong. Reload the page and try again.{dimensions} · {n} imagesDrawing preview…{n} · {name}Adjust frame {n}: {name}Drawing image {done} of {total}…Starting the image…Writing the image…Cancelled. Your images and settings are ready to try again.{dimensions} · {format} · {size}. Ready to download.{n} KB{n} MBThe gaps, margin and empty areas stay transparent.The background fills the gaps, margin and empty areas.JPEG uses the background colour because it cannot store transparency.This browser cannot write WebP. PNG and JPEG are available.
Did this do the job?
What went wrong?
Thank you — that helps.
Only the answer is sent, and only when you press a button. Never your file, its name, or anything about it.
# Image Layout — collage and contact sheet maker
Put your pictures together. Keep them on your machine.
> Arrange images in a grid or strip with ready-to-use presets. Adjust each picture with pan and zoom, then save one PNG, JPEG or WebP. Free, offline and no upload.
This page is an interactive tool that runs entirely in your browser, at https://abox.tools/image-layout/ — nothing you give it is uploaded. What follows is everything the page says about the tool in words; to use it, open the address.
## Your images are **never uploaded**. There is no server.
Your images are read, arranged and written by your own browser, using the canvas and image encoders it already has. This tool has no network feature of its own: no upload, no remote image import, and no codec to fetch.
- ✗ No upload
- ✗ No account
- ✗ No watermark
- ✓ Works offline
- ✓ Open source
- ✓ Files stay on your device
## How to arrange multiple images into one picture
1. **Choose your pictures.** Drop several images onto the picker, or browse for them. The tiles show what the browser could open. The example makes pictures on this page if you want to try the controls first.
2. **Put them in order.** Drag a tile to move it, or use its arrow buttons. Remove a picture that does not belong. The order runs across each row of a grid, from left to right in a horizontal strip, and from top to bottom in a vertical one.
3. **Start with a preset, then set the spacing.** Choose square cells, a contact sheet, a strip, portrait cells or a seamless grid. Adjust the output width, grid columns, cell shape, gap and outer margin. Presets keep your filename and each picture's existing framing.
4. **Adjust the picture inside each frame.** Select a picture in the preview or choose it from Frame. Drag to pan, or use Horizontal position, Vertical position and Zoom. Zoom out below 100% to show more background, or zoom in to enlarge and crop. At 100% zoom, “Fit whole image” keeps every edge; “Fill box (crop edges)” starts with a centred crop. Reset this frame restores the selected picture, and Reset all frames restores every picture's starting fit.
5. **Check the preview, then save one image.** The preview shows the arrangement and crop used by the download. Choose PNG, JPEG or WebP, set a background or transparency where the format permits it, and create the image. Export draws from the original files at the output size.
## The longer version
[How to arrange multiple images into one picture](https://abox.tools/guides/arrange-images/): Make a collage, contact sheet or image strip: choose a grid, keep pictures whole or crop to fill, set the spacing and save a PNG, JPEG or WebP without uploading.
## Also in the box
- [HEIC to JPG](https://abox.tools/heic-to-jpg/): The photos an iPhone makes, in a format everything opens.
- [WebP to JPG](https://abox.tools/webp-to-jpg/): The pictures the web saves, in the format everything still takes.
- [PNG to WebP](https://abox.tools/png-to-webp/): The same picture, often a third off, with the see-through parts intact.
- [AVIF to JPG](https://abox.tools/avif-to-jpg/): The format websites save now, in the one everything has always taken.
## Questions
### Are my images uploaded anywhere?
No. Reading, arranging and exporting happen in your browser on your own machine. This tool adds no network feature to the page, and the files, thumbnails and names are never handed to the advertising or measurement scripts. It also works with the network disconnected after loading.
### Can I make a collage, a contact sheet or a strip?
Yes. A grid puts the pictures into equal cells with the column count you choose. A horizontal strip places them side by side; a vertical strip places them one above another. Drag the tiles or use their arrow buttons to change the order. This makes one flat image rather than an editable design document.
### Which presets can I start from?
Choose a square collage, a three-column contact sheet, a side-by-side strip, a vertical strip, a portrait collage or a seamless collage with no gaps. They set layout and export controls, which you can still adjust. A preset keeps your filename and each picture's pan and zoom. The complete image's shape depends on the number of pictures; square cells do not promise a square output.
### How do I keep the whole of every picture?
Choose “Fit whole image” and use “Reset all frames” to return every picture to 100% zoom and its starting position. Each source then fits inside its cell, with background wherever the shapes differ. A strip's “Keep original shapes (strips)” option gives each picture a cell with its own proportions, so there is no crop or extra space at 100% zoom. Choosing a preset keeps existing framing; resetting the frames is what undoes a previous zoom.
### Can I move or zoom one picture without changing its neighbours?
Yes. Select its frame in the preview or the Frame menu, then drag to pan, use the position controls, or adjust Zoom from 25% to 400%. The selected fit is the 100% baseline. Zooming out below 100% shrinks the picture and shows more background; zooming in enlarges it and can crop its edges. Panning is available on an axis when the picture and frame have different sizes. A larger picture can move to choose its crop; a smaller picture can move within the unused space while staying wholly inside the frame. “Fill box (crop edges)” starts with a centred crop, and you can move it to keep the subject in view. The framing stays with the picture when you reorder it. Reset this frame restores its starting position and 100% zoom; Reset all frames restores every picture. Zoom cannot add detail that the original does not contain.
### Can the gaps and background be transparent?
Yes, when you choose PNG or WebP and turn on transparency. That also preserves see-through parts of the input pictures. JPEG has no alpha channel, so it always uses a solid background. The background colour also fills the space around a picture shown whole in a cell.
### Which formats can I use?
The input must be an image your browser can decode, including JPEG, PNG, WebP, GIF, BMP, AVIF and supported SVG files. HEIC support depends on your browser; [HEIC to JPG](https://abox.tools/heic-to-jpg/) can convert one first. Output is PNG, JPEG or WebP. If the browser cannot write WebP, that choice is disabled rather than saving a PNG with a WebP extension.
### Does it keep an animation?
No. This is a still-image layout. An animated GIF, WebP or AVIF is reduced to the first frame the browser decodes. To arrange separate frames from a GIF, extract them first with [GIF Splitter](https://abox.tools/split-gif/).
### Does the preview use the full-resolution pictures?
The live preview uses small copies so changing a gap or column count stays quick. Export uses the original files. Both use the same layout geometry, but fine detail should be checked in the finished file, especially when a small source is enlarged.
### What are the size limits?
The finished canvas is limited to 8192 pixels on either side and 32 megapixels in total. A tall strip can reach the height limit even when its width is small. Reduce the output width, use more grid columns, or split the pictures into several layouts if the page reports a limit. Your browser can still run out of memory below those limits with very large source files; export opens one full-size picture at a time.
### Will the picture quality, colours and metadata stay the same?
This makes a new image by drawing your pictures onto a browser canvas. Resizing or cropping changes the pixels, and JPEG or WebP compression can lose detail. PNG keeps the pixels of the finished canvas, which is not the same as preserving the original files. The canvas makes an 8-bit SDR image, so wide-gamut colour, HDR and partly transparent colours may change. Source EXIF, GPS, date and camera tags are not copied. Keep the originals if you need an archival copy.
### Is it free, and does it work offline?
It is free, with no account, trial or watermark. Load the page once, then disconnect and the arrangement and export still work. Advertising pays for the site; it is not given anything about your pictures.
## How the privacy claim is verifiable
- **The pictures stay here.** Your browser reads the files you choose and draws the combined picture in memory. This tool has no network feature and no endpoint to receive your files. The page's `Content-Security-Policy` names the addresses it may contact; your pictures, their names and their thumbnails are never handed to them.
- **The layout is made by this page.** There is no image service behind the preview and no remote renderer behind the download. The same rectangles decide where the pictures land in both, and the browser's own encoder turns the finished canvas into a PNG, JPEG or WebP.
- **The original files are left alone.** A layout is a new image. The files you picked stay as they were; no edited copy is written over them. Source EXIF, GPS, camera and date tags are not copied into the layout, because it is made from pixels rather than from the original file containers.
- **What Google loads, and what it is not given.** The page's advertising and measurement scripts come from Google. Neither is given your images, their names, their dimensions, their number, or anything drawn from them. The code that reads and arranges a picture is served from this origin.
- **What the donate button loads, and what it is not given.** The “Buy me a coffee” button is drawn by a script from cdnjs.buymeacoffee.com and letters itself from Google Fonts. It is a link, and it is handed nothing about your pictures. Clicking it opens the service's own page.
- **Disconnect and check.** After the page has loaded, it can import, preview and export with the network disconnected. The example is drawn in the page too; it is never downloaded from somewhere else.
**Check it yourself.** None of the above has to be taken on trust. This page is generated from the templates and config in the repository by a build script you can read and run yourself, and the result is committed to the `dist` branch — so you can diff what is served against what a build of the sources produces: https://github.com/A-Box-of-Tools/website
The files worth reading first are `config/site.toml` for the Content-Security-Policy, `src/arrange.js` for the geometry shared by the preview and export, `src/shared/image-list.js` for how the chosen pictures are read, and `src/shared/image-convert.js` for the browser's encoder and the check that it wrote the format you asked for.
How to arrange multiple images into one picture
Choose your pictures. Drop several images onto the picker, or browse for them. The tiles show what the browser could open. The example makes pictures on this page if you want to try the controls first.
Put them in order. Drag a tile to move it, or use its arrow buttons. Remove a picture that does not belong. The order runs across each row of a grid, from left to right in a horizontal strip, and from top to bottom in a vertical one.
Start with a preset, then set the spacing. Choose square cells, a contact sheet, a strip, portrait cells or a seamless grid. Adjust the output width, grid columns, cell shape, gap and outer margin. Presets keep your filename and each picture's existing framing.
Adjust the picture inside each frame. Select a picture in the preview or choose it from Frame. Drag to pan, or use Horizontal position, Vertical position and Zoom. Zoom out below 100% to show more background, or zoom in to enlarge and crop. At 100% zoom, “Fit whole image” keeps every edge; “Fill box (crop edges)” starts with a centred crop. Reset this frame restores the selected picture, and Reset all frames restores every picture's starting fit.
Check the preview, then save one image. The preview shows the arrangement and crop used by the download. Choose PNG, JPEG or WebP, set a background or transparency where the format permits it, and create the image. Export draws from the original files at the output size.
The longer version
How to arrange multiple images into one pictureMake a collage, contact sheet or image strip: choose a grid, keep pictures whole or crop to fill, set the spacing and save a PNG, JPEG or WebP without uploading.
No. Reading, arranging and exporting happen in your browser on your own machine. This tool adds no network feature to the page, and the files, thumbnails and names are never handed to the advertising or measurement scripts. It also works with the network disconnected after loading.
Can I make a collage, a contact sheet or a strip?
Yes. A grid puts the pictures into equal cells with the column count you choose. A horizontal strip places them side by side; a vertical strip places them one above another. Drag the tiles or use their arrow buttons to change the order. This makes one flat image rather than an editable design document.
Which presets can I start from?
Choose a square collage, a three-column contact sheet, a side-by-side strip, a vertical strip, a portrait collage or a seamless collage with no gaps. They set layout and export controls, which you can still adjust. A preset keeps your filename and each picture's pan and zoom. The complete image's shape depends on the number of pictures; square cells do not promise a square output.
How do I keep the whole of every picture?
Choose “Fit whole image” and use “Reset all frames” to return every picture to 100% zoom and its starting position. Each source then fits inside its cell, with background wherever the shapes differ. A strip's “Keep original shapes (strips)” option gives each picture a cell with its own proportions, so there is no crop or extra space at 100% zoom. Choosing a preset keeps existing framing; resetting the frames is what undoes a previous zoom.
Can I move or zoom one picture without changing its neighbours?
Yes. Select its frame in the preview or the Frame menu, then drag to pan, use the position controls, or adjust Zoom from 25% to 400%. The selected fit is the 100% baseline. Zooming out below 100% shrinks the picture and shows more background; zooming in enlarges it and can crop its edges. Panning is available on an axis when the picture and frame have different sizes. A larger picture can move to choose its crop; a smaller picture can move within the unused space while staying wholly inside the frame. “Fill box (crop edges)” starts with a centred crop, and you can move it to keep the subject in view. The framing stays with the picture when you reorder it. Reset this frame restores its starting position and 100% zoom; Reset all frames restores every picture. Zoom cannot add detail that the original does not contain.
Can the gaps and background be transparent?
Yes, when you choose PNG or WebP and turn on transparency. That also preserves see-through parts of the input pictures. JPEG has no alpha channel, so it always uses a solid background. The background colour also fills the space around a picture shown whole in a cell.
Which formats can I use?
The input must be an image your browser can decode, including JPEG, PNG, WebP, GIF, BMP, AVIF and supported SVG files. HEIC support depends on your browser; HEIC to JPG can convert one first. Output is PNG, JPEG or WebP. If the browser cannot write WebP, that choice is disabled rather than saving a PNG with a WebP extension.
Does it keep an animation?
No. This is a still-image layout. An animated GIF, WebP or AVIF is reduced to the first frame the browser decodes. To arrange separate frames from a GIF, extract them first with GIF Splitter.
Does the preview use the full-resolution pictures?
The live preview uses small copies so changing a gap or column count stays quick. Export uses the original files. Both use the same layout geometry, but fine detail should be checked in the finished file, especially when a small source is enlarged.
What are the size limits?
The finished canvas is limited to 8192 pixels on either side and 32 megapixels in total. A tall strip can reach the height limit even when its width is small. Reduce the output width, use more grid columns, or split the pictures into several layouts if the page reports a limit. Your browser can still run out of memory below those limits with very large source files; export opens one full-size picture at a time.
Will the picture quality, colours and metadata stay the same?
This makes a new image by drawing your pictures onto a browser canvas. Resizing or cropping changes the pixels, and JPEG or WebP compression can lose detail. PNG keeps the pixels of the finished canvas, which is not the same as preserving the original files. The canvas makes an 8-bit SDR image, so wide-gamut colour, HDR and partly transparent colours may change. Source EXIF, GPS, date and camera tags are not copied. Keep the originals if you need an archival copy.
Is it free, and does it work offline?
It is free, with no account, trial or watermark. Load the page once, then disconnect and the arrangement and export still work. Advertising pays for the site; it is not given anything about your pictures.