How to convert an image to Base64
- Drop, browse or paste any image — it's read locally with the FileReader API.
- Pick the output shape: a bare data URI, a ready-to-paste CSS rule, an HTML image tag, or the raw Base64 characters.
- Click Copy output and paste it straight into your stylesheet, markup or payload.
Why embed images as Base64?
A data URI puts the image inside your code, so it loads with zero extra HTTP requests and survives anywhere external files can't follow: HTML emails where hosted images get blocked, single-file documents and demos, JSON API payloads, README badges, browser extensions and code sandboxes. The trade-off is size — Base64 text is about a third larger than the binary original and can't be cached as a separate asset — which is why the sweet spot is small images: icons, logos, placeholders and tiny textures. If the tool warns your output is large, run the image through the compressor first.
Frequently asked questions
What is a Base64 data URI?
A way to embed a file's contents directly in text, like data:image/png;base64,iVBORw0…. Browsers render it exactly like a normal image URL — no separate file needed.
When should I embed an image as Base64?
For small images — icons, logos, tiny backgrounds — and anywhere external files aren't possible: HTML emails, self-contained pages, JSON payloads, userscripts and sandboxes.
Does Base64 make images bigger?
Yes, by about 33%, and embedded images can't be cached separately. Best for images under ~50KB — compress first if yours is larger.
Is my image uploaded anywhere?
No. It's read and converted entirely on your device with the browser's FileReader API.