Skip to main content
FileForge

Image to Base64 Converter

Encode an image as Base64 and copy it as a raw string, a data URI, an HTML <img> tag or a CSS background rule.

Runs in your browser — files never leave your device

Free · No sign-upOutputs Base64 text, Data URI
Loading tool…

How to use Image to Base64

  1. Add an image (any common format).

  2. Choose the output flavor: raw Base64, data URI, HTML tag or CSS rule.

  3. Click Copy to put the result on your clipboard.

  4. Paste it into your code.

About this tool

Base64 encoding turns binary image data into text, letting you embed small images directly in HTML, CSS or JSON without a separate file request. The encoded text is about 33% larger than the binary file, so this technique suits icons and small graphics rather than photographs. The tool outputs the raw Base64, the full data URI with the correct MIME type, and copy-ready HTML and CSS snippets.

This is a common step when building a single-file HTML prototype, embedding a small logo directly into an email template, or storing an image inline in a JSON configuration where a separate file reference isn't practical.

Common ways people use this

  • Embedding a small logo or icon directly into an HTML email so it doesn't rely on loading an external image
  • Inlining an image into a single-file HTML prototype or component for easy sharing
  • Storing a small graphic as a string inside a JSON config or database field

Tips for better results

  • Reserve this technique for small assets like icons and logos — encoding a large photo as Base64 bloats your HTML or CSS file unnecessarily.
  • Use the data URI flavor when you need the MIME type included, and the raw Base64 flavor when a system expects just the encoded string on its own.

Frequently asked questions

When should I embed images as Base64?
For small assets (icons, tiny logos) where saving an HTTP request matters, or where external files aren't possible — emails, single-file HTML documents, JSON payloads. Large photos should stay as normal files.
Why is the Base64 output larger than my image file?
Base64 represents every 3 bytes of binary data as 4 text characters, adding roughly 33% overhead. That is inherent to the encoding.
Is my image sent to a server to encode it?
No. The FileReader API in your browser produces the Base64 string locally.
What's the difference between the data URI and raw Base64 options?
The data URI includes a `data:image/png;base64,` prefix that tells a browser or app what to do with the string. Raw Base64 is just the encoded characters, for systems that add their own prefix or handle the MIME type separately.
Can I embed a very large photo this way?
Technically yes, but it's not recommended — the resulting text becomes very large, bloats whatever file it's embedded in, and loses the caching benefits of a normal image file.

Related tools

Other tools people commonly use alongside this one.

Base64 to Image

Paste Base64 image data — with or without the data URI prefix — to preview it and download it as a normal image file.

Image

Base64 Text

Convert text to Base64 and back. Unlike naive implementations, this handles UTF-8 correctly, so emoji and non-Latin text round-trip safely.

Developer

Image Compressor

Shrink image file sizes by re-encoding at a quality level you control. Works with JPG, PNG and WebP, entirely in your browser.

Image