Visual Diff API — compare web pages pixel by pixel
Most screenshot APIs hand you images and leave the comparison to you. RenderShot compares two URLs for you in one call — metrics first, image only when you ask.
What it does
The POST /v1/diff endpoint renders a baseline and a candidate URL under identical settings, then runs a pixel comparison (pixelmatch). You get the difference_percentage, different_pixels and total_pixels — and an optional base64 diff image. Built for visual regression testing, release checks and change detection.
Why it's different
| Capability | RenderShot | Typical screenshot API |
|---|---|---|
| Built-in pixel diff | Yes — /v1/diff | No — compare yourself |
| Metrics-first (no image needed) | Yes | n/a |
| Ignore regions & selectors | Yes | n/a |
| SHA-256 fast path (identical = 0%) | Yes | n/a |
| Dimension handling (pad / crop / resize) | Yes | n/a |
| Anti-aliasing control | Yes | n/a |
"Compare yourself" means downloading both images and running your own pixel comparison. RenderShot does it server-side and returns the number.
Key features
- Metrics-first. Default
diffOutput=metricsreturns numbers only — you pay for a number on every green run, not a megabyte. Ask forimageorallwhen something changed. - Kill false positives.
ignoreSelectorsandignoreRegionsexclude cookie banners, ads and dynamic widgets. - Fast path. Byte-identical captures skip pixelmatch via a SHA-256 hash and return
fast_path:true, 0%. - Deterministic. Animations paused, fonts ready, media frozen before capture — so the diff measures real change, not timing noise.
- Dimension modes.
pad,croporresizewhen the two pages differ in size.
Catch regressions in CI
curl --request POST \
--url https://screenshot-e-pdf-render.p.rapidapi.com/v1/diff \
--header 'X-RapidAPI-Key: YOUR_KEY' \
--header 'X-RapidAPI-Host: screenshot-e-pdf-render.p.rapidapi.com' \
--header 'Content-Type: application/json' \
--data '{
"baseline": { "url": "https://prod.example.com/pricing" },
"candidate": { "url": "https://staging.example.com/pricing" },
"options": { "diffOutput": "metrics", "fullPage": true,
"ignoreSelectors": [".cookie-banner"] }
}'
Response (no image, fast):
{ "changed": true, "difference_percentage": 2.41,
"different_pixels": 18960, "total_pixels": 786432, "fast_path": false }
Read difference_percentage and fail the build above your threshold — no Chromium in your pipeline.
FAQ
- What is a visual diff API?
- It captures two pages and compares them pixel by pixel, returning how much changed. RenderShot's
/v1/diffdoes this server-side and returns the difference percentage. - How do I detect visual regressions?
- Diff your production URL (baseline) against preview/staging (candidate), read
difference_percentage, fail above threshold. - Can I ignore banners and ads?
- Yes —
ignoreSelectorsandignoreRegionsexclude them; identical captures take a SHA-256 fast path.