What Base64 actually does
An image file is binary data, and binary data cannot be placed directly inside a text document such as an HTML page or a JSON request. Base64 solves that by mapping the bytes onto a set of sixty four safe characters, producing a long string that any text based format can carry.
The result is prefixed with a media type, giving a data URL. A browser reading one recognises the prefix, decodes the text back into bytes, and displays the image exactly as if it had downloaded a file.
The trade off
Embedding an image removes a network request, which on a slow connection can be the slowest part of loading a small asset. That is the main reason to do it.
The costs are real, though. The encoded form is roughly a third larger than the file. It cannot be cached on its own, so it is re-downloaded every time the page containing it changes. And a very long string inside a stylesheet delays the parsing of everything after it.
The usual guidance is to embed only what is genuinely small, in the region of a few kilobytes, and to link everything else normally.
Common uses
- Small icons in CSS. A tiny arrow or tick avoids a request for a few bytes.
- Email templates. Some clients handle embedded images more predictably than linked ones.
- API payloads. Sending an image inside a JSON body requires a text encoding.
- Single file documents. An HTML page that carries its own images needs no accompanying folder.
Frequently asked questions
What is a data URL?
It is the whole image written out as text, prefixed with its media type. Because the data travels inside the markup, the browser needs no separate request to display it.
Why is the text larger than the file?
Base64 represents every three bytes using four text characters, so the encoded form is about a third larger than the original file. That overhead is the cost of storing binary data as text.
When should I use this?
For small assets such as icons, a one pixel spacer or a tiny placeholder, where saving a network request matters more than the extra bytes. Also for embedding an image in an email template or a JSON payload.
When should I avoid it?
For photographs and anything over a few kilobytes. A large data URL bloats your HTML or CSS, cannot be cached separately by the browser, and delays the page rendering while it is parsed.
Can I use this in CSS?
Yes. Paste the data URL inside a url() value, for example as a background image. The same string works in an img src attribute.
Is the encoding a form of compression?
No, the opposite. Base64 makes data larger. Compress the image first if size matters, then encode the compressed version.