Embedding images as Base64 data URIs is one of those techniques that sounds complex but has straightforward use cases. Here's when it's the right approach, how to do it, and when to use regular image files instead.
What is a Base64 image?
A Base64 image is a binary image file encoded as a printable ASCII string using the Base64 encoding scheme. When embedded in HTML or CSS, it eliminates the need for a separate file request.
Regular image:
`<code>html</p>
<img src="logo.png" alt="Logo">
<!-- Browser makes an HTTP request to fetch logo.png -->
</code>
Base64 image:
<code>html
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo">
<!-- Image data is embedded directly in the HTML — no HTTP request -->
</code>
For quick conversion, an Image to Base64 encoder lets you drag and drop any image and instantly get the data URI, HTML tag, or CSS background-image property.
The data URI format
<code>
<p>data:[mediatype][;base64],[data]</p>
</code>
Examples:
<code>
<p>data:image/png;base64,iVBORw0KGgo...</p>
<p>data:image/jpeg;base64,/9j/4AAQSkZJRg...</p>
<p>data:image/svg+xml;base64,PHN2ZyB4bWxu...</p>
<p>data:image/gif;base64,R0lGODlh...</p>
<p>data:image/webp;base64,UklGR...</p>
<p>data:image/svg+xml;charset=utf-8,<svg>...</svg> ← SVG can be URL-encoded instead</p>
</code>
When to use Base64 images
Good use cases:
- Small icons and logos (< 10 KB): Eliminating an HTTP request for a small icon is a net win. The Base64 overhead (~33% size increase) is offset by the saved round-trip time.
- Self-contained HTML documents: Single-file HTML email templates, offline documents, or exported reports that must work without external resources.
- Favicons embedded in HTML:
`
html
`
CSS sprites for small icons: `
css
.icon-check {
background-image: url('data:image/svg+xml;base64,...');
}
`
Placeholders while loading: Show a tiny Base64 blurred version while the full image loads (blur-up technique).
When NOT to use Base64:
Large images (> 5–10 KB): Size overhead outweighs the benefit.Images shared across multiple pages: External files get cached by the browser; Base64 images are re-transferred with each page.Performance-critical sites: Base64 data is inline in the HTML, blocking HTML parsing.
Converting images programmatically
JavaScript (browser):
`
javascript
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result); // Returns full data URI
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
// Usage with file input
inputElement.addEventListener('change', async (e) => {
const file = e.target.files[0];
const dataUri = await fileToBase64(file);
imageElement.src = dataUri;
});
`
JavaScript (Node.js):
`
javascript
const fs = require('fs');
function imageToBase64(filePath, mimeType = 'image/png') {
const data = fs.readFileSync(filePath);
return data:${mimeType};base64,${data.toString('base64')}
;
}
const dataUri = imageToBase64('logo.png');
const base64Only = fs.readFileSync('logo.png').toString('base64');
`
Python:
`
python
import base64
Read and encode
with open('logo.png', 'rb') as f:
base64_string = base64.b64encode(f.read()).decode('utf-8')
With data URI prefix
data_uri = f'data:image/png;base64,{base64_string}'
Decode back to file
with open('decoded.png', 'wb') as f:
f.write(base64.b64decode(base64_string))
`
Embedding in HTML
As an img src:
<code>html
<img
<p>src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."</p>
<p>alt="Company Logo"</p>
<p>width="120"</p>
<p>height="40"</p>
<p>></p>
</code>
In an email template (inline image):
<code>html
<!-- HTML emails can't use linked images reliably — use Base64 for small images -->
<img src="data:image/png;base64,iVBORw..." alt="Logo" style="width:120px">
</code>
Embedding in CSS
`
css
/ Icon as background image /
.icon-arrow {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;base64,PHN2Zyh4bWxu...');
background-size: contain;
background-repeat: no-repeat;
}
/ Favicon /
/ Can also be set via HTML tag /
`
SVG: the better format for Base64
SVG files compress extremely well and can be embedded without Base64 encoding by URL-encoding the SVG directly:
`
css
/ Base64 SVG /
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxu...');
/ URL-encoded SVG (more readable, slightly smaller) /
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");
`
For SVGs, URL encoding is slightly more efficient than Base64 (no 33% overhead) and results in smaller file sizes.
Decoding a Base64 image
To convert a Base64 string back to an image file:
Browser (download):
<code>javascript
<p>const link = document.createElement('a');</p>
<p>link.href = dataUri; // The data URI</p>
<p>link.download = 'image.png';</p>
<p>link.click();</p>
</code>
Python:
`
python
import base64
base64_string = "iVBORw0KGgo..."
with open('output.png', 'wb') as f:
f.write(base64.b64decode(base64_string))
`
Command line:
<code>bash
<p>echo 'iVBORw0KGgo...' | base64 -d > output.png</p>
</code>`
Base64 image embedding solves a specific set of problems: self-contained documents, eliminating requests for tiny assets, and HTML email images. For everything else, external image files with proper caching are the better choice.
Originally published at https://snappytools.app/image-to-base64/