🖼️ Image to Base64
Convert any image to a Base64 data URI — and copy it as raw Base64, a CSS background, an HTML tag or Markdown. Instant, free & 100% private, right in your browser.
Turn any image into a Base64 string you can paste straight into HTML, CSS or JSON — no server, nothing uploaded.
Encode Images to Base64, Fast
Everything a developer needs to embed an image as text — in five formats, with the stats to back it up.
Instant Encoding
Drop an image and get its Base64 data URI immediately — no waiting, no upload.
5 Output Formats
Data URI, raw Base64, CSS background, HTML <img> or Markdown — pick and copy.
Size & Overhead Stats
See original vs Base64 size, the ~33% overhead, dimensions and character count.
Decoded Preview
A live preview decoded from the Base64 confirms the output is correct.
All Formats
PNG, JPG, GIF, WebP and SVG, with the correct MIME type kept automatically.
100% Private
Encoding happens in your browser — your image is never uploaded or stored.
How to Convert an Image to Base64
Four steps — add, choose, copy, paste.
Add an image
Drag and drop or tap to choose a PNG, JPG, GIF, WebP or SVG.
Pick an output
Choose Data URI, raw Base64, CSS, HTML or Markdown.
Copy or download
Copy the string to your clipboard or save it as a .txt file.
Paste & use
Drop it straight into your HTML, CSS, JSON or email template.
Frequently Asked Questions
Data URIs, raw vs data URI, the 33% overhead, formats, CSS/email use, privacy and size limits.
How do I convert an image to Base64?
Drop your image onto the box (or tap to choose one) and the Base64 string is generated instantly. Pick the output you want — Data URI, raw Base64, a CSS background rule, an HTML <img> tag, or Markdown — then copy it or download it as a .txt file. Everything happens in your browser; the image is never uploaded.
What is a Base64 data URI and when should I use it?
A data URI embeds the whole image inside text, like data:image/png;base64,iVBOR…, so it can live directly in your HTML or CSS instead of a separate file. It's handy for tiny icons, email templates, single-file pages, or avoiding an extra network request. For large images it's usually better to keep a normal image file.
What's the difference between the Data URI and Raw Base64 options?
Raw Base64 is just the encoded characters. The Data URI adds the data:<mime>;base64, prefix in front, which is what browsers need to actually display it. Use Data URI for HTML/CSS; use Raw Base64 when an API or config expects only the encoded payload.
Why is the Base64 string bigger than my image?
Base64 represents every 3 bytes of data using 4 text characters, so the encoded result is about 33% larger than the original file. That overhead is the price of turning binary data into safe, copy-pasteable text — the tool shows you the exact size difference.
Which image formats are supported?
PNG, JPG/JPEG, GIF, WebP and SVG all work, and the data URI keeps the correct MIME type automatically so it displays properly wherever you paste it.
Is my image uploaded to a server?
No. The encoding is done entirely in your browser with the FileReader API — your image never leaves your device, nothing is stored, and there's no sign-up. It works offline once the page has loaded.
Can I use Base64 images in CSS and email?
Yes — the CSS option gives you a ready background-image: url(...) rule, and data URIs are widely supported in HTML email too (though a few older clients strip them, so test important campaigns). For the web, very small images embedded as Base64 can load faster by skipping a request.
Is there a size limit?
There's no hard limit, but Base64 strings grow with the image, so very large files produce huge strings that bloat your HTML/CSS. For anything over about 1 MB the tool warns you and a linked image file is usually the better choice.