How to Compare Website Changes with GrabzIt Screenshots

To compare website changes with GrabzIt, use its Web Monitor or Screenshot Tool to save captures over time. Keep the URL, viewport, page scope, and capture timing consistent, then review the saved versions. GrabzIt documents version history and comparison, but the reviewed documentation does not establish a built-in pixel-highlighted diff overlay. To highlight changed pixels, export the screenshots and compare them with a separate image-diff tool.

A screenshot difference tells you that two rendered images differ; it does not prove that the difference is a defect. Inspect each change, decide whether it was intended, and update your accepted reference when appropriate.

1. Choose what to monitor

Decide whether you need to watch the entire page or one component. GrabzIt supports whole-page monitoring and selected sections. Its REST monitor interface accepts a CSS selector, and its documentation says :root can target the whole page. A narrower selector can make review more focused when unrelated page content changes frequently.

Scope	Use it when	Trade-off
Whole page (`:root`)	You need broad coverage, including layout and surrounding context.	More unrelated movement, such as rotating content elsewhere on the page, can appear in the review.
Selected element	You need to track a component, such as a pricing panel or navigation area.	The capture may omit context that helps explain a change.

Choose a selector that continues to identify the intended element after ordinary page edits. If the selector stops matching, the monitored capture may no longer represent the component you meant to watch.

2. Make each capture comparable

Use the same URL, browser width and height, selected region, and capture timing for each version. GrabzIt’s API documents browser dimensions and a target selector. Its documented default browser width is 1366 pixels, and the maximum width and height are 10,000 pixels; treat those as API values, not universal recommendations. Set dimensions that match the viewport you actually want to monitor.

URL: Keep the scheme, hostname, path, query parameters, and relevant page state consistent.
Viewport: Keep width and height fixed. Responsive breakpoints can change layout when either dimension changes.
Scope: Keep the same selector or whole-page setting for the baseline and later captures.
Timing: Capture after the content you care about has settled. For dynamic pages, choose a repeatable point after loading or interaction.
Page state: If content depends on login, cookies, location, or user-specific data, use a consistent state for every capture.

These controls reduce differences caused by capture conditions. They cannot make inherently dynamic content static: clocks, rotating promotions, live data, randomized recommendations, and personalized content may still vary.

3. Save a baseline and later versions

Open GrabzIt’s Web Monitor or Screenshot Tool and configure the target URL and capture scope.
Choose a repeat interval or use on-demand captures, depending on how often you need to inspect the page.
Save the initial capture as the baseline. Record the viewport, selector, and any relevant timing choices alongside it.
Let subsequent captures run, or trigger them when you want a new version.
When a change is detected, review the saved version and its predecessor. GrabzIt’s Web Monitor page describes access to the last ten detected changes; history depth and plan details can change.

GrabzIt describes scheduled and on-demand captures and archive history in its [Screenshot Tool documentation](https://grabz.it/full-page-screenshot/). Its [Web Monitor](https://grabz.it/web-monitor/) describes monitoring, alerts, history, comparisons, and exports. Check the current product pages for available plan limits and settings.

4. Review versions and find changed pixels

Start by opening the earlier and later screenshots side by side or switching between them. Look for changes in layout, text wrapping, colors, missing assets, overlays, and content. If you need changed pixels called out visually, export both images and pass them to an image-comparison tool or service. The reviewed GrabzIt pages establish historical review and comparison, not a built-in pixel-highlight overlay.

For a simple local pixel difference, Python’s Pillow library can create a difference image from two exported PNG files. Install Pillow with python -m pip install Pillow, save this as diff.py, and run python diff.py old.png new.png diff.png:

from PIL import Image, ImageChops
import sys

if len(sys.argv) != 4:
    raise SystemExit("Usage: python diff.py OLD.png NEW.png DIFF.png")

old_path, new_path, output_path = sys.argv[1:]
old = Image.open(old_path).convert("RGBA")
new = Image.open(new_path).convert("RGBA")

if old.size != new.size:
    raise SystemExit(
        f"Image dimensions differ: old={old.size}, new={new.size}. "
        "Capture both versions at the same dimensions before comparing."
    )

difference = ImageChops.difference(old, new)
difference.save(output_path)
print(f"Saved pixel difference image to {output_path}")

This is a strict pixel comparison: antialiasing, font rendering, animation frames, and tiny shifts can produce differences even when a page looks nearly the same. Use it to locate areas for inspection, not as an automatic pass/fail decision. For a visual overlay, use an image-diff tool that supports overlays or blending.

5. Automate monitoring and notifications

GrabzIt’s REST API can add a monitor with a repeat interval and selector, and supports optional email or callback notifications. The exact request fields and authentication details should come from the current [REST API documentation](https://grabz.it/api/rest/). Keep the application key on a server or in a secret store: GrabzIt explicitly warns against exposing it in client-side REST calls.

Automate when periodic review matters. Start with a frequency that can catch meaningful changes without producing an unmanageable number of notifications. Send callbacks to a server endpoint that validates incoming requests and records enough context to identify the monitored URL and capture. Do not put API credentials in browser JavaScript, public repositories, or URLs that users can inspect.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API returns an image or PDF, and its parameter names support the ones used by other screenshot APIs, which can make switching easier. See the ScreenshotNeo API documentation for the available options.

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

import requests

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

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}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

Troubleshooting

Symptom	Likely cause	What to do
The diff shows changes everywhere	Viewport dimensions, page timing, or dynamic content differ.	Match width and height; capture at a consistent point; check for live or randomized content.
The selected section is missing or wrong	The CSS selector no longer matches the intended element, or matches a different element.	Recheck the selector against the current page and confirm the intended scope in the resulting capture.
The images cannot be compared pixel by pixel	The exported images have different dimensions.	Capture both versions with identical browser dimensions and scope. Avoid resizing one image to hide a capture mismatch.
A change appears, but the page seems fine	Antialiasing, font rendering, animation, or small shifts can create pixel differences.	Inspect the original screenshots and determine whether the difference matters to users.
Notifications are missing	The monitor notification configuration or callback endpoint may be incorrect or unavailable.	Review the current REST API configuration, check server logs, and verify the callback endpoint can receive requests.
An API key appears in browser code	The REST request was made from a client users can inspect.	Move the request to a server and keep the application key in server-side configuration or a secret store.

Performance, reliability, and cost considerations

Capture frequency: More frequent monitoring gives you a tighter window for noticing changes, but also creates more captures to review. Choose an interval based on how quickly changes matter to your workflow.
Capture scope: A selected element can reduce unrelated visual noise. Whole-page captures preserve context and can expose layout changes outside a component.
Repeatability: Stable dimensions and timing improve the usefulness of comparisons. They do not prevent source pages from changing dynamically.
History: The Web Monitor page states that the last ten detected changes can be reviewed. Confirm current retention and plan terms before relying on a particular history depth.
Plan limits: GrabzIt’s page states up to 50 webpage changes monitored per month free; this is a vendor-stated offer and may change. Verify current limits and pricing on GrabzIt’s site before planning a production workload.
Failure handling: Treat a missing or incomplete capture as an observation to investigate, not proof that the page has no changes. Check the capture settings and monitor status before accepting a comparison.

FAQ

Does GrabzIt show changed pixels in a diff overlay?

The reviewed documentation describes version review and comparison, but does not establish a built-in pixel-highlight overlay. Export the images and use a separate image-diff workflow for that view.

Should I monitor the whole page or one element?

Use the whole page when surrounding layout matters. Use a selector when the question is specifically about a component and unrelated content changes would distract from review.

Does a visual difference mean the site is broken?

No. It means the rendered screenshots differ. Inspect the difference and decide whether it is intended and whether it affects the experience you are monitoring.

Can I expose the GrabzIt application key in frontend code?

No. GrabzIt’s REST documentation warns against exposing the application key in client-side calls. Keep authenticated API requests on a server.