File to Base64

Turning a file into a data URI

Encoding a file to Base64 lets you embed it directly inside text: a data URI you can drop into CSS, an img src, or a JSON field. The browser reads the file locally and produces a string that carries both a MIME type and the file's bytes, so no separate hosting or upload is involved.

Anatomy of a data URI

A data URI has a fixed shape: data:[mediatype];base64,[data]. The media type (like image/png) tells the consumer how to interpret the bytes, and everything after the comma is the Base64 payload. Get the media type wrong and the browser may refuse to render it even though the bytes are correct.

Example

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

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

The same string works in a stylesheet as a background image, which is handy for tiny icons that would otherwise cost an extra request. For the reverse direction and more on the encoding itself, see the Base64 encoder.

When inlining is the wrong call

Base64 inflates size by about a third, and inlined assets cannot be cached separately from the document, so a large image embedded this way is re-downloaded with every page load. Data URIs make sense for small, rarely-changing assets. For anything substantial, a normal file reference wins on both bandwidth and caching.

FAQ

Does the file leave my machine? With a browser-based converter the bytes are read and encoded locally, so nothing is uploaded. That matters when the file is private.

Why is my data URI image not showing? Usually a wrong or missing media type, or whitespace and line breaks that crept into the Base64 string and need stripping.