Image to Base64 Converter

How To Use

1. Pick a direction: Image → Base64 encodes files, Base64 → Image decodes strings.
2. Encode: drop one or more images, click to browse, or paste a screenshot with Ctrl / Cmd + V. Decode: paste a data URI or raw Base64 — it decodes as you type.
3. For vision-API testing, pick an output format — Data URI for OpenAI and HTML embedding, Raw Base64 for Claude and Gemini.
4. Open a Vision API tab (OpenAI / Claude / Gemini) and copy the ready-made JSON request body.
5. In Base64 → Image, download the decoded image with the correct file extension, or copy the data URI / raw Base64 back out.

Usage Example

A 1×1-pixel PNG becomes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

Paste that string into the Base64 → Image tab and the 1×1 PNG is decoded and previewed — round trip complete. The same string inside an OpenAI request:

{ "type": "image_url", "image_url": { "url": "data:image/png;base64,…" } }

Use Cases

The classic use is testing multimodal / vision models: send a screenshot of your app to GPT-4o, Claude, or Gemini and check that it reads the UI correctly — without setting up object storage or a public image URL. It is equally handy for embedding small logos and icons directly into HTML emails or CSS so they load without extra requests, for including images in self-contained HTML prototypes, and for sharing an exact image payload in a bug report or API ticket as a copyable string. The reverse direction closes the loop: paste a Base64 payload from an API response, a log line, or a database dump and see — then download — the actual image it contains. Because conversion is byte-for-byte and fully local, QA teams can safely use screenshots of internal dashboards.

Best Practices

• Base64 adds ~33% overhead and counts against your API request size (most vision endpoints cap requests around 20 MB). If the string is too large, compress the image first — both tools run locally.
• For OpenAI, keep the full data: prefix. For Claude and Gemini, use the raw Base64 without the prefix — the snippets apply the right shape automatically.
• Encoding never strips EXIF/GPS metadata — the API sees your exact file. Remove sensitive screenshots from the batch when you are done; nothing is stored, but the tab keeps the last images in memory.
• Animated GIFs are encoded whole (first frame is what most APIs analyze). Prefer a static PNG frame for deterministic results.
• The decoder sniffs the format from the file's magic bytes — PNG, JPEG, GIF, WebP, BMP, ICO, and SVG. A string that decodes but is not an image is rejected with an explicit message instead of a broken preview, and payloads over 32 MB are declined up front.

Frequently Asked Questions

Is my image uploaded anywhere?

No. Encoding reads the file with the browser File API and decoding uses native Base64 functions — both entirely on your device. Nothing is uploaded, stored, or logged — safe for screenshots with sensitive content.

How do I convert Base64 back into an image?

Switch to the Base64 → Image tab, paste a data URI or a raw Base64 string, and the image is decoded and previewed as you type. Download saves it with the correct file extension — the format is detected from the file's magic bytes, so even a bare Base64 string without the data: prefix works.

What kinds of Base64 does the decoder accept?

Full data URIs (data:image/png;base64,…), raw Base64 with or without = padding, URL-safe Base64 (- and _ instead of + and /), values copied out of JSON with surrounding quotes, and strings wrapped across lines — whitespace is ignored automatically. Decoding happens as you type.

Why does the decoder say my Base64 is not an image?

The decoded bytes are checked against the magic-number signatures of PNG, JPEG, GIF, WebP, BMP, ICO, and SVG. Text or other binary data decodes fine but is not an image, so it is rejected with an explicit message — including the first bytes — instead of showing a broken preview.

How do I send an image to the OpenAI API as Base64?

Pick the OpenAI tab, copy the JSON snippet, and paste it as the messages body of your Chat Completions request. The image is embedded as a data URI inside an image_url content part, so no image hosting is needed.

How do I use this with the Claude (Anthropic) API?

Switch to the Claude tab and copy the snippet. It sends the image as a content block with source.type "base64", media_type, and the raw Base64 payload — exactly the shape the Anthropic Messages API expects.

How do I test image recognition in Google Gemini?

Use the Gemini tab. The snippet embeds the image as an inline_data part with mime_type and Base64 data inside contents, which you can paste into a generateContent REST request.

Why is the Base64 string larger than my file?

Base64 encodes every 3 bytes into 4 characters, so output is about 33% larger than the original. The tool shows the exact encoded size next to the original so you can predict request payloads.

Which image formats do vision APIs accept?

OpenAI, Anthropic, and Gemini accept PNG, JPEG, WebP, and GIF through Base64. SVG and other formats are fine for embedding in HTML or CSS but are typically rejected by vision APIs — the tool shows an explicit note when your format is not on that list.

Does converting re-compress or alter my image?

No. Encoding is byte-for-byte and decoding writes the exact decoded bytes to the downloaded file, so the image you get back is identical to the one that was encoded. Nothing is re-compressed, resized, or stripped.

When should I use the data URI instead of raw Base64?

The data URI (starting with data:image/png;base64,) is what OpenAI expects and what you paste into an <img> tag or CSS. Raw Base64 without the prefix is what Claude, Gemini, and most SDKs expect in their source/data fields.