How to Combine Screenshots Into One Image

Screenshots often belong together: consecutive steps in a bug report, the top and bottom of a long page, before-and-after states, or several settings that need to appear in one document. Sending the files separately makes the reader reconstruct the order. A single combined image keeps the sequence visible.

Capture each screen with your operating system's screenshot tool, a browser's full-page capture, or any other method you normally use. After the screenshots have been saved, the LeetTools Image Stitcher can arrange supported files on one browser canvas. It accepts PNG, JPEG, and WebP input, with manual placement and automatic arrangements.

Before you combine the screenshots

Put the screenshots in the order you want someone to read them. If a screenshot needs an arrow, highlight, redaction, crop, or rotation, make that edit before adding it to Image Stitcher. The current tool arranges and scales complete images; it is not an annotation or cropping editor.

Common capture options include:

• Windows: press Win+Shift+S or open the Snipping Tool for a selected area.
• Chrome, Edge, and Firefox: use the browser's built-in screenshot or a capture extension for full pages.
• Mobile: use your device's screenshot shortcut, then add the saved files.

The capture step is separate from the stitching step, so you can also use existing PNG, JPEG, or WebP images that did not originate as screenshots.

Combine screenshots in the browser

1. Open the Image Stitcher.
2. Select Add Images and choose the screenshots. You can add more files later.
3. Set Gap under Arrange. Use zero for a continuous join or add space to separate steps visually.
4. Choose Horizontal, Vertical, or Grid to apply that gap. After changing Gap, choose the arrangement again to update the positions.
5. Drag images to refine their positions. Select an image to change its scale or send it to the front or back.
6. Select Export, choose the output bounds, format, background, and filename, then generate the preview.
7. Inspect the preview and use Save Image or Open Full Size.

The automatic layout follows the current image order. If the sequence is wrong, remove and add files in the intended order, or place them manually on the canvas.

Check image scale before arranging

When a screenshot's longest edge exceeds 900 pixels, Image Stitcher initially scales it to roughly 900 pixels on the canvas. This changes its placed size and the exported result, not just the editing view. For example, a 2400 × 1600 screenshot starts at 37.5% scale, about 900 × 600 pixels.

To retain the source pixel dimensions, select each screenshot and set Image Scale to 100% before applying an arrangement. Reapply the arrangement after changing scales so the images do not overlap. Check the final output dimensions and text readability in the export preview; several full-size screenshots may exceed the 20-megapixel export limit.

Image Scale controls the size of the image in the output. Canvas view zoom only changes how large the workspace looks while editing.

Choose the right arrangement

Vertical for procedures and long captures

A vertical layout is usually easiest to read for step-by-step instructions, support tickets, and sections captured while scrolling down a page. Each screenshot appears below the previous one, with the configured gap between them.

Set the gap to zero only when adjacent edges genuinely continue the same visual. If two screenshots overlap or repeat part of the page, Image Stitcher does not detect and remove that overlap automatically. Crop the repeated region beforehand or leave a visible gap so the boundary is clear.

Horizontal for comparisons

Use a horizontal layout for before-and-after states, light and dark themes, desktop and mobile views, or two settings that need direct comparison. Screenshots with similar heights produce the cleanest result, but they do not need identical dimensions.

Select an image and use the scale control or corner handles when one side needs to be smaller. Scaling preserves the image's aspect ratio; the tool does not stretch width and height independently.

Grid for several related images

Grid arrangement works well for a compact overview of four or more images. The tool chooses a square-like column count based on the number of items and accounts for the configured gap. It does not force every grid cell to the same dimensions, so screenshots with very different aspect ratios may still need manual placement or scaling.

Fine-tune the canvas

Image Stitcher provides a workbench rather than only concatenating raw files. You can:

• Drag a selected image to a new position.
• Resize it with corner handles or the scale control.
• Move it to the front or back when images overlap.
• Enable snapping to align image edges and centers with other images or the workspace.
• Zoom or fit the canvas view without changing the exported pixel dimensions.
• Set a custom workspace width and height.
• Allow the workspace to expand when placed images extend beyond its current size.

The canvas view zoom is only for editing. A 75% preview does not export the result at 75% resolution. The output dimensions are determined by the selected export bounds and the placed image sizes.

Fit Content or Workspace

The export dialog offers two bounds:

Fit Content does not crop an individual screenshot. It finds the outer edges of all placed images and removes canvas area outside those edges. Workspace keeps empty space inside the configured canvas, including any chosen background.

The current tool blocks an export above 20 million pixels because very large canvases are unreliable on memory-constrained browsers and mobile devices. If the limit is reached, use Fit Content, reduce the workspace dimensions, or scale the images down.

Pick an output format and background

Image Stitcher exports PNG, JPEG, or WebP through the browser's canvas encoder. The Canvas toBlob() documentation notes that PNG support is required while additional formats depend on the browser. Current mainstream browsers generally support the formats offered by the tool, but JPEG or WebP export can still be browser-specific. Image Stitcher checks the returned format and reports an error if the browser substitutes PNG. Choose PNG or use a browser that can encode the requested format.

• PNG is the safest choice for screenshots with text, sharp interface edges, or transparency. The quality control is not shown for PNG.
• JPEG can be useful for photographic screenshots and smaller files, but it does not preserve transparency. If transparent background is selected for JPEG, the tool renders white behind the images.
• WebP supports adjustable quality and can preserve a transparent background when the browser encoder supports the export.

For PNG or WebP, choose transparent, white, or a custom background. A transparent background affects only uncovered canvas areas; it does not remove a background already present inside a screenshot.

What local processing means

The selected image files are decoded, arranged, and rendered in the browser. They are not uploaded to LeetTools for the stitching operation. The page can still make ordinary website requests for assets and analytics, so local processing describes the handling of tool inputs rather than a promise that the browser makes no network requests at all.

The final output is newly rendered from the canvas. Do not depend on it to retain source-file metadata, color-profile behavior, or other container details. Visually inspect the generated preview before using it in documentation or sending it to someone else.

When to use a different tool

Use a full image editor before stitching when you need pixel-level cropping, rotation, arrows, blur, redaction, text, filters, or background removal. Use a document or presentation editor when each screenshot needs a caption, selectable text, or a multi-page layout rather than one raster image.

Use Image Stitcher to arrange complete screenshots, adjust their positions and scale, and export one shareable image. Check text readability and output dimensions in the preview before saving.