How to combine screenshots for documentation

Updated 15 June 2026

If you write help articles, file bug reports, or build tutorials, you've hit this problem: a process takes several screens, but pasting five separate screenshots into a doc looks messy and breaks the flow. Combining them into one clean figure keeps the steps together and makes your documentation far easier to follow. Here's how to do it without any heavy software.

Step by step

1. Capture each screenshot at the same window width so they align neatly.
2. Open StitchPic and load the screenshots, using the up/down arrows to put them in the right order.
3. Choose Vertically for a sequence of steps, or Horizontally to compare two states side by side.
4. Set Resize images to Do not adjust — this keeps screenshots crisp and pixel-exact (see why below).
5. Add a few pixels of spacing with a white or light-grey background to separate each shot.
6. Press Merge!, then Download PNG and drop it into your doc.

Why “Do not adjust” is the right choice for screenshots

Screenshots contain text and UI lines, and those are the first things to suffer when an image is scaled. Resizing introduces interpolation that softens letters and creates fuzzy edges. Because screenshots from the same device or window are usually already the same width, you can leave Do not adjust selected and StitchPic will place them at their exact native resolution — no scaling, no softening. PNG export (lossless) then preserves every pixel.

Tips for clean documentation figures

• Use a consistent capture size. Resize your browser or app window to a fixed width before taking each screenshot so the stack lines up.
• Crop out chrome. Trim repeated toolbars or address bars from each shot so the figure focuses on what changed.
• Add light separators. A 4–8 px light-grey gap between shots subtly signals “next step” without a heavy border.
• Number your steps in the doc, not the image, so you can edit captions later without re-merging.

Side-by-side comparisons for bug reports

For a bug report, an “expected vs actual” pair side by side is often clearer than words. Load the two screenshots, choose Horizontally, and use Crop biggest or Reduce biggest if their sizes differ slightly. One image with both states attached travels better through issue trackers than two separate files.

Privacy note for work screenshots

Screenshots often contain sensitive information — internal tools, customer data, tokens. StitchPic processes everything locally in your browser and never uploads your images, so combining work screenshots doesn't send them to any server. Still, remember to blur or crop sensitive details in each screenshot before merging.