This converts an image into a Base64 text string, a way of writing binary data as plain text so it can sit directly inside HTML, CSS, or JSON instead of being linked as a separate file. Good for small icons or quick prototypes where managing a separate image file isn't worth the trouble.
How to use it
- Choose the image you want to convert.
- Give it a moment to read and encode the file.
- The full Base64 string shows up in the output box, starting with data:image.
- Copy it with the copy button.
- Paste it into an HTML src attribute, a CSS background image, or a JSON field.
When it helps
- Embedding a small logo directly in an HTML email so it always shows up, even if the image link would otherwise break.
- Including a small image inline in a CSS file so a mockup is self-contained in one file.
- Storing a small image inside a JSON config or API response.
- Skipping an extra HTTP request for a tiny icon on a page.
- Sharing an image and some code together in one snippet without hosting the image anywhere.
Good to know
- Base64 text runs about a third larger than the original file, so this is best for small images, not big photos.
- Inlining a lot of images this way can bloat your HTML or CSS file. Use it selectively.
- Keep the original image file too. A Base64 string is much harder to edit visually than an actual image.
- Check the character count of the result before embedding it somewhere with a strict size limit, since Base64 text is often longer than people expect even for a modest image.
- If you're building a quick prototype and don't want to set up image hosting yet, this is a reasonable shortcut, just remember to swap in a real hosted image before anything goes to production.
Questions
What does the data:image prefix actually mean?
It tells the browser what kind of file follows and how it's encoded, so the browser knows to decode the Base64 text as, say, a PNG or a JPEG and display it.
Is Base64 encoding secure?
No. It's just a different way of writing the same data, not encryption. Anyone can decode it back, so it doesn't add any privacy on its own.
Why is the text so much longer than the original file?
Base64 needs roughly 4 characters for every 3 bytes of the original data, which explains most of the size increase.
Can I use the string directly as an img tag's src?
Yes, the full data URL, prefix included, can be pasted directly into an HTML img src attribute and it renders like a normal image.
Why choose this over just linking to the file?
Inlining skips a separate request and keeps the image bundled with the surrounding code, which suits small icons but isn't a substitute for hosting larger photos externally.
Does the encoded string change if I convert the same image twice?
No, encoding the same file always produces the same Base64 string, since it's a direct, deterministic representation of the file's bytes.