How to Convert Images to Base64 for Vision API Requests

Why Vision APIs Need Base64

Modern vision APIs like OpenAI's GPT-4o, Google Cloud Vision, Anthropic Claude, and Qwen-VL accept images in one of two ways: a public URL pointing to the image, or the raw image data encoded as a Base64 string embedded directly in the JSON request body.

The URL approach is simple if your image is already hosted online. But in many real scenarios, the image is on your local machine: a screenshot you just took, a scan from a document, a frame extracted from a video, or a test image from your development pipeline. For these cases, Base64 encoding is the way to go. It lets you embed the image directly in the API request without needing to upload it to a server first.

A typical Vision API request with Base64 looks like this:

{
  "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,iVBORw0KGgo..."
          }
        }
      ]
    }
  ]
}

The challenge is getting from your local file to that Base64 string, especially if you need to do it repeatedly during development and testing.

Common Methods (And Their Drawbacks)

1. Python Script

import base64

with open("screenshot.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()
print(encoded)

Works fine, but you need Python installed, need to write (or find) the script, then copy the output from the terminal. If you're testing different images repeatedly, you're running this script each time, then pasting the output into your JSON manually.

2. Command Line

# macOS / Linux
base64 -i screenshot.png | pbcopy

# Windows PowerShell
[Convert]::ToBase64String([IO.File]::ReadAllBytes("screenshot.png")) | Set-Clipboard

Quick if you remember the syntax, but the output is just a raw string. You can't verify what you have. Is it the right image? Was the encoding correct? You won't know until you send the API request and check the result.

3. Online Base64 Converters

Plenty of websites offer drag-and-drop file-to-Base64 conversion. The obvious problem: you're uploading your file to someone else's server. For a test screenshot that might be fine. For proprietary data, internal documents, medical images, or anything covered by an NDA, it's a non-starter.

A Better Way: Paste, Preview, Copy

ViewJSON offers a simpler workflow. Paste an image directly into the editor, get the Base64 string instantly, and everything stays in your browser:

1. Open ViewJSON — Go to viewjson.net
2. Paste your image — Copy an image from anywhere (file explorer, screenshot tool, browser, design app) and paste it directly into the JSON editor with Ctrl+V
3. See the preview — ViewJSON automatically converts the image to Base64 and inserts it as a JSON string value. An inline image preview appears immediately so you can verify it's the correct image.
4. Copy the Base64 — Click the copy button or select the string value. You get the complete Base64-encoded string, ready to paste into your API request payload.

The full workflow in action:

Handling Large Base64 Strings

Base64-encoded images can be extremely long. A single high-resolution JPEG can produce over 100,000 characters. To keep the editor responsive, ViewJSON automatically truncates the display of long strings. But the truncation is only visual.

When you copy a truncated Base64 value, ViewJSON's lossless clipboard restoration mechanism kicks in. It detects that you're copying a truncated string and automatically restores the full original content to your clipboard. You always get the complete, unmodified Base64 string, never a truncated version that would produce a corrupted file.

Building the Complete API Payload

Once you have your Base64 string, you need to wrap it in the correct API format. Here are examples for the most common Vision APIs:

OpenAI GPT-4o Vision

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

Google Cloud Vision

{
  "requests": [
    {
      "image": {
        "content": "<YOUR_BASE64_HERE>"
      },
      "features": [
        { "type": "TEXT_DETECTION" }
      ]
    }
  ]
}

After pasting the image in ViewJSON, copy the generated Base64 string and plug it into your API request payload. You can also use ViewJSON's API Request Builder to set up URL, method, headers, and body, then export the whole request as a cURL command.

Privacy: No Upload Required

Unlike online Base64 converter websites, ViewJSON runs entirely in your browser. The image-to-Base64 conversion happens locally using the browser's built-in FileReader API. Your image is never sent to any server.

This makes it suitable for converting sensitive images: medical scans for healthcare AI APIs, internal documents for OCR services, proprietary product images for visual search systems, or any file you wouldn't want to upload to a third-party converter.

Method Comparison