Image to Base64 Encoder for LLM Vision

When to encode images to base64

• LLM Vision APIs: Claude, GPT-4V, Gemini Vision all accept images as base64 in the JSON request body.
• Inline CSS: background: url(data:image/png;base64,...) — saves an HTTP request for small icons.
• HTML email: embed logos and small images directly without hosting.
• Local API testing: send test images in Postman/curl without uploading to a server.
• Quick backup: stash images as text in a note, paste back later.

Using with the Claude API

POST https://api.anthropic.com/v1/messages
{
  "model": "claude-sonnet-4-7",
  "messages": [{
    "role": "user",
    "content": [
      {
        "type": "image",
        "source": {
          "type": "base64",
          "media_type": "image/jpeg",
          "data": "/9j/4AAQSkZJRgABAQAAAQ..." // base64 from this tool (NO data: prefix)
        }
      },
      { "type": "text", "text": "Describe this image" }
    ]
  }]
}

Note: Claude wants raw base64 (NO data:image/...;base64, prefix). Uncheck "Include data: URI prefix" for the clean string.

Using with OpenAI GPT-4V

OpenAI is the opposite — it wants the full data URL with prefix:

{
  "type": "image_url",
  "image_url": {
    "url": "data:image/jpeg;base64,/9j/4AAQ..." // WITH prefix
  }
}

Size considerations

• Base64 is ~33% larger than the original (4 chars per 3 bytes).
• Web production: only inline images < 100KB. Bigger ones should use real URLs + caching.
• LLM APIs: Claude limit ~5MB base64, GPT-4V ~20MB.
• This tool caps at 10MB for safety.