Image to Base64 (Data URI) Converter
Convert an image to a Base64 data URI in your browser and copy ready-made HTML img, CSS background and Markdown snippets with size details.
Runs entirely in your browser. Your data is never uploaded.
What is Image to Base64?
This tool encodes an image file as Base64 so it can be embedded directly in HTML, CSS, JSON or Markdown. It outputs the full data URI (data:image/png;base64,…), the raw Base64 string, and copy-ready <img>, CSS background-image and Markdown snippets, plus the image size and the Base64 overhead.
How to use Image to Base64
- Drop, choose or paste an image (PNG, JPEG, GIF, WebP, SVG, ICO…).
- Read the detected format, dimensions, file size and data URI length.
- Click Copy next to the variant you need: data URI, raw Base64, HTML snippet, CSS background or Markdown.
Example
30×30 PNG filled with #3366CC (99 bytes)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC
When to use Image to Base64
Inline tiny images such as icons, small logos or placeholders to save an HTTP request, embed images in single-file HTML, emails or JSON APIs, or in CSS that must be self-contained. Avoid it for images over roughly 20 KB: they bloat your HTML/CSS and cannot be cached separately.
How Image to Base64 works
The file’s bytes are read with File.arrayBuffer(), the real format is detected from its magic bytes (for example 89 50 4E 47 for PNG) instead of trusting the file extension, and the bytes are Base64-encoded with btoa. The data URI is data:<mime>;base64,<base64>. Base64 represents every 3 bytes as 4 characters, so the text is about 33% larger than the file.
Common Use Cases
- Embedding a small icon directly in a CSS file.
- Putting a logo into an HTML email template or offline single-file page.
- Sending an image inside a JSON payload to an API.
- Writing a self-contained Markdown or Jupyter document.
Security Note
Images are decoded, processed and encoded locally in your browser with the Canvas API. Nothing is uploaded to a server.
FAQs
Why is the Base64 bigger than my file?
Base64 uses 4 text characters for every 3 bytes, so the encoded string is about 33% larger (plus a few bytes for padding and the data URI prefix).
Does the tool change or compress my image?
No. It encodes the exact bytes of your file. Use the Image Compressor first if you want a smaller result.
Can I convert the Base64 back to an image?
Yes, use the Base64 to Image tool, which accepts a data URI or raw Base64 and lets you download the file.