Image to Base64 Converter — Embed Images Directly in HTML and CSS

What is Base64 image encoding?

Base64 encoding converts binary image data into ASCII text. This allows images to be embedded directly in HTML, CSS, or JavaScript as a Data URI, without needing a separate image file or HTTP request.

When to use Base64 images

Use Base64 when:

• Embedding small icons or logos in CSS (avoids HTTP request)
• Inlining images in HTML email templates (some email clients block external images)
• Embedding images in single-file HTML documents
• Passing images through APIs that accept text/JSON

Avoid Base64 when:

• Large images (Base64 is ~33% larger than the original binary)
• Images used on multiple pages (no caching benefit)
• Images that need to be updated frequently

Data URI format

A Base64 Data URI looks like:

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

It consists of:

• data: — URI scheme
• image/png — MIME type
• ;base64, — encoding indicator
• iVBOR... — the actual Base64 encoded image data

Using in HTML

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

Using in CSS

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

File size impact

Base64 encoding increases the file size by approximately 33% compared to the original binary. A 100 KB PNG becomes roughly 133 KB as a Base64 string. For inline use in HTML or CSS, this is usually acceptable for small images. For large images, always use a standard <img src="..."> tag pointing to the actual file.

Email embedding — why it matters

Many email clients (Outlook, Apple Mail, Gmail on some settings) block externally hosted images by default. Embedding images as Base64 Data URIs bypasses this restriction — the image is part of the email body itself and displays without needing to load an external URL.

Security note

Base64 is encoding, not encryption. Anyone can decode a Base64 string back to the original image in seconds. Do not use Base64 to "hide" sensitive images.

How to convert image to Base64 free

1. Go to Image to Base64
2. Upload your image
3. Select output format (Data URI, HTML <img>, CSS background, etc.)
4. Copy the result
5. Paste directly into your code

When inlining helps and when it hurts

Base64 embedding trades an HTTP request for a larger, less cacheable payload. Whether that is a good trade depends almost entirely on size.

The break-even is roughly a few kilobytes. Above that, the costs compound: the image can no longer be cached separately from the file containing it, so changing one byte of a logo invalidates the entire stylesheet for every returning visitor.

HTTP/2 changed the calculation

Inlining was popularised when HTTP/1.1 allowed only about six concurrent connections per host, making each request genuinely expensive. HTTP/2 and HTTP/3 multiplex many requests over one connection, so the per-request cost is far lower.

The practical result is that inlining is worth much less than it used to be, and the 33% size penalty is unchanged. On a modern stack, serving a separate, cacheable image file is usually better for anything but the smallest icons.

Prefer SVG for icons

For icons and simple graphics, inline SVG beats base64 on every axis:

<!-- base64 PNG: ~2 KB encoded, fixed resolution -->
<img src="data:image/png;base64,iVBORw0KGgo...">

<!-- inline SVG: ~200 bytes, scales, styleable with CSS -->
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5z"/></svg>

The SVG is smaller, stays sharp at any resolution, can be recoloured with CSS fill, and is readable in source. Base64 is only necessary for raster images with no vector equivalent — photographs, screenshots, textures.

Email is the genuine use case

Base64 in email deserves its own note because the constraints are different from the web.

Many email clients block external images by default for privacy, since a remote image load reveals that a message was opened. Inlining means the image displays without the recipient clicking "load images".

The caveats: Gmail historically clips messages above roughly 102 KB, and Outlook's rendering of data URIs has been inconsistent. The more reliable approach for email is CID (Content-ID) attachments rather than data URIs — the image travels with the message but as a proper MIME part rather than inline text.

Frequently asked questions

Does base64 make images load faster?

Only by removing a request. The data is 33% larger, so on a slow connection an inlined image can be slower overall. For a large image it is reliably slower.

Can I base64 an SVG?

You can, but do not. Inline the SVG markup directly — it is smaller than the encoded form and remains styleable.

Why is my data URI not working in CSS?

Usually a missing MIME type or quoting problem. The format is url('data:image/png;base64,ABC...') — the MIME type must match the actual format, and +, /, = in the payload are fine inside quotes.

Does inlining hide the image from users?

No. It is trivially decodable and visible in the page source. Base64 is an encoding, not any form of protection.

Is my image uploaded to convert it?

No. Encoding happens in your browser via FileReader, so the image never leaves your device — which matters for screenshots that may contain account details or personal data.