Fix 'Invalid Image' Base64 Errors (Vision APIs)

An 'invalid image' or 400 error from a vision API almost always means one of five things: (1) the wrong data: prefix (OpenAI needs the full data URL in image_url.url; Claude and Gemini need raw base64 in data, no prefix), (2) a MIME type that doesn't match the actual bytes, (3) whitespace/newlines in the base64, (4) truncated/incomplete base64, or (5) an unsupported format. Paste your Base64 or data URL below to check which. Everything runs in your browser — nothing is uploaded.

Why do I get an 'invalid image' error?

A vision API rejects a Base64 image for one of five reasons, in rough order of frequency:

1. Wrong data: prefix for the provider. OpenAI wants a full data URL; Claude and Gemini want raw base64 with no prefix. This is the single most common cause — see the table below.
2. MIME type doesn't match the bytes. You declared image/png but the bytes are actually a JPEG. The declared media_type / mimeType must match the real format.
3. Whitespace or newlines inside the base64. Base64 produced by some tools is wrapped at 64 or 76 columns; several SDKs reject the embedded \n.
4. Truncated or incomplete base64. The string was cut off (logging limits, copy/paste), so the bytes are incomplete and decode to a broken image.
5. Unsupported format. SVG, BMP, TIFF, and PDF are valid files but are not accepted as images by vision APIs — convert to PNG or JPEG first.

The validator above runs each of these checks locally and tells you which one is failing.

The data: prefix trap (per provider)

This is the mistake that trips up almost everyone. The three major providers disagree on whether you pass the whole data: URL or just the raw base64 payload:

If you paste a full data:image/png;base64,… string into Claude's source.data or Gemini's inline_data.data, the base64 decoder chokes on the data:image/png;base64, text and you get an invalid-image error. Conversely, if you send raw base64 with no prefix to OpenAI's image_url.url, it isn't a valid URL and the request fails.

MIME type must match the bytes

The declared type has to match what the bytes actually are. If you set Claude's media_type to image/png but hand it JPEG bytes, Claude rejects it — the header the decoder finds doesn't agree with what you promised. The safest approach is to sniff the real format from the leading bytes (the PNG, JPEG, GIF, and WebP magic numbers) rather than trusting a filename or a hardcoded string. The validator above sniffs the actual format and flags a mismatch against any declared prefix. For OpenAI, the MIME lives inside the data URL, so the same rule applies: data:image/png;base64, in front of JPEG bytes is wrong.

Whitespace, truncation, and unsupported formats

Three subtler failures survive a casual glance:

Whitespace / newlines. Base64 emitted by base64 (the CLI), MIME encoders, or PEM-style tools is line-wrapped. Strip every \r, \n, and space before sending — base64.replace(/\s/g, '') in JS, or base64 -w0 at the CLI.

Truncation. If the string was cut off — by a log truncation limit, a database column, or a bad copy/paste — the trailing bytes are missing and the image won't decode. A base64 payload whose length isn't a multiple of 4 (after removing padding) is a strong hint it was cut.

Unsupported format. All three providers accept PNG, JPEG, GIF, and WebP. SVG, BMP, TIFF, HEIC, and PDF are not accepted as images even though they decode to valid bytes — convert to PNG or JPEG first.

Is this private?

Yes. Every check runs fully in the browser with JavaScript — your Base64 is decoded and inspected locally, and nothing is uploaded to any server. You can confirm in DevTools → Network: pasting fires no request. That means you can safely paste image data from a production request without it leaving your machine.

Frequently asked questions

Why does GPT-4o say my image is invalid?

The most common cause is a malformed image_url.url. OpenAI expects a full data URL there: data:image/png;base64,iVBORw0…. If you send raw base64 with no data: prefix, a prefix whose MIME doesn't match the actual bytes, base64 containing newlines, or a string truncated at the end, GPT-4o returns an 'invalid image' or 400 error. Paste your string into the validator above to see which check fails.

Do I include the data: prefix?

It depends on the provider. OpenAI needs the full data URL (data:image/png;base64,…) in image_url.url. Claude and Gemini need raw base64 with no prefix — Claude in source.data with a separate media_type field, Gemini in inline_data.data with a separate mimeType field. See the per-provider table above; mixing these up is the single most common cause of invalid-image errors.

Why does Claude say it can't process my image?

Claude expects raw base64 in source.data with no data: prefix, plus a media_type (for example image/jpeg) that matches the actual bytes. If you leave the data: prefix in source.data, or set media_type to image/png when the bytes are really a JPEG, Claude rejects the image. It must also be PNG, JPEG, GIF, or WebP and under the per-image size ceiling.

My base64 looks fine but still fails — why?

Three hidden culprits: whitespace or newlines inside the base64 (strip all \r\n and spaces), truncation (the string was cut off, so the bytes are incomplete and decode to a broken image), or an unsupported format like SVG, BMP, or TIFF that decodes fine but isn't accepted by vision APIs. The validator above flags all three.

What image formats do vision APIs accept?

GPT-4o, Claude, and Gemini all accept PNG, JPEG, GIF, and WebP. Formats like SVG, BMP, TIFF, and PDF are not accepted as images even though they may be valid files — convert them to PNG or JPEG first. The declared MIME type (media_type / mimeType) must also match the actual bytes.