Image to Base64 Converter

What a data URI does

Base64 encoding turns binary image data into printable ASCII, which lets an image be embedded directly in HTML, CSS, JSON or an email rather than fetched over a separate request. The trade is size: Base64 expands data by roughly 33 percent, since every three bytes become four characters.

When inlining is worth it

For a genuinely small asset, a few kilobytes at most, saving a network round trip can beat the size penalty. Typical cases are a tiny icon, an inline SVG, a tracking pixel, or an image embedded in an HTML email where external references are commonly blocked by the client.

When it is counterproductive

Past a few kilobytes, inlining usually costs more than it saves. The encoded data cannot be cached separately, so it is re-downloaded with every page load rather than once. It bloats the HTML or CSS carrying it, and CSS is render-blocking, so a large data URI in a stylesheet delays the entire page from painting. A 200 KB image inlined into CSS is a genuine performance bug.

The MIME type must be right

A data URI declares its own type, as in data:image/png;base64. Declaring the wrong type causes the image to fail silently in some browsers and render in others, which makes it a confusing bug to chase. Match the declared type to the actual file format.

Encoding is not protection

Base64 is reversible with no key. Anyone viewing the source can decode the image instantly. It provides no privacy or protection of any kind, only a different transport representation.

Encoded locally

The file is read and encoded in your browser and never transmitted, which matters when the image is a document scan, a signature or anything confidential.