Image Input (Vision)

Give Claude Code images by paste, drag-and-drop or file path to read screenshots, mockups, diagrams and charts — one QCode.cc API key works on every endpoint.

Need an API key? Sign up →·Endpoints & base URLs →

Claude Code doesn't just read code — it can see images. Hand it a screenshot, a design mockup, an error screen, or an architecture diagram, and a vision-capable model will literally "read" what's in the picture, then act on it together with your prompt — turning a mockup into a UI, locating a bug from an error screenshot, or explaining an architecture diagram or data chart.

This page is about image input: you provide the picture, the model understands it. That is a different thing from "image generation."

⚠️ Don't confuse this with image generation This page is about feeding images to the model so it can understand them (vision input). If you want the AI to generate / edit images (posters, illustrations, UI mockups, cutout/background swaps), that's a separate capability — use gpt-image-2. See gpt-image-2 Image Generation. In one line: reading images = this page; drawing images = image-2.

Three ways to provide an image¶

Inside a Claude Code session, there are three ways to give an image to the model:

On macOS, a screenshot goes to the clipboard by default, so Ctrl+V works right away; if the screenshot was saved as a file, drag-and-drop or a path is more reliable. Paste and drag support varies by terminal / OS — if it isn't recognized, fall back to "reference a file path," which is the most reliable option.

Reference-a-path examples¶

> Look at the mockup ./design/dashboard.png and implement it with React + Tailwind
> What's causing this error screenshot @screenshots/build-error.png, and how do I fix it?
> Explain the system architecture in docs/architecture.png — how do the components interact?

Referencing a path is reproducible: put it in a script or a prompt template and it points to the exact same image every time, with no manual pasting.

Typical use cases¶

1. Mockup / screenshot → UI code¶

Give Claude Code a mockup or a screenshot of an existing page and have it reproduce runnable frontend code.

> Here's the mockup @mockups/pricing-page.png. Implement it with Next.js + Tailwind.
  Match the layout, spacing, and colors as closely as possible, with sensible component splits.

The model reads the layout, copy, and colors from the image and generates the matching component code. Fidelity depends on how clear the image is and on the constraints in your prompt (framework, styling system, naming conventions, etc.).

2. Error screenshot → locate and fix¶

Those red errors in your IDE, browser console, or terminal — just screenshot them instead of retyping a long stack trace.

> @screenshots/ts-error.png How do I fix this TypeScript error? The relevant code is in src/api/client.ts

The model reads the error message and stack from the screenshot and, combined with the code file you point to, suggests a fix.

3. Architecture diagram / data chart → understand and explain¶

Hand it an architecture diagram, sequence diagram, flowchart, monitoring dashboard, or data chart, and have it explain, extract data, or write code / docs from it.

> Explain the data-flow diagram @diagrams/data-flow.png and draft an API doc based on it
> Read this monitoring screenshot @screenshots/latency.png — what's the p95 latency range? Any abnormal spikes?

Which models can see images¶

Vision is a property of the model — not every model can read images. Vision-capable models available via QCode.cc:

Lightweight text- / code-only models may not support image input. Feed an image to a non-vision model and the image is ignored or errors out — pick one of the models above. 4.x vision IDs such as claude-sonnet-4-6 and claude-opus-4-8 remain on sale. For switching models, see Model Selection.

QCode.cc's advantage: one cr_ API Key covers every protocol and model. The same key works with Claude vision models and GPT-5.x alike, switching on demand without changing accounts. For endpoints and protocol paths, see Endpoints & API Formats (users in China should prefer asia.qcode.cc).

Practical tips¶

• Keep images clear: too low a resolution or blurred text means the model can't read it accurately. Use originals for mockups and error screenshots; don't over-compress.
• Don't pile on too many images at once: more and larger images burn more tokens and make it harder to stay on point. Focus on one or two key images at a time.
• Spell out your intent in text: state next to the image what you want it to do ("reproduce in React," "find the cause of the error," "extract the table data") — far better than dropping an image alone.
• Redact sensitive info first: mask keys, tokens, internal addresses, user data, etc. in the screenshot before sending it.
• Use paths for batch scenarios: to process images in scripts / automation, "reference a file path" is the most controllable approach; combined with the headless mode in Automation & CI/CD you can batch-process.

Image formats, sizes and token cost¶

As of 2026-10-15, according to Anthropic's official vision documentation (a useful reference when you use Claude through QCode):

In practice: do not capture screenshots larger than needed. A full-screen 4K capture gets scaled down, so the extra pixels add upload size but no clarity. Cropping to the region that really matters is both more accurate and cheaper in tokens than a full-screen capture.

Attaching images in Claude Code¶

According to the Claude Code documentation, you can drag an image into the window or copy it and paste with Ctrl+V (Alt+V on Windows and WSL, Cmd+V in iTerm2). A marker such as [Image #1] appears in the input box, and you can refer to it by number in your prompt.

Common errors and how to troubleshoot¶

FAQ¶

Must screenshots be PNG?¶

No. JPEG, PNG, GIF and WebP are all supported. For text-heavy interface screenshots prefer PNG, so lossy compression does not blur the text.

Are images billed extra?¶

Images count as input tokens and are billed per token together with text; per-model rates are listed at qcode.cc/models. The larger the image, the more visual tokens it uses, so crop before sending.

Can the model identify who is in a picture?¶

No. Anthropic's documentation states that Claude cannot be used to name people in images and refuses to do so. Describing the scene, reading text and explaining charts all work.

How many images can I send at once?¶

Anthropic's documentation gives an API limit of 100 images per request for models with a 200K-token context window and 600 for all other models, but above 20 images the dimension limit gets stricter, and the request size limit may be reached first. In daily use, focus on one or two key images at a time.

Related docs¶

• gpt-image-2 Image Generation — generate / edit images (the opposite of "reading images" here)
• Model Selection — pick a vision-capable model
• Endpoints & API Formats — endpoints, protocol paths, self-test methods
• Automation & CI/CD — batch-feed images in scripts

With a single QCode.cc API Key, enjoy Claude vision models and GPT-5.x multimodal power, with quota shared across every endpoint. See plans & pricing →

Enterprise →