Image to Base64

A data URI embeds the file in the document, which removes one network request. That used to be a meaningful optimisation and mostly is not any more: HTTP/2 and HTTP/3 multiplex requests over one connection, so the cost of a second file is far lower than it was under HTTP/1.1 where six connections was the limit.

Base64 costs about 33% in size — three bytes become four characters — and that is inherent to the encoding, not an implementation detail. It also costs you caching, which is the bigger problem. A separate image is cached once and reused across every page; an embedded one is re-downloaded with every page that contains it and re-parsed each time. For an icon used on one page that is fine. For a logo on every page it is strictly worse.

Where it genuinely wins: a small icon inside a CSS file, an image in an HTML email where external images are blocked by default, an SVG placeholder that must render before anything else loads, or a single self-contained file with no assets alongside it.

A rule of thumb from practice: under about 4 KB it is usually worth embedding, over about 10 KB it usually is not, and in between it depends on how often the page is loaded. And for SVG specifically, consider skipping Base64 entirely — a URL-encoded SVG in CSS is smaller than the Base64 of the same file, because SVG is text and mostly survives percent-encoding intact.