Image to Base64 Encoding: When, Why, and How

Why Encode Images as Base64?

Base64 encodes binary data using only ASCII characters. This makes it safe to include binary content — like an image — inside text-based formats such as HTML, CSS, JSON, or XML without corruption from encoding mismatches.

The most common reason to base64-encode an image is to create a data URI that can be embedded directly in code, eliminating an extra HTTP request for small assets.

Data URIs: The Syntax

A data URI follows this format:

data:[mediatype][;base64],<data>

# Example for a PNG image
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

You can use this anywhere a URL is accepted — img src, CSS background-image, or even a link href for downloading.

Common Use Cases

Inline Images in HTML

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

Useful for small icons, favicons, or single-page apps where you want zero extra network requests on first paint.

CSS Background Images

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...");
}

SVGs encode especially well because their text content compresses tightly. For SVGs, URL-encoding the raw SVG string is often better than base64 — smaller output and still valid.

JSON API Payloads

{
  "filename": "avatar.png",
  "content_type": "image/png",
  "data": "iVBORw0KGgoAAAANSUhEUgAA..."
}

REST APIs that accept file uploads via JSON (rather than multipart/form-data) require the file content to be base64-encoded. This is common in webhook payloads, configuration APIs, and email services.

Email Attachments (MIME)

SMTP uses MIME multipart encoding, which base64-encodes all binary attachments. Email clients decode this automatically, but when building email sending code you work with base64 directly.

Converting Base64 Back to an Image

Decoding is the reverse: take the base64 string, decode it to binary, and write the bytes as an image file. In the browser you can display it directly with a data URI, or convert to a Blob for download.

const base64 = "iVBORw0KGgoAAAANSUhEUgAA...";
const byteChars = atob(base64);
const byteNums = Array.from(byteChars).map(c => c.charCodeAt(0));
const blob = new Blob([new Uint8Array(byteNums)], { type: 'image/png' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'image.png';
a.click();

Size Overhead

Base64 encodes 3 bytes as 4 ASCII characters — a ~33% size increase. A 100 KB image becomes ~133 KB as a base64 string. This overhead is unavoidable and is why you should only base64-encode small images.

Additionally, base64 strings cannot be cached separately by the browser — the containing HTML/CSS page must be re-fetched to update the image. For frequently updated assets, a separate file URL is always better.

When NOT to Use Base64

• Large images: The 33% overhead and loss of separate caching make base64 a poor choice for anything over ~10 KB
• Images that change independently: Separate files get browser-cached individually; embedded base64 does not
• Server-side storage: Storing base64 in a database wastes 33% more space — store binary or a URL instead
• Performance-critical pages: Large base64 blobs block the HTML parser; lazy-loaded external images do not

MIME Types Reference

• PNG — image/png
• JPEG — image/jpeg
• GIF — image/gif
• WebP — image/webp
• SVG — image/svg+xml
• ICO — image/x-icon