Zero API Keys Required (BYOA)
ZeroVisual never calls LLM APIs directly. It runs 100% locally on your machine or CI/CD runner and outputs structured JSON or serves tools via standard MCP over stdio.
ZeroVisual
Cut Vision LLM token consumption by up to 90% and shrink payload bytes by 99%—without requiring a single AI API key.
Automated Visual Regression Triage
In an E2E Playwright test for https://www.wikipedia.org/, an unexpected +8px button padding shift causes the central #search-form to fail visual comparison. Without ZeroVisual, AI coding agents receive massive full-viewport screenshots overloaded with irrelevant footer links and empty whitespace. ZeroVisual isolates the defect, aligns to model-native vision tiles, and feeds clean, actionable context to your agent:
Search Component (+8px Shift)
Resolution1280 × 800 px
Base64 Payload~1,200 KB
Anthropic Tokens1,334 tokens
Visual Noise66% Irrelevant Content
18 × 16 Grid = 288 Patches (Exact 1-Tile Fit)
Resolution504 × 457 px (Single Tile)
WebP Payload21.0 KB (98.2% smaller)
Anthropic Tokens306 tokens
Model Focus100% on Search Defect
Viewport390 × 664 px
Payload Size~250 KB – 2.5 MB
Vision Tokens336 – 3,024 tokens
Signal-to-NoiseFull Screen Overload
14 × 17 Grid = 238 Patches
Resolution390 × 470 px (No Upscale)
WebP Payload17.3 KB (93% smaller)
Vision Tokens238 tokens
Visual Focus100% on Mobile Defect
Feature: Multi-Viewport Correlation
One Single Prompt Diagnoses Responsive Breakpoints
Instead of triggering separate AI reviews with disconnected full-page screenshots, ZeroVisual correlates Desktop Chrome and Mobile Safari under a single normalized testId in triage-ready.json:
Desktop Chrome (1280×800)
306 Tokens (21.0 KB)
+
Mobile Safari (390×844)
238 Tokens (17.3 KB)
=
Normalized testId: "tests/wikipedia.spec.ts:search"
544 Total Tokens (38.3 KB Payload)
Without ZeroVisual: 1,670 to 4,358 Tokens
⚡️ Up to 87.5% Token Savings Across Viewports
triage-ready.json (Delivered to AI Coding Agent)
{
"testId": "tests/wikipedia.spec.ts:search-input",
"status": "failed",
"diff": {
"desktop_chrome": {
"tokens": 306,
"tileGrid": "18x16",
"image": "data:image/webp;base64,UklGRm..."
},
"mobile_safari": {
"tokens": 238,
"tileGrid": "14x17",
"image": "data:image/webp;base64,UklGRn..."
}
},
"totalTokens": 544,
"savingsPercent": 77.1
}Interactive Token & Byte Savings Calculator
See exactly how much AI token spend and network bandwidth ZeroVisual saves on your visual test failures.
Vision Token Reduction
98.9%
2,691 tokens ➔ 28 tokens
Network / IPC Payload Size
99.8%
4,200 KB ➔ ~9 KB WebP
Model Context Clarity
100% Focused
Original 1920×1080 ➔ Cropped 184×112 (no upscale)
New: Real-World Web Benchmarks11 Live & Synthetic Scenarios
Interactive Benchmark & AI Session Explorer
Inspect side-by-side screenshots (Baseline, Actual, Diff, Crop) across live websites (Wikipedia, Hacker News, GitHub, MDN) and examine real VLM reasoning traces (<think>) and token metrics on Qwen 3.8-27B.
Why ZeroVisual?
Model-Aware Grid Math
Aligns failure diffs to exact Vision Transformer grids: 512px for OpenAI, 504px for Anthropic (28px patches), 768px/384px for Gemini, and 448px for Local models.
Multi-Viewport Aggregation
Correlates broken layouts across Desktop, Tablet, and Mobile viewports under a single normalized
testId. Your AI agent diagnoses the breakpoint bug in one single prompt.
Scoped Semantic Context
Captures the component's Playwright
ariaSnapshot YAML and 14 computed layout CSS properties instead of dumping 100,000+ characters of raw HTML.
Heuristic UI Linter + Penpot
Objective math checks for WCAG 2.1 AA contrast ratios, 8pt spacing rhythm, and 44px tap targets, plus native SVG/JSON token diffing for open-source Penpot designs.
Dual Isolated Agent Skills
Separate
zerovisual-regression (strict triage forensics) and zerovisual-design-qa (UI/UX coaching) skills to prevent prompt pollution and hallucinations.
Token & Payload Efficiency
Raw Full-HD PNG vs. ZeroVisual Model-Aligned WebP
| Metric | Raw Full-HD PNG (1920×1080) | ZeroVisual WebP (quality: 80) | Engineering Advantage |
|---|---|---|---|
| Vision LLM Tokens | ~1,600 – 2,691 tokens / viewport | ~28 – 324 tokens / viewport | Up to ~90% token savings (crops & fits exact 1-tile grid) |
| Payload Size | ~4,000 KB (5.3 MB Base64) | ~35 KB (~47 KB Base64) | 99% byte reduction (instant IPC & network upload) |
| JSON Parse Time | ~100–300 ms (pipe congestion) | < 1 ms | Zero UI lag or event loop blocking in IDE |
| Model UI Readability | Full canvas noise | Isolated diff bounding box + 32px padding | Eliminates VLM hallucinations on subtle UI shifts |
Why Both Token Count and Network Bytes Matter:
- Vision Tokens (Pixel Dimensions): Vision Transformers (ViTs) calculate tokens based on geometric patch grids (e.g. Anthropic's 28×28px patches, OpenAI's 512×512px tiles)—not file bytes. Cropping and downscaling ensures failure diffs fit inside a single vision tile.
- Network Bytes (Payload Size): MCP over
stdioand HTTP API requests transfer images as Base64 strings (+33% byte expansion). Dropping images from 4 MB to 35 KB prevents Node.js JSON serialization bottlenecks and keeps your AI coding agent snappy.
Live Empirical Validation (Qwen 3.8-27B & Live Websites)
Tested against a local LLM endpoint (RadixArk/Qwen3.8-27B-NVFP4 via SGLang) and live production websites (Wikipedia, Hacker News, GitHub, MDN) across 11 visual regression scenarios:
- Vision Image Tokens: 11,680 tokens ➔ 1,489 tokens (-87.3% ViT Token Reduction)
- Live Production Sites Payload: 492.3 KB ➔ 44.3 KB (-91.0% Bandwidth Saved)
- Average Latency: 53.3s ➔ 36.4s (32% Faster Roundtrips)
- Diagnostic Triage Accuracy: 76.7% ➔ 82.5% (+5.8% Accuracy)
Model Vision Grid Reference
| Provider Setting | Target Max Bounding Box | Vision Grid Mechanics | Approx. Token Cost per Diff |
|---|---|---|---|
openai | 512 × 512 px | Fits inside 1 standard OpenAI 512px tile | ~85 – 255 tokens |
anthropic | 504 × 504 px | Exact 18 × 18 grid of 28×28 px patches | ~28 – 324 tokens |
gemini | 768 × 768 px | Fits 1 native Gemini tile | ~258 tokens |
gemini (lowTokenMode) | 384 × 384 px | Sub-384px single base tile optimization | ~258 tokens (ultra-fast) |
local | 448 × 448 px (configurable) | Optimized for local VLMs (28px / 14px patch ViTs) | Local compute |