Image Base64 Encoder for Vision Models
Encode an image into a Base64 data URI, estimate GPT-4o image token usage with OpenAI's published tile formula, and check reference image limits for GPT-4V, Claude 3 and Gemini vision models. Everything runs locally in your browser.
FreeOnline Tool
Loading…
How to Use
- Click the upload area to pick an image, drag one onto it, or paste an image URL into the box below and press "Load".
- Once loaded you see a preview, the original dimensions, the original file size, the Base64-encoded size and the estimated token usage based on the GPT-4o tile algorithm.
- Switch between the low and high detail modes to compare token estimates: low mode always costs 85 tokens, while high mode counts image tiles.
- Press "Copy data URI" to copy the full Base64 data URI, ready to paste into a GPT-4o, Claude 3 or Gemini chat box or API request.
- The table below lists reference file-size and resolution limits for the major vision models so you can tell in advance whether to compress.
- Press "Load sample image" to walk through the whole flow, or "Upload again" to swap the image.
Features
- Purpose-built for feeding images to vision models such as GPT-4V/GPT-4o, Claude 3 Vision and Gemini Vision. It is deliberately narrower than the site's general Base64 file/string converters, focusing on image encoding plus vision-model token estimation.
- Three ways to load an image - local upload, drag and drop, or an image URL - all encoded locally in the browser with FileReader/Canvas, with nothing sent to any server.
- Estimates GPT-4o image tokens using OpenAI's published tile-based algorithm: a flat 85 tokens in low mode, and 85 + 170 x tile count based on 512x512 tiles in high mode.
- Shows the Base64-encoded size and notes that encoding inflates the payload by roughly 33%.
- Summarizes reference file-size and resolution limits for GPT-4o, Claude 3 and Gemini in one table.
Use Cases
Estimating GPT-4o API cost
Load the image you are about to send to GPT-4o and estimate its token usage in advance so calls stay inside budget.
Pre-flight checks for vision models
Check an image's size and resolution against the reference limits before calling, so the request is not rejected for being too large.
Assembling multimodal request bodies locally
Grab the image's Base64 data URI to hand-build GPT-4V, Claude 3 or Gemini multimodal API payloads while debugging.
Comparing low and high detail modes
See the token difference between low and high detail to decide which mode balances cost against recognition accuracy for your case.
FAQ
How is this different from the site's general Base64 file and string converters?
Those are general-purpose Base64 tools for any file or text. This one is image-specific and additionally provides reference image limits and token estimates for AI vision models such as GPT-4o, so it is a more focused tool rather than a duplicate.
How accurate is the token estimate?
The formula follows the tile-based algorithm from OpenAI's public documentation (a flat 85 tokens for low detail, 85 + 170 x tile count for 512x512 tiles in high detail). Treat it as a reference; actual billing follows OpenAI's current documentation and your invoice.
Is my image uploaded to your server?
No. Reading, encoding and previewing all happen locally in your browser using FileReader and Canvas; the tool never sends the image anywhere.
Why does an image URL fail to load?
Usually because the remote server does not allow cross-origin (CORS) access, so browser security rules stop the page from reading the image. Upload the file directly instead.