How to Base64 Encode and Decode Images Online

Base64-encoding images lets you embed them directly into CSS, HTML, or JSON without a separate file request. This is useful for small icons, loading placeholders, and email templates where external images might be blocked.

Why Base64-encode an image?

• Inline images in CSS — embed icons directly without HTTP requests
• Email HTML — many email clients block external images; Base64 inline images always display
• Single-file HTML — completely self-contained pages with no external dependencies
• JSON APIs — send image data in a JSON payload without multipart forms
• Data URIs — use images in src attributes without hosting them

Base64 image data URI format

A Base64 image data URI follows this format:

data:[mimeType];base64,[base64EncodedData]

// Examples:
data:image/png;base64,iVBORw0KGgo...
data:image/jpeg;base64,/9j/4AAQSkZJRg...
data:image/svg+xml;base64,PHN2ZyB4bWxu...
data:image/gif;base64,R0lGODlhAQAB...

Encode an image in JavaScript (browser)

// Method 1: File input
document.querySelector('#file-input').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    const base64 = event.target.result;
    // base64 is already the full data URI:
    // "data:image/png;base64,iVBORw0..."
    document.querySelector('#preview').src = base64;
    console.log(base64);
  };

  reader.readAsDataURL(file);
});

// Method 2: From a URL (fetch + convert)
async function urlToBase64(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

const base64 = await urlToBase64('https://example.com/icon.png');

Encode an image in Python

import base64

# Encode image file to Base64
with open('image.png', 'rb') as f:
    image_data = f.read()

base64_string = base64.b64encode(image_data).decode('utf-8')
data_uri = f"data:image/png;base64,{base64_string}"
print(data_uri[:50])  # data:image/png;base64,iVBORw0KGgo...

# Decode Base64 back to image file
base64_data = "iVBORw0KGgo..."  # your base64 string
image_bytes = base64.b64decode(base64_data)

with open('decoded.png', 'wb') as f:
    f.write(image_bytes)

Use Base64 images in CSS

.icon-check {
  background-image: url('data:image/svg+xml;base64,PHN2Zy...');
  width: 16px;
  height: 16px;
  background-size: contain;
}

/* Or inline in HTML */

<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">

When NOT to use Base64 images

• Large images — Base64 increases file size by ~33%. For images over 5KB, serve them separately.
• Images that change often — Base64 images are baked into the HTML/CSS, so changing them requires a full deploy.
• Performance-critical pages — browsers can't cache Base64 images separately. External image URLs are cached independently.

The sweet spot is images under 2KB that are used on every page — small icons, spinners, favicons.