Convert Base64 to Image in JavaScript

Converting Base64 to image in JavaScript is a common task when working with API responses, embedded email assets, or configuration files. Base64 is encoding — not encryption — so any valid string can be decoded back to binary image data.

The simplest approach uses a data URI. For large images, prefer Blob + object URLs to avoid duplicating huge strings in memory.

Method 1: Display with a data URI

If you have a raw Base64 string, prefix it with the correct MIME type. If you already have a full data:image/... URI, use it directly.

const base64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';
const dataUri = `data:image/png;base64,${base64}`;

const img = document.createElement('img');
img.src = dataUri;
img.alt = 'Decoded image';
document.body.appendChild(img);

Method 2: Convert Base64 to Blob

For larger images, convert Base64 to a Blob using atob() and Uint8Array. This is more memory-efficient than keeping a giant data URI string.

function base64ToBlob(base64, mime = 'image/png') {
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  return new Blob([bytes], { type: mime });
}

const blob = base64ToBlob(base64String, 'image/png');
const objectUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = objectUrl;
img.onload = () => URL.revokeObjectURL(objectUrl);

Method 3: Download the decoded image

Trigger a file download by creating a temporary anchor element with a Blob URL.

function downloadBase64Image(base64, filename = 'image.png', mime = 'image/png') {
  const blob = base64ToBlob(base64, mime);
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

No-code alternative

For quick debugging without writing code, paste your string into our Base64 to Image converter. It decodes instantly in the browser, shows MIME type and dimensions, and lets you download or copy the output.