ZeroVisual 👁️⚡️

Cut Vision LLM token consumption by up to 90% and shrink payload bytes by 99%—without requiring a single AI API key.

Get Started Benchmarks (-87.7% ViT)How It Works View on GitHub

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:

Before: Full 1280×800 Viewport

1,334 Tokens

Raw 1280x800 Wikipedia homepage with Search Box failure

Search Component (+8px Shift)

Resolution1280 × 800 px

Base64 Payload~1,200 KB

Anthropic Tokens1,334 tokens

Visual Noise66% Irrelevant Footer & Margins

After: ZeroVisual Model-Aligned Crop

306 Tokens (-77.1%)

ZeroVisual model-aligned crop of Wikipedia Search Component

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 Wikipedia Search Defect

Before: Full Mobile Viewport

336 – 3,024 Tokens

Raw iPhone Wikipedia page with Search Button shift

Viewport390 × 664 px

Payload Size~250 KB – 2.5 MB

Vision Tokens336 – 3,024 tokens

Signal-to-NoiseFull Screen Overload

After: ZeroVisual Mobile Crop

238 Tokens (-29.2% to -92%)

ZeroVisual cropped mobile Wikipedia Search component

14 × 17 Grid = 238 Patches

Resolution390 × 470 px (No Upscale)

WebP Payload17.3 KB (93% smaller)

Vision Tokens238 tokens

Visual Focus100% on Mobile Search Defect

Feature 5: 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-input"

Total: 544 Tokens (38.3 KB Payload)

Without ZeroVisual: 1,670 to 4,358 Tokens (3.7 MB)

67.4% to 87.5% Total 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.

Target Vision Model Provider

Diff Size Scenario Preset

Diff Width: 120px

Diff Height: 48px

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)

🎯 Why ZeroVisual?

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.

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 stdio and 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)

Tested against a local LLM endpoint (RadixArk/Qwen3.8-27B-NVFP4 via SGLang) across 6 real-world UI visual regression scenarios:

Vision Image Tokens: 5,252 tokens ➔ 644 tokens (-87.7% ViT Token Reduction)
Total Prompt + Reasoning Tokens: 11,556 tokens ➔ 5,421 tokens (-53.1% Total Tokens Saved)
Average Latency: 53.3s ➔ 36.4s (32% Faster Roundtrips)
Diagnostic Triage Accuracy: 76.7% ➔ 82.5% (+5.8% Accuracy)

👉 Read the full Empirical LLM Benchmark Report →

📐 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