Put two screenshots side by side for a bug report

Expected vs actual, before vs after — one combined image is easier to review than two attachments. Here is the fast way to make one.

Tools used in this guide

The job

Reviewers read a bug report faster when the “expected” and “actual” states sit next to each other in one image, instead of two files they must flip between.

Join them

Open Join images, drop the two screenshots in, and use the arrows to put expected first, actual second. Direction: side by side. Alignment: center works well when the heights differ. Leave the gap at 16 px so the seam stays visible.

  • Order matters: readers assume left = expected, right = actual.
  • Choose PNG output — screenshots contain text and JPEG will smear it.

Worked example

Two 1440 × 900 screenshots joined horizontally with a 16 px gap produce a single 2896 × 900 PNG. If one capture is shorter — say a cropped error dialog — center alignment keeps it vertically balanced instead of hugging the top.

Clean it up first

Before joining, crop out the parts that do not matter (Crop image) and pixelate anything sensitive — names, emails, internal hostnames (Image pixelator). Doing it before the join keeps the mosaic blocks aligned to each original.

  • Limits: 2–12 images, 25 MiB each, gap up to 400 px.
  • Very wide results may exceed the browser's canvas limit; stack vertically instead.