What it is
The Image to Base64 Converter turns a picture into a long line of text that represents the very same bytes. That text can be pasted straight into HTML, CSS, JSON or a JavaScript file, and the browser will draw the image without ever making a separate request for it.
How to use it
- Add the image by dragging it in or picking it from your device.
- Copy the result in the form you need: the raw base64, a ready
data:URI, an<img>tag or a CSSbackground-imagerule. - Paste it into your code.
When embedding an image is a good idea
The reason to do this is to remove an HTTP request. A small icon that lives inside the CSS file loads with the CSS, so there is no second round trip to the server and no flash of a missing image.
That works well for small things: an icon, a logo in an email signature, a placeholder, a tiny texture. It stops working well as the file grows, because base64 makes the data about 33% bigger than the original binary, and because an embedded image cannot be cached separately: change one byte of the CSS and the browser downloads the picture again along with it.
A rough rule that holds up in practice: under a few kilobytes, embedding usually wins. Above that, a normal image file that the browser can cache almost always wins.
Where the file goes
Nowhere. The encoding happens inside your browser, so the image is never uploaded, never stored and never seen by anyone else. There is no limit and no account.
To go the other way and turn base64 back into a picture, use the base64 to image decoder.