Before After Screenshot

A before-and-after screenshot is a pair of images of the same subject, one taken before a change and one after it. The pair is shown side by side, stacked, or as an overlay with a slider, so the difference is visible at a glance.

A fair comparison holds everything constant except the change. Both images need the same capture area, viewport size, pixel density, scroll position and app state, such as the same signed-in account and the same test data. If the second image is shifted by even a few pixels, unchanged content also looks different in a pixel comparison.

Why before/after matters

A single screenshot shows a state. A pair shows a change, which is what reviewers, customers and managers usually need to judge. It also records what the screen looked like before the change, which is hard to recreate later.

Where before/after screenshots are used

• Release notes and changelogs that show a redesigned screen.
• Bug reports and fix confirmations.
• Design and accessibility reviews, such as a contrast fix.
• Client reports for site updates.

How to capture effective before/after pairs

1. Capture the "before" image first, before any change ships.
2. Record the settings: window size, area, zoom level, theme and test data.
3. Capture the "after" image with the same settings.
4. Export both in the same format and present them with matching labels.

For web pages, run Temposhot Website Capture twice with the same URL, Device and Area settings. For desktop apps, use the Custom Area source in Auto Capture. The picker reopens on the saved area, so the second capture uses the same rectangle.

Common mistakes

• Comparing a Retina capture with a 1x capture. Every pixel differs in size.
• Changing the browser zoom, theme or window size between captures.
• Forgetting to capture "before" until after the change is live.
• Cropping the two images differently.

Taking the same screenshots again and again?

Keep a saved URL list in website screenshot automation and rerun it before and after each release.

Common questions

Should I use JPG or PNG for comparison pairs?

PNG. Lossy compression adds small differences that show up in pixel comparisons.

How do I find small differences?

Load both files into Compare Images to highlight changed pixels.

Sources

• Screenshot (Wikipedia)

Related resources

• Website Capture options: device, area and wait settings.
• Capture sources: reuse a saved Custom Area.
• Stitch Screenshots: join two images into one file.