Skip to main content
The Base64 Image Encode/Decode tool converts images to and from Base64-encoded data URLs. It provides instant visual preview of decoded images and handles various image formats including PNG, JPEG, GIF, SVG, and WebP.

​
Features

  • Bidirectional Base64 image conversion
  • Data URL parsing and generation
  • Live image preview
  • MIME type detection and display
  • Support for all common image formats
  • Handles both raw Base64 and data URLs

​
Use Cases

Email Embedding

Embed images directly in HTML emails without external hosting

CSS Sprites

Inline small icons in CSS for reduced HTTP requests

Single-File HTML

Create self-contained HTML documents with embedded images

API Payloads

Include image data in JSON API requests/responses

​
Supported Formats

The tool works with all browser-supported image formats:
  • PNG - Lossless compression, transparency support
  • JPEG/JPG - Lossy compression, photos
  • GIF - Animation support, limited colors
  • SVG - Vector graphics
  • WebP - Modern format with superior compression
  • BMP - Uncompressed bitmap
  • ICO - Icons and favicons

​
Input Formats

​
Data URL (for decoding)

Complete data URL with MIME type: 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

​
Raw Base64 (for encoding)

Base64 string without data URL prefix: 
iVBORw0KGgoAAAANSUhEUgAAAAUA...
When converting raw Base64 to a data URL, the tool defaults to image/png MIME type.

​
Output Format

​
From Data URL

Extracts the Base64 portion and displays metadata: 
Output: iVBORw0KGgoAAAANSUhEUgAAAAUA...
Meta: data:image/png;base64
Preview: [Image displayed]

​
To Data URL

Generates complete data URL: 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

​
Examples

Extract Base64 from a data URL.Input:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0icmVkIi8+PC9zdmc+
Output (Base64):
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0icmVkIi8+PC9zdmc+
Meta:
data:image/svg+xml;base64
Preview: Red circle SVG displayed

​
Implementation Details

From lib/tools/engine.ts:406-422: 
case 'base64-image': {
  const raw = input.trim();
  if (!raw) return { output: '' };
  
  // Decode data URL
  if (raw.startsWith('data:image/')) {
    const [head, body] = raw.split(',', 2);
    return {
      output: body || '',
      meta: head,
      previewDataUrl: raw,
    };
  }
  
  // Encode to data URL
  const dataUrl = `data:image/png;base64,${raw}`;
  return {
    output: dataUrl,
    previewDataUrl: dataUrl,
  };
}

​
Common Patterns

​
Inline CSS Background

Embed small icons in CSS: 
.icon {
  background-image: url('data:image/png;base64,iVBORw0KGg...');
  width: 16px;
  height: 16px;
}

​
HTML Image Tag

Embed images directly in HTML: 
<img src="data:image/png;base64,iVBORw0KGg..." alt="Logo" />

​
JSON API Payload

Include image data in API responses: 
{
  "user": {
    "name": "Alice",
    "avatar": "data:image/jpeg;base64,/9j/4AAQ..."
  }
}

​
Canvas Export

Export canvas as Base64: 
const canvas = document.querySelector('canvas');
const dataUrl = canvas.toDataURL('image/png');
// Result: data:image/png;base64,iVBORw0KGg...

​
Size Considerations

Base64 encoding increases file size by approximately 33%. A 100KB image becomes ~133KB when Base64-encoded.

​
When to Use Base64 Images

Good for:
  • Small icons and sprites (< 10KB)
  • Single-file HTML documents
  • Email templates
  • Reducing HTTP requests for tiny assets
Avoid for:
  • Large photos or images (> 50KB)
  • Images that need caching
  • Responsive images with multiple sizes
  • Images used across many pages

​
MIME Type Reference

FormatMIME TypeUse Case
PNGimage/pngIcons, screenshots, transparency
JPEGimage/jpegPhotos, complex images
GIFimage/gifSimple animations
SVGimage/svg+xmlVector graphics, logos
WebPimage/webpModern format, best compression

​
Browser Compatibility

Data URLs are supported in all modern browsers. Maximum data URL size varies:
  • Chrome: ~512MB
  • Firefox: No hard limit
  • Safari: ~2GB
  • Edge: ~512MB
Practical limit: Keep under 1MB for best performance

Build docs developers (and LLMs) love

Get started for freeTalk to us