Direct answer
To merge two images together, add both files to an image merger, choose Horizontal for a side-by-side result or Vertical for a top-to-bottom result, reorder the files, adjust size matching and spacing, then export the combined canvas as PNG, JPG, or WebP.
What happens when two images are merged
Local input
File selection and drag-and-drop
The browser File API can expose files that a user selects or drops into a page, allowing a local preview and processing workflow without treating upload as a required first step.
Source: MDN: Using files from web applications
Composition
Canvas drawImage()
Each source can be drawn at a chosen x and y position and scaled to a target width and height. That is the basis for side-by-side, vertical, grid, and freestyle layouts.
Source: MDN: Canvas drawImage()
Export
PNG, JPEG, or WebP blob
Canvas toBlob() creates an image blob from the final canvas. PNG support is required, while many browsers also support JPEG and WebP export.
Source: MDN: Canvas toBlob()
Format choice
PNG for transparency; JPEG or WebP for photos
PNG preserves transparency and sharp graphical detail. JPEG and WebP can reduce photographic file size, but lossy quality settings should be checked around text and fine edges.
Source: MDN: Image file type and format guide
Practical use cases
The right layout depends on what the finished image needs to communicate. Comparisons usually work side by side, sequential screenshots read better vertically, and mixed photo sets need a grid or a freely arranged canvas.
Before-and-after comparison
Horizontal2 imagesRenovations, product results, design revisions, progress photos, and any pair that should be compared at a glance.
Place the earlier image first, match heights, use a small gap or divider, and export at a width that remains readable on the target platform.
Long screenshot or conversation
Vertical2+ imagesWeb pages, app screens, receipts, instructions, and conversations that continue from top to bottom.
Order screenshots chronologically, match widths, set spacing to zero for a continuous stitch, and inspect the seam before export.
Balanced photo pair or grid
Grid2-20 imagesListings, event recaps, moodboards, product variants, and photo collections that need equal visual weight.
Choose the number of columns, keep spacing consistent, and use a background color that suits every photo.
Custom collage
Freestyle2-20 imagesOverlapping photos, scrapbook layouts, thumbnail compositions, and arrangements with intentional size differences.
Set the canvas size first, then move, resize, and layer each image while keeping important content away from the edges.
How to merge two images step by step
- 1
Add both source images
Choose, drop, or paste two JPG, PNG, WebP, GIF, AVIF, or BMP files. Start with the highest-resolution originals available so the final export has enough detail.
- 2
Choose horizontal or vertical
Use Horizontal to put the images side by side. Use Vertical to place one above the other. Drag to reorder them so the comparison or sequence reads correctly.
- 3
Match dimensions and tune spacing
Match image sizes when a clean shared edge matters. Then set alignment, spacing, outside margin, corner radius, and a transparent or solid background.
- 4
Preview and export one image
Inspect the full canvas for stretched content, awkward gaps, and unreadable text. Choose PNG for transparency or sharp graphics, or JPG/WebP with a suitable quality level for photographs.
Choose the right way to combine your images
Start with the reading direction of the final image. Horizontal layouts emphasize comparison, vertical layouts preserve a sequence, grids create equal visual weight, and freestyle canvases are for overlap or custom positioning.
| Goal | Best layout | Key setting |
|---|---|---|
| Compare two photos at a glance | Horizontal | Match heights and use a small gap or divider. |
| Continue one screenshot below another | Vertical | Match widths, preserve order, and set spacing to zero. |
| Give several images equal visual weight | Grid | Choose the column count and keep spacing consistent. |
| Overlap, resize, or position images independently | Freestyle | Set the canvas dimensions before arranging each image. |
Merge two images with iTextMaster Image Merger
iTextMaster Image Merger combines up to 20 images locally in the browser. For a two-image job, choose Horizontal or Vertical, drag the files into the right order, match their dimensions when needed, and export the full-resolution result without a watermark.
Related image tools
FAQ
How do I merge two images together online?
Add both images to an online image merger, choose Horizontal or Vertical, arrange their order, adjust spacing and size matching, then download the combined image.
How do I put two pictures side by side?
Choose a Horizontal layout. Match the image heights for a straight top and bottom edge, then add a gap, margin, or background if the pair needs separation.
Can I join two screenshots vertically?
Yes. Choose a Vertical layout, put the first screenshot on top, match widths, and set spacing to zero if you want a continuous long image.
Will merging two images reduce quality?
The layout itself does not require quality loss, but scaling and lossy JPG or WebP export can change detail. Use suitable source dimensions and inspect the full-resolution download.
Which format should I use for the merged image?
Use PNG for transparency, screenshots, text, or sharp graphics. Use JPG or WebP for photographs when a smaller file matters, and adjust quality carefully.
Can I merge images with different sizes?
Yes. You can align them as they are or enable size matching for a cleaner shared edge. Avoid stretching; preserve each image aspect ratio when resizing.
Are my photos uploaded to iTextMaster?
During normal use, iTextMaster Image Merger reads, arranges, and exports the images locally in your browser, so the source files do not need to be uploaded to a server.
Can I merge more than two images?
Yes. iTextMaster Image Merger supports up to 20 images in Horizontal, Vertical, Grid, or Freestyle layouts.