How to Convert Images to Base64 for HTML, CSS & Email Embedding

Eliminate external image requests by embedding images directly in your code as Base64 data URIs.

What Are Base64 Data URIs?

A data URI lets you embed file content directly in HTML or CSS instead of referencing an external URL. For images, a Base64 data URI looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB
CAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=

The format is: data:[MIME type];base64,[encoded data]. The browser decodes the Base64 string and renders the image directly — no additional HTTP request needed.

Embedding Base64 Images in HTML

Use the data URI directly in an <img> tag's src attribute:

<img src="data:image/png;base64,iVBORw0KGgo..." 
     alt="Company logo"
     width="120" height="40" />

This works in all modern browsers. The image loads instantly with the HTML — no separate request, no broken image if the server is slow, no CORS issues.

Base64 Images in CSS

You can use data URIs in CSS anywhere you'd normally use url():

.icon-search {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxu...);
  background-size: contain;
  width: 24px;
  height: 24px;
}

.hero-section {
  background-image: url(data:image/webp;base64,UklGRjIA...);
  background-size: cover;
}

This is particularly useful for small icons and UI elements that you want bundled with your stylesheet. One CSS file, zero additional requests for small assets.

Base64 Images in HTML Emails

Email is where Base64 images truly shine. Email clients have notoriously inconsistent support for external images — many block them by default, showing a "click to load images" placeholder instead.

With Base64-embedded images, the image data travels with the email itself. Some approaches:

Inline Data URI (Limited Support)

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

This works in some email clients but not all. Gmail, notably, strips data URIs.

CID Embedding (Better Support)

The more reliable approach is MIME CID (Content-ID) embedding, where the image is attached to the email as a MIME part and referenced by CID. The image is still Base64-encoded in the email's raw MIME structure, but referenced differently:

<img src="cid:logo@company.com" />

Most email libraries handle this automatically. You provide the Base64-encoded image, and the library builds the MIME structure.

When to Use Base64 Images (and When Not To)

✅ Good Use Cases

• Small icons and logos under 5KB — the overhead is negligible and you save an HTTP request
• Critical above-the-fold images — they load with the HTML, no render-blocking request
• Single-file HTML documents — reports, invoices, or documentation that need to be self-contained
• Email templates — inline images that display without "load images" prompts
• SVG icons in CSS — tiny SVGs encode efficiently and eliminate icon font or sprite dependencies

❌ Bad Use Cases

• Large images (over 10KB) — the 33% size overhead becomes significant, and you lose browser caching
• Frequently reused images — a regular URL lets the browser cache the image; Base64 forces re-download with every page load
• Responsive images — you can't use srcset effectively with data URIs
• SEO-important images — search engines can't index Base64 images separately

Step-by-Step: Convert an Image to Base64

Method 1: Online Tool (Fastest)

1. Open our Base64 encoder
2. Drag and drop your image file onto the tool
3. Copy the generated Base64 string
4. Prefix with the appropriate data URI: data:image/png;base64,

Method 2: Command Line

# macOS
base64 -i image.png | tr -d '\n'

# Linux
base64 -w 0 image.png

# Output the full data URI
echo "data:image/png;base64,$(base64 -w 0 image.png)"

Method 3: JavaScript

// Browser — FileReader API
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // data:image/png;base64,...
reader.readAsDataURL(file);

// Node.js
const fs = require('fs');
const b64 = fs.readFileSync('image.png').toString('base64');
const uri = `data:image/png;base64,${b64}`;

Method 4: Python

import base64
with open('image.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('utf-8')
data_uri = f'data:image/png;base64,{encoded}'

MIME Types for Common Image Formats

• PNG: data:image/png;base64,
• JPEG: data:image/jpeg;base64,
• GIF: data:image/gif;base64,
• WebP: data:image/webp;base64,
• SVG: data:image/svg+xml;base64,
• ICO: data:image/x-icon;base64,

Performance Considerations

Base64 images skip HTTP requests but increase document size. Here's the tradeoff:

• HTTP/1.1: Fewer requests is a bigger win — Base64 small assets aggressively
• HTTP/2+: Multiplexing reduces the request overhead, so the calculus shifts — external files with caching often win
• First paint: Critical small images (logos, above-fold icons) benefit from Base64 regardless of protocol

The sweet spot: Base64-encode images under 5KB, serve anything larger as an external file with proper cache headers.