How to use Image to Base64
- 1Drop in an image
- 2Choose how to wrap it: raw data URL, CSS, HTML or Markdown
- 3Note the size increase — Base64 adds about a third
- 4Copy the string with the copy button
- 5Paste it wherever the image needs to be embedded
What Image to Base64 does
Base64 encodes binary data using only 64 printable characters, so a file can travel anywhere text can go — inside a stylesheet, an HTML attribute, a JSON payload, an email. The cost is size: three bytes become four characters, so an encoded image is about 33% larger than the file it came from.
That overhead is the whole basis of the decision. Embedding a small icon saves a network request and is usually a net win. Embedding a photograph makes your page a third larger, uncacheable separately from the document, and impossible for the browser to load in parallel — which is why the technique is right for icons and wrong for content images.
When to use it
- Small icons in CSS
- An embedded icon loads with the stylesheet rather than as a separate request. For something a few hundred bytes, the saved round trip outweighs the encoding overhead.
- Self-contained HTML
- An email template or a single-file report that has to work without any external assets — everything travels in one document.
- Images in a JSON payload
- APIs that carry an image alongside structured data need it as text, since JSON has no binary type.
- Documentation and Markdown
- An embedded image in a Markdown file survives being copied between systems, where a relative path to an image file would break.
Image to Base64 settings explained
- Raw data URL
- The bare string, beginning `data:image/png;base64,`. Use it when you are pasting into somewhere with its own syntax — a JSON field, a config file, a template.
- CSS background-image
- Wrapped as `background-image: url("…")`, ready to paste into a stylesheet rule. The most common use of the technique.
- HTML img tag
- A complete `<img>` element with the data URL as the source and the filename as alt text. Paste it directly into a page or an email template.
- Markdown
- Standard Markdown image syntax with the data URL inline, so the image travels with the document rather than depending on a file path.
- Size indicator
- Shows how much the encoding added — around 33%, since every three bytes become four characters. Worth checking before embedding anything substantial.
When to embed and when to link
| Image | Embed? | Reason |
|---|---|---|
| Icon under 2 KB | Yes | The saved request outweighs 33% overhead |
| Small logo, 5–10 KB | Probably | Depends how often the page is loaded |
| Photograph | No | Bloats the document and cannot be cached separately |
| Anything reused across pages | No | A linked file is cached once, not per page |
Limits and what to expect
- Base64 adds about 33% to the size — this is inherent to the encoding, not an implementation detail.
- Embedded images cannot be cached separately from the document containing them.
- The browser cannot start loading an embedded image in parallel, as it would a linked file.
- Very large strings make source files hard to read and slow to edit.
- Some email clients strip or refuse data URLs in `<img>` tags.
Troubleshooting
- The string is enormous
- The image is too big to embed sensibly. Compress and resize it first — an icon should be a few hundred bytes. If it is still large after that, it is a content image and belongs in a file, not in your source.
- The image does not display in an email
- Several email clients block or strip data URLs in image tags as a security measure. Email is one place where a hosted image file is genuinely more reliable, despite the extra request.
- My page got noticeably slower
- Embedded images make the document itself larger, and the document has to download completely before anything renders. A linked image loads in parallel and can be cached. Embed only small, page-specific assets.
- The string will not paste properly
- Some editors wrap long lines, which can break the string. Use the copy button rather than selecting by hand, and paste into a context that does not reformat what it receives.
Your files and your privacy
The image is read and encoded inside your browser tab, and the resulting string never leaves the page unless you paste it somewhere. Nothing is uploaded. Worth noting, since a Base64 string is the whole image in text form — pasting one into a hosted encoder would be handing over the file itself.
What to use next
FAQ
What is a Base64 image?
It is the image's binary data rewritten using only printable characters, prefixed with something like `data:image/png;base64,`. That lets a browser treat the string itself as an image source, so the picture can live inside a stylesheet, an HTML file or a JSON field rather than in a separate file.
Why is the Base64 string bigger than the image?
The encoding represents every three bytes as four characters, which is a fixed 33% increase. It is the price of turning binary data into text that can travel anywhere, and it cannot be avoided — only weighed against the saved network request.
When should I embed an image instead of linking it?
For small, page-specific assets — icons of a few hundred bytes — where saving a network round trip outweighs the 33% overhead. Not for photographs, and not for anything used across several pages, since a linked file is cached once while an embedded one is re-downloaded with every document.
Does it work in email?
Sometimes. Several email clients strip or block data URLs in image tags for security reasons. Email is one context where hosting the image as a file is more reliable, despite the extra request.
Can I convert a Base64 string back to an image?
Yes, that is what the Base64 to image tool does. The encoding is completely reversible — no data is lost in either direction.
Is my image uploaded?
No. The file is read and encoded in your browser, and the string stays in the page until you copy it.