Image to Base64
The 33% you are paying
Base64 represents every three bytes as four printable characters, so the encoded form is always about a third larger than the file. That is not a flaw — it is the cost of writing binary data inside text — but it is the number that decides whether embedding is worth it.
What you buy with those bytes is one fewer HTTP request. For a 1 KB icon that is a clear win: the request would have cost more in latency than the extra 300 bytes cost in transfer. For a 200 KB photograph it is a clear loss.
The rough thresholds
- Under 2 KB — embed it. Icons, spacers, tiny patterns.
- 2 to 10 KB — judgement. Worth it if the image is on every page and rarely changes.
- Over 10 KB — usually keep it as a file.
- Photographs — keep them as files, always.
What embedding costs you
Caching. A real image file is downloaded once and reused across every page of your site. An embedded one travels again with every copy of the HTML or CSS that carries it, so a logo embedded in a page template is re-sent on every single page view.
Render blocking. A stylesheet must be fully downloaded and parsed before the page can paint. Putting 100 KB of base64 inside it delays everything, not just the image.
SVG is a special case
SVG is text, so it does not need base64 at all. A URL-encoded data URI keeps it readable and comes out smaller than the base64 version. Both are produced above when you load an SVG, so you can pick the shorter one.
Share this tool with friends
Free to use, no sign-up, works on any phone.
Frequently Asked Questions
Because base64 writes three bytes as four characters, which is a fixed 33% increase, plus a little padding. That is the trade: you save an HTTP request and pay for it in bytes. The exact increase for your file is shown above the output.
For small things — icons, a logo, a spacer, a background pattern under about 5 KB. Below that size the round trip to fetch the file costs more than the extra bytes. Above roughly 10 KB it is usually a loss, and for photographs it is almost always wrong.
Caching, mainly. A separate image file is cached once and reused on every page; an embedded one is re-downloaded with every copy of the HTML or CSS that contains it. It also makes your stylesheet enormous and harder to read, and blocks rendering until the whole file has parsed.
Yes, and for SVG there is often a better option — a URL-encoded SVG data URI is smaller than base64 because SVG is text. Both are produced here so you can compare them.
No. It is read and encoded by your browser. Nothing is sent anywhere, which matters when the image is a private screenshot or a client asset.
Inconsistently. Gmail strips data URIs in images, and several other clients do too. For email, host the image and link to it.