Image to Base64 Converter -- HTML, CSS & JSON

Upload Image

Format

—

Size

—

Dimensions

—

Base64 Length

—

Data URL Raw Base64 HTML <img> CSS Background

📋 Copy

⚠️ Large file detected. Base64 encoding increases file size by ~33%. Consider using external hosting for images over 10KB.

⬇ Download as .txt ✕ Clear

Quick Reference

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

background-image: url('data:image/png;base64,iVBORw0KGgo...');

var imageData = "data:image/png;base64,iVBORw0KGgo...";

<img src={`data:image/png;base64,${base64String}`} alt="Description" />

What is Base64 Image Encoding?

Base64 is a binary-to-text encoding scheme that converts image data into a string of ASCII characters. It uses 64 printable characters (A-Z, a-z, 0-9, +, /) to represent binary data, allowing images to be embedded directly in HTML, CSS, or JSON files.

When you convert an image to Base64, you get a Data URL (also called Data URI) that looks like:

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

The format is: data:[MIME type];base64,[encoded data]

When to Use Base64 Images

✅ Good Use Cases

• Small icons and logos — Images under 5-10KB where the 33% overhead is negligible
• Single-file HTML exports — Create portable documents with embedded assets
• Email templates — Some email clients block external images by default
• Critical above-the-fold images — Eliminate render-blocking HTTP requests
• CSS sprites and patterns — Small repeating backgrounds in stylesheets
• API responses — Return images in JSON without separate file hosting
• Offline applications — Bundle images directly in code for PWAs

❌ When to Avoid Base64

• Large images — Photos or graphics over 10-20KB
• Images used on multiple pages — Can't benefit from browser caching
• Performance-critical pages — Base64 increases HTML size and parse time
• Images that change frequently — Requires re-encoding on every update

Size Impact: Original vs Base64

Base64 encoding increases file size by approximately 33% because it uses 6 bits per character to represent 8 bits of data. Here's what that means in practice:

Rule of thumb: If an image is under 10KB and used only once, Base64 is often beneficial. Above 10KB, the size penalty usually outweighs the saved HTTP request.

Base64 vs Data URL: What's the Difference?

These terms are often used interchangeably, but they're slightly different:

• Base64 — The encoding method that converts binary to text (just the encoded characters)
• Data URL — The complete URI scheme including MIME type prefix: data:image/png;base64,...

Browsers need the full Data URL format to display inline images. Raw Base64 is useful when the MIME type is handled separately (e.g., in an API that specifies content type).

Common Mistakes to Avoid

• Forgetting the MIME type — Always include data:image/png;base64, prefix for browser display
• Using Base64 for large images — The 33% overhead adds up quickly
• Embedding the same image multiple times — Each instance duplicates the full string; use CSS classes instead
• Not optimizing before encoding — Compress images first with tools like TinyPNG
• Breaking strings across lines — Base64 strings must be continuous (no line breaks) in most contexts

Frequently Asked Questions

Related Tools

• Base64 Image Decoder — Convert Base64 strings back to images
• Base64 Encoder/Decoder — Encode and decode text to Base64
• Data Size Converter — Convert between bytes, KB, MB, GB
• Hash Generator — Generate MD5, SHA-1, SHA-256 hashes

Image to Base64 Converter FAQ