Image to Base64
Drop an image and copy it as a data URL, ready to paste into an img src, a CSS background or a JSON field.
The answer appears here as you type.
What you get, and where it goes
Base64 writes the bytes of a file as plain letters and digits, so a picture can travel through something that only carries text. With the data URL option on — this page opens with it on — the type comes first, as in data:image/png;base64,iVBOR…, which a browser accepts anywhere it expects an address: an img src, a CSS background-image: url(…), a link.
The usual reasons: an icon embedded in an HTML email so it shows without loading remote images, a small logo in a single-file page or a README, a picture inside a JSON payload for an API that takes no uploads, a favicon written straight into the page head.
A third bigger, and when that matters
Base64 turns every three bytes into four characters, so the text is about 33% larger than the image — a 30 KB icon becomes a 40 KB string. Inline in a page it also cannot be cached on its own: the browser downloads it again with every copy of the page. That is fine for small icons and wrong for photos. Past a few kilobytes, a normal image file is faster.
If the image is heavy, shrink it first: the image compressor and the image resizer can cut it to a fraction before it becomes text.
SVG, and the other direction
An SVG is already text, so it can go into a data URL without Base64 at all, URL-encoded, and usually comes out smaller that way. Base64 still works and is the form most tools expect.
To get an image back from a Base64 string, switch the direction to decode on the Base64 encoder and decoder. The file is read in this tab; nothing is sent anywhere.