Base64 to Image Converter

How to convert Base64 to an image

1. 1
   Paste the Base64

   Paste a raw Base64 string, a URL-safe string or a full data:image/...;base64, Data URI into the box. Line breaks, spaces, surrounding quotes and a CSS url() wrapper are all removed for you.

2. 2
   Let it detect the format

   The tool decodes the string and identifies the format from the file's signature bytes: PNG, JPG, GIF, WebP, SVG, ICO or BMP. It ignores whatever the prefix claims.

3. 3
   Check the preview and details

   The image appears with its format, pixel dimensions and decoded file size. A note lists anything that was fixed automatically, such as a missing prefix or padding.

4. 4
   Download the image

   Press Download to save the image with the extension that matches its real format, ready to open in any image viewer or editor.

5. 5
   Copy a clean version if you need one

   Use Copy Data URI for a complete, correctly prefixed value to put in HTML or CSS, or Copy raw Base64 for a standard, padded string an API will accept.

A worked example: 152 characters, one PNG

"Load example" pastes this string. It has no data: prefix, so nothing in it says it's an image:

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR42mNgoAVgajn+HxumSDNRhhDSjNcQYjVjNYRUzRiGjBpABQMojkaqJCSqJGWqZCZSAQAFfWZgM5ZAWQAAAABJRU5ErkJggg==

The decoder turns the 152 characters into 112 bytes. The first eight bytes are 89 50 4E 47 0D 0A 1A 0A, the fixed signature every PNG file opens with, and that's what the opening iVBORw0KGgo encodes. The tool reports a 16×16 PNG of 112 bytes, shows a blue dot, and builds this Data URI for you:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR42mNgoAVgajn+HxumSDNRhhDSjNcQYjVjNYRUzRiGjBpABQMojkaqJCSqJGWqZCZSAQAFfWZgM5ZAWQAAAABJRU5ErkJggg==

Where Base64 images come from

Most Base64 images reach you inside something else, and each source leaves its own marks on the string:

• API responses. Image-generation, screenshot, OCR and document APIs often return pictures as a Base64 field in JSON, sometimes with a separate mime_type field and no prefix. Copy just the value between the quotes.
• Email source. In a raw message (the "Show original" or "View source" option in most mail clients), inline images and attachments are MIME parts marked Content-Transfer-Encoding: base64, wrapped at 76 characters per line. Copy everything after the blank line under the part's headers, up to the next -- boundary line.
• JSON files and database fields. Avatars, signatures and thumbnails get stored in text columns or JSON documents. Exported JSON often escapes every slash as \/, and database GUIs may truncate long values when you copy a cell.
• CSS and HTML. Icons inlined in a stylesheet as url("data:image/..."), or an <img> whose src is a Data URI. Paste the whole url(...) value; the wrapper is stripped for you.
• Browser code. canvas.toDataURL() and FileReader.readAsDataURL() both produce Data URIs, which end up in logs, local storage and form submissions.

Going the other way, from a file to a string you can embed, is a separate job: convert an image to Base64 with a matching tool that also writes the CSS and HTML snippets.

Common problems and fixes

Missing data: prefix

Raw Base64 in an src attribute gets treated as a relative URL and fails to load. Add data:image/png;base64, (with the right format) in front. This tool detects the format and builds the full Data URI for you.

Line breaks and spaces

Email bodies and PEM-style output wrap Base64 every 64 or 76 characters, and copying from a terminal or PDF can add spaces. They aren't part of the data. Strip all whitespace before decoding; the tool does it automatically.

URL-safe characters

Strings taken from URLs, JWTs or some cloud storage APIs use - and _ instead of + and /, and often drop the padding. A strict decoder rejects them, so swap the two characters back first. If the string came out of a query parameter, also watch for %2B, %2F and %3D.

Truncated strings

If the length leaves one stray character in the final group, the string was cut off and can't be decoded. If it decodes but the image is cut off or won't render, the end of the file is missing. PNG, JPEG and GIF files close with a fixed end-of-file marker, and the tool warns when that marker isn't there. Either way, copy the value again from its source. Exporting the field to a file avoids most copy-length limits.

Wrong padding

The = signs only pad the last group to a multiple of four characters: a valid string has none, one or two, and only at the very end. Missing or extra padding is fixed here automatically. An = in the middle usually means two values were pasted together.

It isn't actually an image

Valid Base64 can hold anything. If the decoded bytes have no image signature, the tool says what they look like instead (a PDF, a ZIP-based Office file or plain text). For those, the Base64 encoder / decoder decodes any file type and offers it as a download.

Code examples

HTML

A Data URI works anywhere an image URL does. Keep width and height so the page doesn't shift when the image decodes.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR42mNgoAVgajn+HxumSDNRhhDSjNcQYjVjNYRUzRiGjBpABQMojkaqJCSqJGWqZCZSAQAFfWZgM5ZAWQAAAABJRU5ErkJggg==" width="16" height="16" alt="Blue status dot">

To see a snippet like this render before it goes into a template, paste it into the HTML viewer and live renderer.

JavaScript: decode and download as a Blob

function downloadBase64Image(base64, mime, filename) {
  const binary = atob(base64.replace(/\s+/g, ''));
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);

  const url = URL.createObjectURL(new Blob([bytes], { type: mime }));
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

downloadBase64Image(base64String, 'image/png', 'decoded.png');

PHP: decode, validate, save

Pass true as the second argument so invalid input returns false instead of silently skipping bad characters. If the string comes from a user, check the decoded bytes' real type before writing anything to disk: the data: prefix and the filename are both just claims. Allow only the formats you expect, generate the filename yourself, and leave SVG off the list unless you sanitize it, because SVG can carry scripts.

<?php
$base64 = preg_replace('/^data:[^,]*,/', '', $input);   // drop any data: prefix
$bytes = base64_decode($base64, true);
if ($bytes === false) {
    throw new InvalidArgumentException('Not valid Base64.');
}

$allowed = ['image/png' => 'png', 'image/jpeg' => 'jpg', 'image/gif' => 'gif', 'image/webp' => 'webp'];
$mime = (new finfo(FILEINFO_MIME_TYPE))->buffer($bytes);   // from the bytes, not the prefix
if (! isset($allowed[$mime])) {
    throw new InvalidArgumentException("Unsupported type: $mime");
}

file_put_contents(__DIR__ . '/uploads/' . bin2hex(random_bytes(8)) . '.' . $allowed[$mime], $bytes);

Supported formats and how to spot them

Every format starts with a fixed signature, so its Base64 always starts with the same characters. That gives you a quick way to identify a string at a glance:

For why every 3 bytes become exactly 4 characters, and why the decoded image is about a quarter smaller than the string, see Base64 encoding explained.

Frequently asked questions