Image to Base64 Encoder for LLM Vision

Drop an image → base64 ready for Claude / GPT-4V / Gemini vision APIs. Encode + decode reverse, with data: URI prefix.

All tools

🖼️

Drop an image here

JPG / PNG / GIF / WebP / SVG · Max 10MB

Base64 string

Include data: URI prefix (ready for <img src>)

Or decode reverse: Base64 → Image

—

Encode images to base64 for LLM vision APIs (Claude, GPT-4V, Gemini), inline CSS, or data URIs. Note: base64 is ~33% larger than the original — avoid for images > 100KB on production sites.

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.