Image to Base64

What Base64 encoding is

Base64 represents binary data using 64 printable ASCII characters, so an image can travel through anything that only handles text — HTML, CSS, JSON, email bodies, configuration files.

A data URI wraps that in a scheme the browser understands: `data:image/png;base64,` followed by the encoded bytes. Used as an img src or a CSS background, it embeds the image directly in the document rather than pointing at a separate file.

The 33% cost

Base64 encodes three bytes into four characters, so the result is about 33% larger than the original, plus padding. That penalty is unavoidable and applies every time the containing document is served.

Which is the crux: an external image is cached separately and downloaded once, while an embedded one is re-sent with every copy of the page that contains it. Inlining a large image can make a page slower rather than faster, and inlining it into a document that changes often is worse still, because it defeats caching for both.

When it is the right call

It genuinely wins in a few situations:

• Very small images — icons, a 1×1 tracking pixel, a tiny placeholder — where one round trip costs more than 33% of a few hundred bytes.
• Single-file deliverables: an HTML email, a self-contained report, a page that must work with no external requests.
• Avoiding a flash of missing content for something critical above the fold.
• Embedding an image in JSON, YAML or a database field that only accepts text.
• Environments with a strict content policy that blocks external image hosts.

Where it goes wrong

The common mistake is inlining photographs. A 500 KB photo becomes about 665 KB of text sitting in your HTML, downloaded in full before the page can render and re-downloaded on every visit because it cannot be cached independently.

The rough threshold most people settle on is a few kilobytes: below that, inlining is usually a win; above it, an external file with proper caching almost always beats it. SVG is worth a special mention — it is already text, so it can be embedded directly with no Base64 step and no size penalty at all.