Image to Base64 for API calls

The two payload shapes every vision API uses

Multimodal APIs accept images in one of two shapes, and mixing them up is the most common reason a Base64 image comes back broken. OpenAI (GPT-4o, GPT-4.1 and the other vision-capable models) wants a content part with type: "image_url" whose image_url.url is the full data URI — prefix and all:

{
  "model": "gpt-4o",
  "messages": [{
    "role": "user",
    "content": [
      { "type": "text", "text": "Describe this image" },
      { "type": "image_url",
        "image_url": { "url": "data:image/png;base64,iVBORw0KGgo..." } }
    ]
  }]
}

Google Cloud Vision is the opposite: the image.content field takes the raw Base64 payload only — a data: prefix there causes an encoding error:

{
  "requests": [{
    "image": { "content": "iVBORw0KGgo..." },
    "features": [{ "type": "TEXT_DETECTION" }]
  }]
}

This page reads your image once and fills both templates for you, with the correct MIME type detected from the actual file — PNG, JPEG, WebP, GIF and SVG all get their proper data:image/… prefix automatically.

Step by step

1. Add the image. Drag it in, pick it, or paste from the clipboard.
2. Copy the payload for your API. OpenAI and Cloud Vision templates are filled in automatically; the full data URI and raw Base64 outputs cover every other API.
3. Send it. The payload is valid JSON with the image already escaped — no manual string assembly, no truncation.

Mind the request size

Base64 inflates bytes by about 33%, and vision APIs cap request bodies (typically 4-20 MB). A phone photo at 4 MB becomes a 5.3 MB string before you have added a single prompt token. Models rarely benefit from more than 1024-2048 px of input, so compress the image first — resize to the resolution the model actually sees and the payload shrinks by an order of magnitude.

Why in-browser conversion matters for API work

Vision pipelines often handle images that cannot be pasted into a random web tool: internal screenshots, unreleased product photos, medical scans, documents under NDA. Upload-based converters put those bytes on someone else's server. This page encodes with the browser's FileReader API instead — there is no upload step at all, which you can verify in the Network tab: converting fires zero requests.

Debugging payloads that come back the other way

Many APIs also return images as Base64 inside JSON. When one does, the Base64 to image decoder previews and saves it, and the data URI extractor pulls every embedded image out of a bulk JSON or CSS dump in one pass.