Screenshots for AI agents: how to let a model see a web page

What happens when an agent looks at a web page?

An AI agent sees a web page through a tool call: the model asks for a screenshot, a service renders the page in a real browser, and the image comes back as part of the next message. Five messages, each with a note on what it means.

How many tokens does a screenshot cost?

The token cost of a screenshot is set by its pixel dimensions and by the model, never by its file size. Anthropic and OpenAI publish a formula. Google publishes a fixed figure per resolution level for Gemini 3. Below is what each documentation page said on 11 October 2026.

• Anthropic · Claude^[1][2]

  Claude views an image in 28 × 28 pixel patches, and each patch is one visual token.

  tokens = ⌈width / 28⌉ × ⌈height / 28⌉

  • High-resolution tier, "Claude 4.7 and later models": long edge up to 2576 px and up to 4784 visual tokens.
  • Standard tier, "All other models": long edge up to 1568 px and up to 1568 visual tokens.
  • A larger image is scaled down to the largest size that fits both limits, keeping its aspect ratio. The documentation gives a reference implementation, used for the table below.
  • The token limit usually bites first: a 1920 × 1080 screenshot becomes 1456 × 819 on the standard tier, not 1568 × 882.
  • Hard limit: 8000 × 8000 px per image. A request with more than 20 images gets a stricter per-image limit, and Anthropic advises keeping each side at 2000 px or less there.

• OpenAI · GPT models^[3]

  Newer models count 32 × 32 pixel patches and multiply by a model factor. Older models count 512 px tiles on top of a base cost.

  patch models: tokens = ⌈⌈width / 32⌉ × ⌈height / 32⌉ × multiplier⌉ · tile models: tokens = base + tiles × tile tokens

  • The multiplier is 1.2 for gpt-6-astra, gpt-5.6-sol, gpt-5.6-terra, gpt-5.6-luna, gpt-5.5, gpt-5.4 and gpt-5.2, and 1.62 for gpt-4.1-mini.
  • The detail parameter (low, high, original or auto) sets the resizing. For gpt-6-astra, high scales the image down to a 2,500-patch budget, and auto, the default, behaves like original: no downscaling.
  • An image that still needs more than 30,000 patches is rejected, not resized.
  • Tile models: gpt-4o and gpt-4.1 cost 85 base tokens plus 170 per tile, gpt-5.1 costs 70 plus 140. The image is first fitted into 2048 × 2048, then its shortest side is scaled to 768 px.
  • With detail: low a tile model charges only its base tokens, whatever the size.

• Google · Gemini^[4][5]

  On Gemini 3 models the token count of an image is set by the media_resolution level, not by its pixel size.

  Gemini 3: low 280 · medium 560 · high 1120 · ultra_high 2240 · unspecified (default) 1120

  • The documentation calls these "approximate token counts" and the "maximum number of tokens allocated per input image".
  • It recommends high (1120) for most image analysis, and names ultra_high (2240) for computer use.
  • The image understanding page also gives a tile rule without naming a model: 258 tokens when both sides are 384 px or less, otherwise 768 × 768 tiles at 258 tokens each.
  • Google describes its tile count formula as "rough" and does not state the rounding, so the table below uses only the Gemini 3 media_resolution figure.

Worked examples: five capture sizes under six documented rules

Each cell is computed with the vendor's published formula, with the arithmetic under the result. In the OpenAI patch columns it reads patches first, then the 1.2 multiplier. “Resized” means the provider scales the image down before the model sees it.

Claude, standard tier:

all other Claude models

Claude, high-resolution tier:

Claude 4.7 and later models

OpenAI patches, detail high:

gpt-6-astra with detail: high

OpenAI patches, detail auto:

gpt-6-astra with detail: auto or original (auto is the default)

OpenAI tiles, detail high:

gpt-4o and gpt-4.1 with detail: high or auto

Gemini 3, default resolution:

Gemini 3 models, media_resolution unspecified

How to wire a screenshot tool into an agent

An agent gets screenshots in one of two ways: your code calls an HTTP API and attaches the image to the next message, or the model calls a tool on an MCP server itself. A third surface, machine-readable pages, tells the agent how to do either.

curl "https://curlshot.com/api/v1/screenshot?url=https://example.com&viewport_width=1024&viewport_height=768&format=jpeg&block_ads=true&block_cookie_banners=true" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  --output page.jpg

curl "https://curlshot.com/api/v1/screenshot?url=https://example.com&selector=h1&format=png" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  --output heading.png

{
  "mcpServers": {
    "screenshots": {
      "type": "http",
      "url": "https://curlshot.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_ACCESS_KEY"
      }
    }
  }
}

curl -X POST "https://curlshot.com/api/mcp" \
  -H "Authorization: Bearer YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "take_screenshot",
    "arguments": {
      "url": "https://example.com",
      "viewport_width": 390,
      "viewport_height": 844,
      "format": "webp"
    }
  }
}'

3Machine-readable pages

An agent that has never seen an API can learn it from plain text. CurlShot serves these addresses for that purpose, and they are a pattern worth copying on your own site.