Convert Images to Base64 Data URIs
Sometimes you need an image embedded directly in your code — no external file, no server request. Base64 data URIs let you do that by encoding the image as a text string you can paste straight into HTML, CSS, or JSON.
Try Image to Base64 Converter free →
The problem
Referencing an image with a URL means an extra HTTP request. That's fine for most websites, but it breaks down in specific situations. Email templates can't reliably load external images — most clients block them by default. Single-file HTML reports need everything self-contained. CSS background images in inline styles need a data URI. And some APIs expect image data as a Base64 string in a JSON payload.
The trade-off is size: Base64 encoding increases the data by about 33%. A 30KB PNG becomes roughly 40KB of text. For small images — icons, logos, tiny UI elements — that's a fair deal. For large photos, it's not.
How it works
- Drop or select an image. PNG, JPG, GIF, WebP, SVG — any browser-supported format works.
- Get the Base64 output instantly. The tool generates a complete data URI with the correct MIME type prefix (
data:image/png;base64,...). - See the size comparison. Original file size vs. Base64 string size, so you can decide whether inlining makes sense.
- Copy to clipboard. One click to grab the full data URI, ready to paste into your code.
Your data never leaves your browser. The image is read using the FileReader API and encoded locally.
When to use this tool
- Embedding logos or icons in HTML email templates
- Building single-file HTML documents or reports
- Setting CSS background images as inline data URIs
- Sending image data through JSON APIs that don't accept file uploads
- Embedding small images in Markdown or documentation that will be rendered offline
Avoid Base64 for images larger than a few KB. The 33% size overhead adds up, and you lose the benefit of browser caching. For anything over ~10KB, a regular image file served with proper caching headers is almost always better.
Why I built it
I build a lot of HTML email templates and single-file tools. Every time I needed to inline a small icon, I'd end up in the terminal piping files through base64 and manually wrapping the output in a data URI prefix. This tool does that in one step and shows me the size cost upfront so I can make a quick decision.
Built with vanilla HTML/JS. No frameworks, no backend, loads instantly.