Free tool
Combine Images into One: Before and After, Collage or Strip
Put several pictures into a single image, in a row, a column or a grid. Add labels, spacing and rounded corners, and save the result as PNG or JPG.
Drag the small pictures, or use their arrows, to change the order. Type a label under any picture to show it in the result.
Layout
Spacing
Labels
Pictures are combined in your browser and never uploaded. Your layout settings are saved on your own device for next time.
Why one picture beats two
A redesign case study needs a before and after pair. A product page needs a row of colour options. A support article needs three steps shown together. Sending two files means the reader has to line them up in their own head, while one combined image does that work for them.
Drop two or more pictures, click to choose them, or paste. JPG, PNG, WebP and HEIC are accepted. Each picture shows as a small thumbnail. Drag a thumbnail, or use its arrows, to change the order, and type a short label under any of them if you want text in the result.
Layout and spacing controls
| Control | What it does |
|---|---|
| Layout | Side by side, Stacked, or Grid |
| Make them the same height | Scales every picture to match, so a row has an even edge. In a stacked layout it makes them the same width instead |
| Line up | Start, Centre or End, which decides where shorter pictures sit |
| Columns | How many pictures go across, when the layout is Grid |
| Gap, Border, Corners | Space between pictures, space around the whole image, and rounding in pixels |
| Background | A colour, or a transparent background if you save as PNG |
If your pictures come in different shapes, matching the height or width is usually the first thing to try. Without it, a tall phone screenshot next to a wide desktop screenshot leaves ragged space.
Adding labels
Labels turn a pair of pictures into something that explains itself. The Quick labels menu fills them in for you with Before and After, 1, 2, 3, or Step 1, Step 2, or clears them with No labels. You can also type your own text.
- Place a label under each picture, or on top of it.
- Set the label size with the slider.
- Leave the colour on Automatic, or choose one that suits your background.
When you have exactly two pictures and the first is labelled Before, the saved file name becomes before-and-after, so it is easy to find later.
Format and output size
Choose PNG for sharp edges and an optional see-through background, or JPG for a smaller file. The Size menu keeps the result As made, or limits the long side to 1080, 2048 or 4096 px. The page shows the saved dimensions as you work. Browsers have a limit on how large a canvas can be, and if the result would be bigger than 12,000 pixels on its long side, the tool scales it down and tells you so.
The Copy the picture button places the result on your clipboard, which is quick when you are pasting straight into a document or a chat.
Using a combined image on a website
A before and after image is a strong piece of proof on a service page, but a big combined file can slow it down. Pick the smallest output size that still reads clearly at the width where it will be shown. Our guide to website speed for small sites explains why image weight matters so much for load time.
- Keep the same background colour as the page so the image blends in.
- Do not rely on tiny labels. Check them at the size visitors will see.
- Add a text description wherever the image is published.
Frequently asked questions
How do I put two pictures side by side?
Add both pictures, keep the layout on Side by side, and turn on Make them the same height. Then press Download to save a single PNG or JPG.
How do I make a before and after image?
Add the two pictures in order, then pick Before and After from the Quick labels menu. The labels appear under or on each picture.
Can I change the order afterwards?
Yes. Drag the small thumbnails, or use the arrow buttons on each one, and the result updates straight away.
Can the background be transparent?
Yes, tick Transparent background and save as PNG. JPG cannot hold transparency, so it needs a solid colour.
Is there a limit to the size of the result?
Browsers can only save a canvas up to a certain size, and this tool caps the long side at 12,000 pixels. If you go past it, the picture is scaled down and a note says so.
Are my pictures uploaded anywhere?
No. They are drawn together in your browser and stay on your computer.
More free tools
- Image splitter: Cut a picture into a grid or carousel tiles, in posting order, and save them as a ZIP.
- image resizer: Resize pictures by pixels or percent with fit, crop or stretch, presets and file type choices.
- Mockup generator: Put a screenshot into a browser, phone, tablet or laptop frame on a gradient background.
- image compressor: Compress pictures to a quality level or a target size in KB, with a before and after view.
- Square image maker: Turn pictures into squares by adding a background or cropping, at the pixel size you choose.