What Image to Base64 does
This tool reads an image file and produces its Base64 encoding — a text representation of the binary data — along with a ready-to-paste data URL, an HTML <img> tag and a CSS background-image rule. Embedding an image as text lets you include it directly inside an HTML page, a stylesheet, a JSON payload or an email without a separate file. The encoding is done in your browser with the FileReader API; the image is not uploaded.
What a data URL looks like
A data URL bundles the MIME type, the encoding and the data into one string:
| Part | Example | Meaning |
|---|---|---|
| Scheme | data: | Inline data rather than a network address |
| MIME type | image/png | What the bytes are |
| Encoding flag | ;base64 | The payload is Base64 text |
| Payload | iVBORw0KGgoAAAANSUhEUg… | The file's bytes, encoded |
Put together: data:image/png;base64,iVBORw0KGgo…. Browsers accept it anywhere a URL is expected — src, href, CSS url() — and decode it on the spot.
When embedding is a good idea
- Tiny icons and logos under about 2 KB, where a separate HTTP request costs more than the bytes.
- Single-file deliverables — an HTML report, an email template or a standalone widget that must work with no external assets.
- Critical above-the-fold images in a page's first render, avoiding a round trip.
- APIs and JSON that need to carry a small image (an avatar, a QR code) inside a text payload.
- Environments that block external URLs, such as some email clients and sandboxed previews.
When it is a bad idea
Base64 makes data about 33% larger (every 3 bytes become 4 characters), and embedded images cannot be cached separately from the page, so they are re-downloaded every time the page is. A 200 KB photo becomes 270 KB of text that bloats the HTML, delays parsing, and cannot be lazy-loaded. Rules of thumb:
- Under 2 KB: embedding is usually a win.
- 2–10 KB: judgement call; fine for a one-off, poor for a repeated asset.
- Over 10 KB: serve as a file. Use a CDN, HTTP/2 and caching instead.
Modern HTTP/2 and HTTP/3 make many small requests cheap, which has narrowed the case for inlining; in 2026 it is mostly a tool for self-contained documents rather than a performance technique.
Using the output
| Context | Snippet |
|---|---|
| HTML | <img src="data:image/png;base64,…" alt="…"> |
| CSS | background-image: url("data:image/svg+xml;base64,…"); |
| Markdown |  |
| JSON | { "avatar": "data:image/jpeg;base64,…" } |
| Email HTML | Same as HTML; supported by most clients except some Outlook versions |
For SVG, plain URL-encoding (data:image/svg+xml,%3Csvg…) is often smaller than Base64 because SVG is already text; Base64 is still the safe choice when the SVG contains characters that break attribute quoting.
Security note
Base64 is encoding, not encryption — anyone can decode it instantly. Do not use it to hide an image, and be aware that data URLs can carry any file type: treat a data URL from an untrusted source with the same caution as a file download. Browsers block navigation to top-level data: URLs for this reason, though they still work in <img> and CSS.