Image to Base64 for AI Vision APIs

Drop an image to get its Base64 data URL, plus ready-to-paste request payloads for OpenAI GPT-4o, Anthropic Claude, and Google Gemini. Every vision model takes images as Base64 — this gives you the exact format each one expects. Runs locally; your image never leaves the browser.

Drop an image here or click to browse

PNG · JPG · GIF · WebP · SVG

—

RAW BASE64

Copy

Raw Base64 output

DATA URL

Copy

Data URL output

Waiting for an image

How to convert an image to Base64 for an AI vision API

Drag any image onto the drop zone above (or click to browse). The tool reads it locally with the browser's FileReader API, encodes the bytes to Base64, and gives you two outputs: the raw Base64 payload and the full data URL (data:<mime>;base64,<base64>). Which one you paste depends on the provider — OpenAI wants the full data URL, while Claude and Gemini want the raw Base64 with the media type declared separately. Copy the value you need and drop it into one of the payloads below.

The payload format for each provider

All three vision APIs accept Base64, but each wraps it differently. Copy a payload below — the Copy payload buttons substitute the actual Base64 from the output box above and set the media type to your image's detected MIME. The displayed snippets use a {BASE64} placeholder for readability.

{
  "model": "gpt-4o",
  "messages": [{ "role": "user", "content": [
    { "type": "text", "text": "What's in this image?" },
    { "type": "image_url", "image_url": { "url": "data:image/png;base64,{BASE64}" } }
  ]}]
}

{
  "model": "claude-opus-4-8",
  "max_tokens": 1024,
  "messages": [{ "role": "user", "content": [
    { "type": "image", "source": { "type": "base64", "media_type": "image/png", "data": "{BASE64}" } },
    { "type": "text", "text": "What's in this image?" }
  ]}]
}

{
  "contents": [{ "parts": [
    { "inline_data": { "mime_type": "image/png", "data": "{BASE64}" } },
    { "text": "What's in this image?" }
  ]}]
}

The one thing that differs is where the Base64 goes and how you declare its type: Claude uses source.type: "base64" plus a media_type; OpenAI wraps the full data: URL in image_url.url; Gemini uses inline_data.mime_type with raw Base64 in data. In every case the media_type / mime_type must match the actual image bytes.

Image size and token limits

Each provider caps how much image data a single request can carry:

• OpenAI & Anthropic Claude: roughly 5 MB per image through the API. Both downscale large images internally, so oversized uploads waste bandwidth without improving results.
• Google Gemini: about 20 MB of inline data per request. Above that, upload with the Files API and reference the returned file instead of inlining Base64.
• Cost: a larger Base64 string means a bigger request body — and since Base64 is ~33% larger than the raw bytes, resize big images before encoding. Image token cost is driven by dimensions, so downscaling lowers both payload size and token usage.

Common errors

"Invalid image." Usually the declared type is wrong or mislabeled (a JPEG sent as image/png), or you passed a full data: URL where raw Base64 is expected. Claude and Gemini want raw Base64 in the data field with the type declared separately; only OpenAI takes the full data URL.

"Payload too large." The encoded image exceeds the provider's per-request limit. Resize or recompress the image, or switch to a file/URL upload (Gemini's Files API, or OpenAI's remote-URL form of image_url) instead of inlining Base64.

Is this private?

Yes. The image is encoded entirely client-side in JavaScript — it is read into memory in the browser and converted to Base64 locally, and never uploaded to base64.dev or anywhere else. That matters when the image is confidential: you can generate the exact payload you'll send to a model provider without exposing the file to a third party first. Confirm it in DevTools → Network: adding an image fires no request.

Frequently asked questions

How do I send an image to GPT-4o / Claude / Gemini as Base64?

Encode the image to Base64, then place it in the provider's request format. GPT-4o takes a full data URL in content[].image_url.url; Claude takes raw Base64 in content[].source.data with source.type: "base64" and a matching media_type; Gemini takes raw Base64 in parts[].inline_data.data with a matching mime_type. This tool gives you both the raw Base64 and the full data URL, so you can paste whichever the provider expects.

Do I include the data: prefix?

For OpenAI, yes — the full data:image/...;base64,... URL goes into image_url.url. For Claude and Gemini, no — use the raw Base64 only in the data field and declare the format via media_type (Claude) or mime_type (Gemini). A stray data: prefix where raw Base64 is expected triggers an invalid image error.

What image size is allowed?

OpenAI and Anthropic accept roughly up to 5 MB per image and downscale large ones internally. Gemini allows about 20 MB of inline data per request, and above that you use the Files API. Because Base64 adds ~33% overhead, resize big images before encoding.

Why do I get an "invalid image" error?

Almost always a mismatched or wrong MIME type, or a stray data: prefix. The declared media_type / mime_type must match the actual image bytes, and Claude/Gemini need raw Base64 in data — not a full data URL.

Does Base64 increase my token cost?

Image tokens are computed from the image's dimensions, not the length of the Base64 string, so encoding doesn't directly raise the token count. It does make the raw request body ~33% larger, which affects size limits and upload time. Resizing lowers both token cost and payload size.