Web Monitoring API — Visual Change Detection

Visual Web Monitoring: What It Is and Why It Matters

Traditional uptime monitoring checks whether a URL returns HTTP 200 and loads within a target response time. That is necessary but not sufficient for monitoring web applications. A page can return HTTP 200 with correct response time while showing a blank white screen, a JavaScript error message, a broken layout, or stale cached content. Visual monitoring catches these problems by capturing a screenshot of the rendered page and either storing it for human review or comparing it against a baseline to detect changes automatically.

Common visual monitoring use cases include: verifying that a deployment did not break any visible UI elements; detecting when a competitor changes their pricing page; alerting when a content page goes blank or shows an error state despite returning HTTP 200; archiving regulatory or legal pages (terms of service, privacy policies) to maintain a timestamped record of changes; and monitoring third-party embedded widgets (payment buttons, chat widgets, cookie consent banners) that could break independently of your application code.

Building a Screenshot-Based Monitor with SnapAPI

The basic visual monitoring pattern is: schedule a recurring job, capture a screenshot of your target URL, compare it to the previous screenshot (or store it with a timestamp for later review), and alert if the visual difference exceeds a threshold. SnapAPI handles the screenshot capture reliably; your monitoring application handles the scheduling, storage, comparison, and alerting logic.

import requests, hashlib, os
from datetime import datetime

SNAPAPI_KEY = os.environ['SNAPAPI_KEY']
STORAGE_DIR = '/var/screenshots'
os.makedirs(STORAGE_DIR, exist_ok=True)

def capture_and_compare(url: str) -> dict:
    r = requests.get('https://snapapi.pics/screenshot', params={
        'access_key': SNAPAPI_KEY,
        'url': url,
        'full_page': '1',
        'format': 'png',
        'viewport_width': '1440',
        'cache': '0',  # always fresh, no caching for monitoring
    })
    r.raise_for_status()
    new_bytes = r.content
    new_hash = hashlib.sha256(new_bytes).hexdigest()

    url_key = hashlib.md5(url.encode()).hexdigest()
    prev_file = f'{STORAGE_DIR}/{url_key}_prev.png'
    curr_file = f'{STORAGE_DIR}/{url_key}_{datetime.utcnow().strftime("%Y%m%d_%H%M%S")}.png'

    # Save current screenshot
    with open(curr_file, 'wb') as f:
        f.write(new_bytes)

    # Compare with previous
    if os.path.exists(prev_file):
        with open(prev_file, 'rb') as f:
            prev_hash = hashlib.sha256(f.read()).hexdigest()
        changed = new_hash != prev_hash
    else:
        changed = False  # first capture, no baseline

    # Update previous
    with open(prev_file, 'wb') as f:
        f.write(new_bytes)

    return {
        'url': url,
        'changed': changed,
        'screenshot_path': curr_file,
        'hash': new_hash,
        'timestamp': datetime.utcnow().isoformat()
    }

# Run as a cron job every 15 minutes
urls_to_monitor = [
    'https://yoursite.com',
    'https://yoursite.com/pricing',
    'https://yoursite.com/checkout',
]
for url in urls_to_monitor:
    result = capture_and_compare(url)
    if result['changed']:
        print(f"CHANGED: {url} at {result['timestamp']}")
        # trigger_alert(url, result['screenshot_path'])

Pixel-Diff Comparison with Pillow

Hash-based comparison detects any byte-level change, which can trigger false positives from minor dynamic content (timestamps, ad rotations, cookie banners). For more robust change detection, use pixel-level image comparison with PIL/Pillow to calculate the percentage of pixels that changed between screenshots, and only alert when the change percentage exceeds a threshold:

from PIL import Image, ImageChops
import numpy as np
import io

def pixel_diff_percent(img_bytes_a: bytes, img_bytes_b: bytes) -> float:
    img_a = Image.open(io.BytesIO(img_bytes_a)).convert('RGB')
    img_b = Image.open(io.BytesIO(img_bytes_b)).convert('RGB')

    # Resize to same dimensions if needed
    if img_a.size != img_b.size:
        img_b = img_b.resize(img_a.size, Image.LANCZOS)

    diff = ImageChops.difference(img_a, img_b)
    diff_array = np.array(diff)
    # Count pixels where any channel differs by more than 10
    changed_pixels = np.sum(np.any(diff_array > 10, axis=2))
    total_pixels = img_a.width * img_a.height
    return (changed_pixels / total_pixels) * 100

# Alert only if more than 5% of pixels changed
CHANGE_THRESHOLD_PCT = 5.0
diff_pct = pixel_diff_percent(prev_bytes, new_bytes)
if diff_pct > CHANGE_THRESHOLD_PCT:
    print(f"Significant change detected: {diff_pct:.1f}% of pixels changed")

Monitoring Pricing Pages for Competitor Changes

Competitor pricing monitoring is a high-value application of visual web monitoring. Marketing and product teams at SaaS companies regularly want to know when a competitor changes their pricing page — adds a new tier, drops prices, changes feature availability, or introduces a free tier. A screenshot monitor that checks competitor pricing pages daily and alerts on visual changes provides this intelligence automatically, without manual checking.

The architecture is straightforward: a scheduled job runs daily, captures screenshots of target competitor pricing pages via SnapAPI, compares each screenshot to the version from 24 hours ago, and sends a Slack notification with both screenshots (before and after) if the difference percentage exceeds the threshold. The visual diff immediately shows what changed, giving the team context without requiring them to visit the competitor site and remember what it looked like previously.

Deployment Verification Screenshots

Automated deployment verification is another strong use case. After a CI/CD pipeline deploys a new version to production, a post-deploy job captures screenshots of key pages (homepage, pricing, product pages, checkout flow) and compares them to pre-deploy screenshots captured just before the deployment. If any page differs significantly from its pre-deploy state, the job fails and triggers a rollback alert. This catches visual regressions — layout breaks, missing images, CSS failures, blank page states — that functional tests often miss because they test functionality rather than rendered appearance.

Screenshot Archive for Compliance and Legal

Regulated industries and legal teams often need to maintain timestamped archives of web page content — terms of service pages, privacy policies, regulatory disclosures, and contract pages. These archives serve as evidence that specific terms were in effect at a specific time. SnapAPI's screenshot endpoint provides this capability: capture a screenshot of each relevant page on a regular schedule, store the screenshots in immutable object storage (S3 with versioning enabled, or Cloudflare R2), and maintain a log mapping each screenshot file to its capture timestamp and URL. This creates an audit trail that can be produced in legal proceedings to demonstrate what a page contained at a given time.

Frequently Asked Questions

Alerting and Notification Patterns for Visual Monitors

A monitoring system without alerting is just an archive. When visual changes are detected, the alert needs to reach the right people quickly and with enough context to act. The most effective alerting pattern for screenshot-based monitors combines the pixel diff percentage, a side-by-side before/after image, and a link to the archived screenshots. This gives the recipient immediate visual context — they can see exactly what changed without having to navigate to the page themselves.

For Slack alerting, use Slack's Block Kit message format to send a structured message with the URL, change percentage, and both screenshot images attached. For email alerting, embed the before and after screenshots as inline images in an HTML email. For PagerDuty or OpsGenie alerting on critical page changes (checkout page goes blank, homepage shows error state), trigger a high-severity alert that wakes someone up rather than sending a low-priority notification. Match the alert severity to the business impact: a pricing page change is a low-urgency Slack notification; a checkout page error is a high-urgency on-call page. SnapAPI provides the screenshot data; your alerting pipeline determines how urgently that data is communicated.