Image to Base64 Converter
Convert images to Base64-encoded data URLs for embedding in HTML, CSS, JSON, and emails.
Back to all tools on ToolForge
Preview
Base64 Result
About Image to Base64 Converter
The Image to Base64 Converter lets you upload an image and convert it into a Base64 data URL for embedding directly in HTML, CSS, JSON, emails, and other text-based formats.
It is useful for embedding small icons and logos to reduce HTTP requests, creating self-contained HTML files, adding images to email templates, and generating data URLs for API testing and documentation.
Base64 Encoding Explained
Base64 converts binary data to ASCII text: Binary: [byte1][byte2][byte3] (24 bits) Base64: [char1][char2][char3][char4] (4 characters) Each Base64 character represents 6 bits: 2^6 = 64 possible characters (A-Z, a-z, 0-9, +, /) Padding: If input length isn't divisible by 3, add = padding characters to make output length divisible by 4. Example: "Man" → "TWFu" M (77) = 01001101 a (97) = 01100001 n (110)= 01101110 Grouped as 6-bit: 010011 010110 000101 101110 Decimal: 19, 22, 5, 46 Base64: T, W, F, u Size increase: ~33% (3 bytes → 4 characters)
Data URL Format
Data URL Structure: data:[<mediatype>][;base64],<data> Examples by format: PNG: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA... JPEG: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAA... GIF: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP... SVG: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0... WebP: data:image/webp;base64,UklGRiQAAABXRUJQVlA4... The mediatype tells browsers how to interpret the data. The ;base64 flag indicates Base64 encoding.
Using Base64 Images
HTML <img> tag:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">
CSS background:
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgo...");
width: 24px;
height: 24px;
}
Inline SVG (no Base64 needed):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>
JSON embedding:
{
"icon": "data:image/png;base64,iVBORw0KGgo...",
"label": "Home"
}
Email HTML:
<img src="data:image/png;base64,..." alt="Banner" />
Image Format Comparison
| Format | Best For | Transparency | Animation |
|---|---|---|---|
PNG | Icons, logos, screenshots | Yes (alpha) | No |
JPEG | Photographs | No | No |
GIF | Simple animations | Yes (1-bit) | Yes |
WebP | Modern web (better compression) | Yes | Yes |
SVG | Icons, logos, illustrations | Yes | Yes (CSS/SMIL) |
BMP | Uncompressed bitmaps | No | No |
ICO | Favicons | Yes | No |
When to Use Base64 Images
| Use Case | Recommendation | Reason |
|---|---|---|
| Small icons (< 10KB) | ✓ Recommended | Reduces HTTP requests |
| Inline email images | ✓ Recommended | Avoids external hosting |
| CSS sprites alternative | ✓ Good choice | Simplifies implementation |
| Large photos (> 100KB) | ✗ Avoid | Too much overhead, use <img> |
| Repeated across pages | ✗ Avoid | Can't cache separately |
| Content images | ✗ Avoid | Better as external files |
Browser Support
Data URLs are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Maximum data URL length varies by browser (typically 2-64 MB). For very large images, consider using Blob URLs or external files.
Frequently Asked Questions
- What is Base64 encoding?
- Base64 is a binary-to-text encoding scheme that represents binary data as ASCII strings using 64 characters (A-Z, a-z, 0-9, +, /). Every 3 bytes of binary data become 4 Base64 characters. Used for embedding images in HTML/CSS, email attachments, and data URLs. Format: data:image/png;base64,iVBORw0KGgo...
- What is a data URL?
- A data URL embeds data directly in web pages using the format: data:[
][;base64],. For images: data:image/png;base64, followed by Base64-encoded image data. Eliminates HTTP requests but increases file size by ~33%. - When should I use Base64 images?
- Use Base64 for: small icons/logos (reduce HTTP requests), inline images in emails (avoid external hosting), embedding in JSON/CSS, single-file documents. Avoid for: large images (increases size), images used across pages (can't cache separately), animated GIFs (very large).
- What is the size increase from Base64?
- Base64 encoding increases data size by approximately 33%. A 100KB image becomes ~133KB as Base64. This overhead is often acceptable for small images where eliminating HTTP requests improves performance. For large images, use regular img tags with external files.
- What image formats are supported?
- All common formats: PNG (lossless, transparency), JPEG/JPG (photos, lossy), GIF (animations, limited colors), WebP (modern, better compression), SVG (vectors, XML-based), BMP (uncompressed), ICO (favicons). Browser support varies for WebP and SVG.
- How do I embed Base64 images in HTML?
- Use the data URL as the src attribute: img src="data:image/png;base64,iVBORw0KGgo..." alt="Description". For CSS backgrounds: background-image: url(data:image/png;base64,...). Ensure the full data URL including the prefix is used.