Image to base64
Turn an image into a data URI you can paste into CSS, HTML or markdown. The bytes are encoded exactly as they’re.
Drop an image here or paste from the clipboard.
Your file is encoded on this device. Nothing is uploaded.
When embedding is worth it
The trade is one fewer network request against roughly a third more bytes, plus the loss of separate caching. That makes it clearly worthwhile for something small that every page needs and clearly not worthwhile for anything a visitor might only see once.
A rough line: under about 4KB, embedding usually wins. Over about 10KB it usually loses. In between it depends on how often the image appears and whether the pages carrying it are cached.
The caching problem people miss
A linked image is downloaded once and reused on every page that references it. An embedded one is part of each page's bytes, so ten pages carrying the same embedded logo download it ten times. If your CSS is cached separately, embedding into the CSS avoids that; embedding into HTML generally doesn’t.
SVG doesn’t need base64 at all
An SVG is already text, so it can go straight into a data URI URL-encoded rather than base64 encoded, which avoids the one-third overhead entirely and stays readable. For icons specifically, inlining the SVG markup directly into the page is better again: no encoding, no extra bytes and the icon can be styled with CSS.
Common questions
What is a data URI?
A way of writing a whole file inline as text, so a src or url() can contain the image itself rather than a link to it. It starts with the media type, says base64 and then carries the file encoded in 64 printable characters. Browsers decode it back to the original bytes.
Why is the base64 version larger than my file?
Base64 represents three bytes using four characters, so it adds about a third to the size, plus a little for the prefix. That overhead is the cost of embedding and it is why a data URI makes sense for a small icon and not for a photograph.
When should I embed an image instead of linking it?
When the image is small and always needed: a tiny icon, a bullet, a 1 pixel gradient. Embedding removes a network request, which on a high-latency connection is worth more than the extra bytes. Above a few kilobytes the arithmetic reverses, because a separate file can be cached on its own and an embedded one is re-downloaded with every copy of the page.
Does this re-encode my image?
No and that is deliberate. The bytes are read and encoded exactly as they’re, so decoding the data URI gives back your original file byte for byte. Tools that run the image through a canvas first quietly hand you a different file than the one you supplied.
Can I use a data URI in an email?
Not reliably. Gmail and several other clients block or strip them, which is why email templates still use hosted images with absolute URLs. The exception is a CSS background in a client that supports it and even that isn’t worth depending on.
Guides
The other tools
All of them work the same way: the file is read in your browser and never uploaded.