Image to Base64
Turn an image into a Base64 data URI you can embed directly in HTML or CSS.
How to use the Image to Base64
- Choose an image from your device.
- Copy the Base64 data URI, or the ready-made CSS snippet.
- Paste it into your HTML, CSS or JSON.
About the Image to Base64
This tool encodes an image as a Base64 data URI — a long text string beginning data:image/...;base64, that contains the whole file as text. Because it is just text, you can paste it straight into an <img src>, a CSS background-image, a stylesheet or a JSON payload, and the image loads with no separate file and no extra network request. The tool also builds the matching CSS background-image line for you so you can drop it in directly.
Encoding happens in your browser with the built-in FileReader, so the image is never uploaded. It shows the length of the resulting string, which matters because Base64 makes a file roughly a third larger than the original — great for small icons and logos, less so for big photos. As a rule of thumb, inlining is worth it for images under a few kilobytes.
To go the other way and turn a data URI back into a viewable, downloadable image, use Base64 to image. If the file is large, shrink it first with compress image or the image resizer so the encoded string stays manageable. For encoding ordinary text rather than images, see Base64 encode.
Frequently asked questions
What is a Base64 data URI used for?
It lets you embed an image directly inside HTML, CSS or JSON as text, so it loads without a separate file or network request. It is most useful for small icons, logos and email images.
Does Base64 make the image bigger?
Yes, a little. Base64 encoding increases the size by about a third, because it represents binary data using only text characters. That is why it suits small images best.
Is my image uploaded to encode it?
No. The encoding is done in your browser with the FileReader API. The file never leaves your device.
Can I use the result as a CSS background?
Yes. The tool builds the background-image line for you — just copy it into your stylesheet. You can also paste the raw data URI into an img tag.
Which formats can I encode?
Any image your browser can read, including PNG, JPEG, WebP, GIF and SVG. The data URI keeps the original format and, for PNG, its transparency.