Combine Images Into a Grid — Free Online Tool

Skip to content
MergeFrame
All guides

How-to Guide

Merge Screenshots into Grids for Confluence Documentation

Confluence pages filled with sequential screenshots are tedious to scroll through and hard to parse. A merged screenshot grid presents the same information in half the vertical space — and makes comparisons instantly visible.

Try MergeFrame — Free

Atlassian Confluence is the documentation backbone of thousands of engineering teams, but its visual formatting capabilities are limited. The WYSIWYG editor handles text well but offers minimal image layout options — screenshots appear as full-width images stacked vertically, creating pages that require excessive scrolling and make visual comparisons difficult. MergeFrame fills this Confluence formatting gap. By combining 2–4 related screenshots into a single grid image before inserting into Confluence, you transform a scroll-heavy page into a scannable document. The most impactful Confluence grid patterns: (1) UI before/after grids — 1×2 showing the old UI (left) and new UI (right) for design change documentation, ideal for design system pages and release notes; (2) bug reproduction grids — 1×3 showing initial state → user action → unexpected result, perfect for Jira-linked Confluence bug reports; (3) feature walkthrough grids — 2×2 showing four screens of a workflow, reducing a four-screenshot vertical stack into one compact image for onboarding docs and user guides; (4) multi-platform comparison grids — 1×3 showing the same screen on desktop, tablet, and mobile for responsive design documentation; (5) API response comparison grids — 1×2 showing request payload and response body side by side for API documentation pages. Confluence renders images at up to ~1800px wide in the default page layout. Export your grids at 1800–2000px wide for full-width display. For grids with text or UI elements that must remain readable, export at 2000–2400px — Confluence will downscale but retain sharpness. The local processing advantage is critical for engineering teams: internal tool screenshots, pre-release UI designs, database schemas, and proprietary dashboards should never touch a third-party image processing server. MergeFrame processes everything in your browser, so confidential engineering documentation stays confidential from capture to Confluence.

How to Do It — Step by Step

  1. 1

    Capture all relevant screenshots

    Consistent window size and zoom level for all screenshots in a Confluence grid.

  2. 2

    Open mergeframe.com, build your grid

    1×2 for comparisons, 1×3 for bug reports, 2×2 for feature walkthroughs.

  3. 3

    Add subtle annotations if needed

    Use arrows or highlights before importing. The grid provides context; annotations highlight specifics.

  4. 4

    Export at 1800–2400px wide

    Full-width in Confluence's default page layout. Higher for text-heavy UI screenshots.

  5. 5

    Insert into Confluence page

    Use 'Insert Image' or drag directly into the Confluence editor. Add a caption describing the grid layout.

Ready to merge your images?

100% browser-based. No account. No upload. Free.

Open MergeFrame →

Frequently Asked Questions

What's the best image width for Confluence grids?

1800–2000px for standard grids. 2000–2400px for text-heavy UI screenshots. Confluence's default content area is ~1800px wide.

Can I use grid images in Confluence templates?

Yes. Create placeholder grids, insert them into Confluence page templates, and team members replace placeholder images when creating new pages from the template.

Do grid images work with Confluence's export to PDF?

Yes. Grid images export cleanly to PDF and maintain their layout. They're more space-efficient than stacked individual screenshots.

MergeFrame — Combine images into a grid. Free. No account. Browser-only.

Try MergeFrame Free →