Image to Base64

Base64 turns binary data into text by mapping every three bytes onto four printable characters. That ratio is fixed, so an encoded image is always about thirty-three percent larger than the file you started with, before counting the data URI prefix. You're trading size for the ability to embed the image directly in a document.

The caching trade-off people miss

A linked image is a separate resource with its own cache entry, so a browser fetches it once and reuses it across pages. An inlined image has no independent existence. It is part of whatever file contains it. That means it's re-downloaded every time that stylesheet or HTML document changes, and it cannot be cached separately or for a different duration. Inlining a logo into a stylesheet that changes weekly is usually a net loss, even though it removes a request.

The historical argument for inlining was that each request carried meaningful overhead. Connection reuse and multiplexing in modern HTTP have reduced that cost substantially. So bundling images into a document to save round trips is far less compelling than it was, and the size penalty remains unchanged.

Where it genuinely wins

Inlining still earns its place in a few situations. Very small assets such as icons and one-pixel patterns, where the encoding overhead is negligible in absolute terms. Documents that must be self-contained, including single-file HTML exports, HTML email, and offline reports where linked assets would break. Critical images needed for the first paint, where waiting for a second request would cause a visible flash. And anywhere a build process legitimately has no somewhere else to put the file.

Two practical constraints

A strict Content Security Policy may refuse data URIs, since permitting them widens what a page is allowed to load. If images silently fail to appear on a hardened site, the policy is worth checking before the encoding.

Large inlined images also hurt more than their size suggests, because they sit inside a render-blocking resource and cannot be lazy-loaded, deferred, or served responsively at different sizes. As a rough working rule, inlining below a few kilobytes is defensible and inlining a photograph almost never is.