What is Base64 Image Encoding?

Base64 encoding converts binary image data into a text string that can be embedded directly in HTML, CSS, or JSON. This creates a "data URL" that browsers can render as an image without making a separate HTTP request for the file.

A Base64 data URL looks like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

When to Use Base64 Images

Size Overhead Warning

Usage in HTML

<!-- Direct in img tag -->
<img src="data:image/png;base64,iVBORw0KG..." alt="Icon">

<!-- In picture element for responsive -->
<picture>
    <source srcset="data:image/webp;base64,..." type="image/webp">
    <img src="data:image/png;base64,..." alt="Fallback">
</picture>

Usage in CSS

/* Background image */
.icon {
    background-image: url("data:image/svg+xml;base64,PHN2...");
    background-size: contain;
}

/* Cursor */
.custom-cursor {
    cursor: url("data:image/png;base64,..."), auto;
}

/* List marker */
ul.custom-bullets li::before {
    content: url("data:image/svg+xml;base64,...");
}

MIME Types for Images

Format	MIME Type	Best For
PNG	image/png	Icons, graphics with transparency
JPEG	image/jpeg	Photos (avoid for Base64)
GIF	image/gif	Simple animations, limited colors
WebP	image/webp	Modern format, good compression
SVG	image/svg+xml	Icons, logos, illustrations

Performance Considerations

• No caching: Base64 images in HTML aren't cached separately—if the HTML changes, the image is re-downloaded
• Parse time: Browser must decode Base64 before rendering
• Critical CSS: Inline in CSS only for above-the-fold content
• HTTP/2: With multiplexing, the HTTP request overhead is reduced, making Base64 less beneficial

Alternatives to Consider

• SVG inline: For vector graphics, inline SVG is often better than Base64
• CSS sprites: Combine multiple images into one file
• Icon fonts: Font Awesome, Material Icons for UI icons
• HTTP/2 push: Server push critical images
• WebP: Better compression than PNG/JPEG

Encoding Images Programmatically

# Python
import base64
with open("image.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode()
data_url = f"data:image/png;base64,{encoded}"

// JavaScript (browser)
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsDataURL(file);

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