Guide
How to compare screenshot versions
Comparing two versions of a screen sounds trivial until you try it. Flipping between browser tabs loses the difference in the half-second your eye takes to move. This is a practical guide to doing it properly, and to which comparison mode actually answers which question.
The problem with flipping between tabs
Human visual memory for fine detail is extremely short. When you switch tabs, the gap between seeing version A and seeing version B is long enough that small differences — four pixels of padding, a slightly warmer grey, a font weight one step heavier — simply vanish. You will reliably catch layout changes and reliably miss everything subtle.
Every comparison method below exists to close that gap, either by putting both versions in view at once or by removing the delay between them entirely.
Choosing a comparison mode
Swipe
A draggable divider reveals version A on one side and version B on the other. This is the best default for two versions of the same screen at the same size. Because your eye stays in one place while the boundary moves, differences appear as movement, which human vision detects far better than it detects static difference.
Use it for: redesigns of the same page, before-and-after edits, and any change where the layout is broadly the same.
Side by side
Both versions in full, next to each other, with synchronized zoom and pan. This is the mode for reading — comparing copy, checking that a table has the same number of rows, reviewing anything where you need to see both in their entirety rather than hunting for a delta.
Overlay
One version on top of the other with adjustable opacity. Drag the slider to about 50% and misaligned elements produce a visible ghosting effect. This is the fastest way to catch alignment drift — an element that moved two pixels will show a clear double edge that is nearly impossible to spot any other way.
Flicker
The two versions alternate automatically in the same position. This is borrowed from astronomy, where "blink comparators" were used to find moving objects between two photographic plates of the same patch of sky. Anything that changed appears to jump; anything identical stays perfectly still. It is the single most sensitive method for spotting small positional changes.
Pixel-difference heatmap
Rather than showing you either version, this computes the difference between them per pixel and renders the result as a heat map. Regions that are identical appear dark; regions that changed glow. It also reports what percentage of pixels differ and the average delta.
This answers a different question from the visual modes: not "what does it look like" but "did anything change at all, and where". It is particularly useful for verifying that a change you intended to be isolated really was isolated — if you meant to only touch the header and the heatmap lights up in the footer, something else moved.
Grid, carousel and stack
For more than two versions. A 4-up grid works well for responsive breakpoints. The carousel and ten-version stack suit a long iteration history where you want to step through chronologically and see how a design arrived where it did.
Spotlight and device frames
Spotlight reveals one version through a movable lens over the other, which is useful for interrogating a specific region without losing context. Device frames render each screenshot inside a frame matched to its width, making a set of responsive captures far easier to read as a set.
Measuring rather than eyeballing
Some questions cannot be answered by looking, only by measuring.
Spacing. The pixel ruler measures exact distances between two points. If a gap looks wrong but you cannot say why, measure it against the equivalent gap elsewhere — inconsistent spacing is one of the most common and least noticed design errors.
Colour. The colour picker samples any pixel and reports HEX, RGB, HSL and LAB. LAB is worth understanding: unlike RGB, it is designed so that a given numerical distance corresponds roughly to an equal perceived difference. Two colours far apart in RGB can look near-identical, and LAB will tell you which is which.
Contrast. The contrast checker computes the WCAG ratio between any two sampled colours and reports whether it meets AA or AAA. The thresholds worth remembering: 4.5:1 for normal body text at AA, 3:1 for large text, and 7:1 for AAA. Light grey text on white is the single most common accessibility failure in modern interfaces, and it fails by a margin most designers find surprising.
Keeping a record of decisions
The comparison itself is only half the job. Two weeks later, the useful artefact is not the screenshots — it is the record of what you chose and why.
Screencheck attaches annotation pins to specific coordinates on a screenshot, so a note lives on the thing it refers to rather than in a separate document. Each version carries an explicit status — undecided, approved or rejected — plus an optional rating and a written reason, all stored with a date. The result is a version history you can search by note text, which tends to be how you actually look for these things later: not "which version was V7" but "the one where the client objected to the blue".
Why this runs in your browser
Screencheck processes your screenshots locally. They are read from your device by the browser and stored in its own databases; they are not uploaded to Screencheck servers.
The practical reason is that pre-release screenshots are frequently confidential — unannounced products, client work under NDA, internal tools with real customer data on screen. A tool that uploads those to a third party is one many people cannot use at all, regardless of how good its privacy policy is. Not receiving the data avoids the entire question.
The trade-off is real and worth stating plainly: because there is no server-side copy, clearing your browser data deletes your projects. Use the ZIP backup for anything that matters. See the privacy policy for the full detail.
Getting started
Click Start now and you are in a workspace immediately — no naming, no template picking. Drag screenshots onto the canvas, or paste directly from the clipboard with ⌘V or Ctrl+V, which is usually faster than saving a file first. Select any two to ten of them and compare.