Image to Base64

Embedding an image as text

Converting an image to Base64 produces a data URI you can paste directly into HTML, CSS, or JavaScript, so the image travels inside the code with no separate file. The string starts with a MIME type and the Base64 marker, like data:image/png;base64,, followed by the encoded bytes. The browser decodes it and renders the image inline.

The size tradeoff

Base64 encoding enlarges the data by about a third, since every three bytes become four characters. Inlining removes one network request, which helps for tiny assets like a 1px gradient or a small icon, but it hurts for anything large because the browser cannot cache the image separately and the host document grows. The same encoding math applies to any file; see the general Base64 encoder.

Example

/* a small inline icon in CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...");
}

<!-- or straight in HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="badge" />

The ellipsis stands in for the full encoded body, which for a real icon runs hundreds of characters even when the source file is small.

Pitfalls

Large inlined images bloat your CSS or HTML and block caching, so keep data URIs under a few kilobytes as a rule of thumb. The declared MIME type must match the real format or some browsers refuse to render it. For vector art, a URL-encoded SVG is almost always smaller than a Base64 PNG of the same icon.

FAQ

Does Base64 compress the image? No, the opposite. Resize and compress first with the image resizer, then encode the smaller file.

Can I use it for favicons or emails? Favicons yes, in some setups. Email clients are inconsistent about inline data URIs, so test before relying on it.

Is the image hidden or encrypted? No. Base64 is just an encoding; anyone can decode it back to the original image.