How to Monitor a Website with Automatic Screenshots — Free Setup

How to Monitor a Website with Automatic Screenshots — Free Setup

Uptime monitors tell you if a page returns 200. They don't tell you if the page looks right. A visual monitoring setup using screenshots fills that gap: you capture the page periodically and compare frames to detect changes.

Here's how to set this up using a free screenshot API and standard Unix tools.

The Basic Approach

1. A cron job runs every N minutes/hours
2. It calls the screenshot API with your target URL
3. The screenshot is saved with a timestamp
4. Optionally: compare to the previous screenshot to detect changes

No paid monitoring service required.

Step 1: Basic Screenshot Capture Script

#!/bin/bash
# monitor-screenshot.sh

URL="https://yoursite.com"
OUTPUT_DIR="/var/monitoring/screenshots"
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
OUTPUT_FILE="${OUTPUT_DIR}/${TIMESTAMP}.png"

mkdir -p "${OUTPUT_DIR}"

curl -s "https://hermesforge.dev/api/screenshot?url=${URL}&format=png&width=1280&height=800" \
  -o "${OUTPUT_FILE}"

echo "Screenshot saved: ${OUTPUT_FILE}"

Step 2: Schedule with Cron

Run every hour:

0 * * * * /path/to/monitor-screenshot.sh >> /var/log/monitor.log 2>&1

Run every 15 minutes:

*/15 * * * * /path/to/monitor-screenshot.sh >> /var/log/monitor.log 2>&1

Step 3: Detect Visual Changes

Use ImageMagick's compare command to diff screenshots:

#!/bin/bash
# detect-changes.sh

LATEST=$(ls -t /var/monitoring/screenshots/*.png | head -1)
PREVIOUS=$(ls -t /var/monitoring/screenshots/*.png | head -2 | tail -1)

if [ -z "${PREVIOUS}" ]; then
  echo "No previous screenshot to compare"
  exit 0
fi

DIFF_SCORE=$(convert "${LATEST}" "${PREVIOUS}" -metric RMSE -compare -format "%[distortion]" info: 2>&1)

# Threshold: alert if difference > 0.01 (1%)
THRESHOLD=0.01
if (( $(echo "${DIFF_SCORE} > ${THRESHOLD}" | bc -l) )); then
  echo "VISUAL CHANGE DETECTED: score=${DIFF_SCORE}"
  # Add your alert here: email, Slack webhook, etc.
fi

Practical Use Cases

Cookie banner detection: Has a new consent banner appeared? A visual diff will catch it immediately, even if your uptime monitor sees a 200.

Third-party embed monitoring: Are your ads, chat widgets, or embedded content rendering correctly? Screenshot the page and check.

Competitor price monitoring: Screenshot a competitor's pricing page daily. When it changes, you'll see it.

Dashboard audit trail: Capture your analytics dashboard or status page on a schedule. Build a visual history of how your metrics evolved.

Deployment verification: After every deploy, automatically screenshot key pages. Compare to pre-deploy screenshots to catch regressions.

Dark pattern detection: Monitor sign-up flows for dark pattern additions — pre-checked boxes, hidden fees. A screenshot diff will surface visual additions.

Handling JavaScript-Heavy Pages

For pages that load content dynamically, add a delay:

curl -s "https://hermesforge.dev/api/screenshot?url=${URL}&format=png&delay=3000" \
  -o "${OUTPUT_FILE}"

The delay=3000 parameter waits 3 seconds after the page loads before taking the screenshot.

Storage Management

Screenshots accumulate. Add a cleanup step to keep only the last N days:

# Keep only last 7 days of screenshots
find /var/monitoring/screenshots -name "*.png" -mtime +7 -delete

Alerting

Add a Slack webhook notification when changes are detected:

# In detect-changes.sh, after detecting change:
WEBHOOK_URL="https://hooks.slack.com/services/YOUR/WEBHOOK/URL"
curl -s -X POST "${WEBHOOK_URL}" \
  -H "Content-Type: application/json" \
  -d "{\"text\": \"Visual change detected on ${URL}. Score: ${DIFF_SCORE}\"}"

Try the Screenshot API

The free screenshot API requires no signup or API key for basic monitoring use:

curl "https://hermesforge.dev/api/screenshot?url=https://yoursite.com&format=png&width=1280&height=800" \
  -o screenshot.png

Test it manually first →

Verify the output looks right for your target URL, then automate with the steps above.