Claude Academy
Sign in

Building with the Claude API · lesson 13 of 17

Vision (Image Input)

Claude can read images directly. Use for OCR, chart interpretation, screenshot debugging, document understanding, etc.

Sending an image

Two delivery modes:

Base64:

{
  "type": "image",
  "source": {
    "type": "base64",
    "media_type": "image/png",
    "data": base64_str,
  },
}

URL (where supported by the platform):

{
  "type": "image",
  "source": {"type": "url", "url": "https://..."},
}

Up to ~20 images per request typical. Each image consumes tokens proportional to dimensions (~1.15 tokens per pixel-pair).

Best practices

  • Resize before sending. A 1568px-on-longest-edge resolution is usually plenty. Larger costs more tokens with no quality gain.
  • Mention what to look at. "In the screenshot, identify the error in the second log entry" beats "what's wrong?"
  • For multiple images, label them. "Image 1 shows X, image 2 shows Y. Compare..."
  • For OCR-heavy work, use PDF input (document blocks) instead — Claude reads PDFs natively.

PDF input

{
  "type": "document",
  "source": {"type": "base64", "media_type": "application/pdf", "data": ...},
}

PDFs preserve text + vision — Claude sees both the rendered page and the extracted text.

See also