How to Compare Before-and-After Screenshots in Visualping

To compare before-and-after screenshots in Visualping, open an alert and choose View Changes, or open the change notification for a monitor in the dashboard. In the Difference Modal, the Current capture is on the left and the dimmed Previous capture is on the right. Green marks added text; red marks deleted text. Drag the blue center handle to inspect the same area in both captures. For comparisons across dates or multiple monitors, use a report and its History tab.

This guide covers the alert comparison workflow, how to interpret the highlights and slider, how to find older changes, and what screenshot comparisons can and cannot tell you. For official interface details, see Visualping’s Navigating Alerts and Creating Visualping Reports help pages. Interface labels may change over time.

Compare one Visualping alert step by step

1. Open the alert. From the alert email or notification, select View Changes. Alternatively, open the monitor in the dashboard and select its change notification or thumbnail. Both routes open the Difference Modal.
2. Confirm which capture is which. Current is on the left. Previous is on the right and appears dimmed. Keep this orientation in mind before deciding whether content was added, removed, or simply moved.
3. Review the change list. Select an item in the list to jump to the corresponding addition or deletion in the comparison. This is useful when a page has many changes or the relevant part is below the fold.
4. Interpret the highlight colors. Green indicates added text; red indicates deleted text. Toggle the text-added or text-deleted layers to hide one type of highlight when the page is too busy to read.
5. Move the comparison slider. Drag the blue handle left or right to reveal corresponding areas of the current and previous captures. Follow a changed region across the boundary to see its surrounding visual context.
6. Inspect image details if needed. Click the image to open it in a new tab or download it, then zoom or compare the files locally if the in-product view is too small for fine details.

How to read the Difference Modal

The comparison works best when you check four things in order: orientation, location, change type, and visual context.

What to check	How to read it	Why it helps
Orientation	Current is left; Previous is dimmed on the right.	Prevents reversing the apparent direction of a change.
Location	Use the change list to jump to a listed item.	Helps find the relevant section on a long or busy page.
Change type	Green is added text; red is deleted text. Layer toggles can reduce clutter.	Separates additions from removals during review.
Visual context	Drag the center handle across the page.	Shows how the two captures differ in the same region.

A highlight is a navigation and interpretation aid, not a complete explanation of why the page changed. Check the surrounding content before deciding whether an addition or deletion is meaningful. For example, a changed heading may be accompanied by a layout shift elsewhere on the page.

Use a report to review changes across dates or monitors

The Difference Modal is suited to close inspection of one alert. Use a report when you need to review a date range, include several monitoring entries, apply a changes filter, or share a broader review.

1. Open or generate a report for the relevant monitoring period.
2. Choose which material to include: Current captures, Previous captures, and Markup.
3. Apply the changes filter that fits the review. Depending on the report view, you can focus on important or alert-triggering changes, or include all changes.
4. Open the report’s History tab to locate a prior report by name or date.
5. Compare the captures and markup for the entries that matter. Use the report’s range and filter to narrow a large monitoring history.

Current and Previous captures provide context; Markup calls attention to detected differences. Check the current report screen’s labels and filter choices, since the available wording and controls can change. Visualping’s reports guide also describes the report review workflow.

Visual comparison, text changes, and what screenshots show

Visualping describes its change detection as covering visual, text, and code changes. A screenshot comparison is useful for seeing rendered-page differences, but it should not be treated as evidence of every code change or backend-state change. A change that does not alter the captured rendering may not be apparent in the screenshot itself. See Visualping’s What is Visualping? for its overview of change types and monitoring.

If you only want to monitor a specific part of a page, use the monitor’s page or element selection options where available, then inspect the resulting alert. Visualping’s help material describes page and element selection as part of its monitoring workflow. Narrowing the monitored area can make an alert easier to interpret, but it also means changes outside that area are not part of that comparison.

Troubleshooting Visualping screenshot comparisons

Symptom	Likely cause	What to do
The alert does not seem to match the change you saw on the site.	The alert may correspond to an earlier check, or the site may have changed again since the capture.	Open Check History and confirm that the monitor checked after the site change. Then compare the capture tied to that check.
The difference looks backward.	Current and Previous may have been mentally reversed.	Recheck the labels: Current is left; Previous is dimmed on the right.
The page is covered in highlights.	Many additions and deletions are being shown together.	Use the change list to jump to relevant items and toggle the added-text or deleted-text layer to isolate one type.
You cannot tell whether a region moved or its text changed.	Highlights alone may not show the full visual context.	Drag the slider across the affected region and compare the surrounding layout in both captures.
You need an older comparison but cannot find it in the alert.	The alert view is focused on an individual notification.	Open the relevant report and use History to find an earlier report by name or date.
A screenshot looks unchanged, but you suspect a code or backend change.	The change may not be visible in the rendered capture.	Use the relevant text or code change information in Visualping and do not treat a screenshot as a complete record of non-rendered or backend state.

Performance, reliability, and cost considerations

For a single question about one detected change, opening the alert comparison is the shortest review path. For recurring audits, a report with a defined date range and suitable filter reduces the amount of history you need to inspect. If a result appears stale or unexpected, Check History is the first place to verify which check produced it.

Interpret comparisons in the context of the captured page and monitor configuration. A visual capture represents what was rendered for that capture; it does not establish that every backend or source-code state was unchanged. This workflow guide does not make claims about Visualping plan pricing or service performance; consult Visualping’s current product and account pages for those details.

Or skip the browser setup

If your next step is generating a screenshot yourself through an API, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF. Its clean-shot flow accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents.

See the ScreenshotNeo API documentation. Replace YOUR_API_KEY with your key. These examples save a screenshot of Stripe as WebP:

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

For these examples, keep the API key on a trusted server or in a local environment rather than exposing it in public browser code. ScreenshotNeo also supports full-page capture, element selection, device presets, custom wait conditions, headers and cookies, custom CSS and JavaScript, caching, async jobs, bulk capture, and other capture options documented in its API reference.

Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card, with paid plans starting at $5 for 3,000. Sign up for the free plan.

FAQ

Which side shows the newer screenshot?

Current is the newer capture and appears on the left. Previous is on the right and dimmed.

What do green and red mean?

Green marks added text, and red marks deleted text.

Where can I find an earlier report?

Open the report’s History tab and search by report name or date.

Does a screenshot prove that the website’s backend did not change?

No. A screenshot shows rendered output for a capture. It cannot establish every non-rendered code or backend change.