Website Screenshots for GPT and Claude Vision

Vision models do not read your screenshot at the size you captured it. They scale it to their own limits, then cut it into patches and bill you per patch. The capture settings that give the best accuracy per token are the ones that match the model's limits: a 1280 px wide viewport at scale 1, JPEG at quality 80 to 85, and a crop to the element you care about instead of a tall full-page image.

This page gives the token math for each capture setting, the RenderScreenshot request for each, and a tested Python example. For the agent tool loop, see the screenshot API for AI agents.

What the model does with your image

Claude, from Anthropic's vision docs (checked 2026-10-15):

1. If the long edge or the patch count is over the model's limit, scale the image down, keeping the aspect ratio. The standard tier allows 1568 px and 1568 visual tokens. The high-resolution tier (Claude 4.7 and later) allows 2576 px and 4784 visual tokens.
2. Count 28x28 patches: ceil(width / 28) × ceil(height / 28) visual tokens.

OpenAI's current models do a similar thing with 32x32 patches, a per-model multiplier and a detail setting; older GPT-4o-class models use 512 px tiles plus a base cost. The exact numbers differ, but the rule holds for both vendors: pixels over the limit are thrown away, and you still pay to upload them.

Capture settings compared

Claude visual tokens per setting, calculated with the formula above. "Kept" is the share of the original width the model actually sees.

How to read it:

• 1280x800 at scale 1 is the sweet spot for the standard tier. It is the largest common desktop viewport that arrives untouched.
• Scale 2 is a bad trade on the standard tier (you upload 4 times the pixels and the model keeps about half of the width) and an expensive one on the high-res tier (3.5 times the tokens). Use it only when the task depends on fine detail and you run a high-res model.
• Phone captures are cheap at scale 1. 434 tokens for a full phone screen. Use scale 1 unless you are judging icon sharpness.
• Full-page captures lose text. At 39% width, 16 px body text becomes about 6 px. The model sees the layout, not the words. Our 26-page measurement found most real pages are far taller than 4000 px.

Crop instead of shrinking

When the question is about one part of the page, capture only that part. The model pays for the element's pixels and reads them at full size.

{
  "url": "https://example.com/pricing",
  "capture": { "mode": "element", "selector": "#pricing-table", "selector_required": true },
  "output": { "format": "jpeg", "quality": 85 }
}

A 900x600 table costs 33 × 22 = 726 tokens and loses nothing. You can also crop by coordinates with capture.clip (x, y, width, height). Both are described in capture options.

Format: bytes, not tokens

Token cost depends only on pixel size. Format changes upload size and latency. In our measurement of a Wikipedia article at 1280x800, the same capture was 334 KB as PNG, 150 KB as JPEG at quality 80 and 99 KB as WebP at quality 80. All three cost 1,334 tokens.

Avoid heavy compression (quality below about 60). Anthropic's docs warn that compression artifacts can make text hard for the model to read.

Tested example: capture, then ask by URL

This script renders the page, takes the public X-Cache-URL from the response, and gives Claude the image by URL. The model provider fetches the image, so your request body stays small. That matters in multi-turn conversations, where every turn resends earlier content.

"""Capture a page with RenderScreenshot, then ask Claude about it by image URL.

Usage: RS_API_KEY=rs_live_... ANTHROPIC_API_KEY=... python vision_by_url.py https://example.com
"""
import os
import sys

import anthropic
import httpx

RS_BASE_URL = os.environ.get("RS_BASE_URL", "https://api.renderscreenshot.com")


def capture(url: str) -> str:
    """Render the page and return the public CDN URL of the image."""
    resp = httpx.post(
        f"{RS_BASE_URL}/v1/screenshot",
        headers={"Authorization": f"Bearer {os.environ['RS_API_KEY']}"},
        json={
            "url": url,
            "viewport": {"width": 1280, "height": 800},
            "output": {"format": "jpeg", "quality": 85},
            "block": {"cookie_banners": True, "chat_widgets": True},
            "wait": {"until": "networkidle", "timeout": 30},
        },
        timeout=60,
    )
    resp.raise_for_status()
    return resp.headers["x-cache-url"]


def analyze(image_url: str) -> str:
    client = anthropic.Anthropic()
    message = client.messages.create(
        model=os.environ.get("ANTHROPIC_MODEL", "claude-opus-5-5"),
        max_tokens=600,
        messages=[
            {
                "role": "user",
                "content": [
                    {"type": "image", "source": {"type": "url", "url": image_url}},
                    {
                        "type": "text",
                        "text": (
                            "This is the first screen of a web page at 1280x800. "
                            "List: 1) the main headline, 2) the primary call to action, "
                            "3) any banner, dialog or error covering content. "
                            "Answer 'not visible' when something is not in the image."
                        ),
                    },
                ],
            }
        ],
    )
    print(f"input tokens: {message.usage.input_tokens}", file=sys.stderr)
    return "".join(block.text for block in message.content if block.type == "text")


if __name__ == "__main__":
    print(analyze(capture(sys.argv[1] if len(sys.argv) > 1 else "https://example.com")))

Tested on 2026-10-15 with Python 3.14, anthropic 1.14.0 and httpx 0.28.1, against local mocks of both APIs. The test confirmed the request bodies (the image block uses source.type: "url") and the error path. It did not call a live model.

Three prompt habits help vision accuracy: put the image before the question, state the capture size in the prompt so the model knows what it is looking at, and give it an explicit "not visible" answer so it does not invent content below the fold.

Measure accuracy on your own pages

Token cost is calculable. Accuracy depends on your pages and your questions, so test it before you pick settings for production:

1. Take 20 pages you care about and write 2 questions each with one checkable answer, at least one about small text (a price, a date, a version number).
2. Capture each page at three settings: 1280x800 scale 1, 1280x800 scale 2, and an element crop of the area that holds the answer.
3. Ask each question 3 times per setting with the same model and prompt.
4. Score with exact match in code. Plot accuracy against tokens per setting.

If scale 1 and the crop score the same as scale 2, you have your answer at a lower cost. We have not published our own accuracy numbers for this; the token study covers cost only.

Cost example

An analysis job that reviews 500 competitor pages a week at one viewport capture each uses about 2,200 credits a month, which fits the Starter plan (see pricing). On the model side, 500 captures at 1,334 tokens is about 667,000 image input tokens a week, before prompts and output. Cropping to one element per page usually cuts that by half or more.

Next steps

• Get a free API key and run the script on three of your own pages.
• To review landing pages with a structured rubric, see AI landing page review.
• To let an agent decide when to capture, see screenshots for AI agents.