Image to Base64
Turn an image into a Base64 data URI, or encode and decode Base64 text — and turn Base64 back into a file
✓ Free Forever · ✓ No Signup · ✓ No Upload · ✓ Works Offline
🔒 Your data never leaves your device. All processing happens locally in your browser using FileReader API. No upload, no server, no tracking.
Features
- Data URI Output — Get a complete data:image/... URI string ready to paste directly into HTML, CSS, or JavaScript.
- One-Click Copy — Copy as raw data URI, as an <img> tag, or as a CSS background-image property.
- Size Comparison — See the original file size vs. the Base64 string length (Base64 is ~33% larger).
- Text and decoding too — Encode any text as UTF-8 Base64 (standard or URL-safe), decode Base64 back to text, or turn a Base64 string into a file you can preview and download.
How It Works
- Upload your image — Drop any image to convert it to Base64.
- Choose copy format — Copy as Data URI, <img> tag, or CSS background-image.
- Paste into your code — The Base64 string embeds the image directly in your code — no separate file needed.
Use Cases
- Embed small images directly in HTML to reduce HTTP requests
- Self-contained HTML files (reports, offline pages) that carry their images inside — note Gmail and Outlook block data-URI images in email
- CSS background images embedded in stylesheets
- Bundle icons in JavaScript code for single-file distribution
Frequently Asked Questions
When should I use Base64?
For small images (under 10KB) — icons, logos, tiny UI elements. Embedding avoids extra HTTP requests. For larger images, it's better to serve them as separate files.
Why is the Base64 string larger than the file?
Base64 encoding increases size by ~33% because it converts binary data to ASCII text. This is a trade-off for the ability to embed the image directly in code.
Is the full image quality preserved?
Yes. Base64 is just a different encoding of the exact same bytes — no quality loss. One exception: an iPhone HEIC photo is converted to JPEG first, because browsers can’t display HEIC from a data URI; the page tells you when that happens.
Can it decode Base64 too?
Yes — switch to Text ⇄ Base64 and pick Decode. Paste Base64 or a whole data: URI; spaces, line breaks and URL-safe Base64 are read. If it decodes to text you get the text; if it’s a file (PNG, JPG, PDF, ZIP…) you get a preview where possible and a download. A wrong character is named with its position.
What is URL-safe Base64?
The same encoding with - and _ instead of + and /, and usually no = padding, so it can sit in a URL or a JWT without escaping. Tick URL-safe when encoding; decoding reads both kinds automatically.
Notes from Milo 🐨
My own Base64 guide told you to "paste your text and pick the direction" — and this page could only turn an image into a data URI. Fair complaint. There's now a Text ⇄ Base64 tab: encode any text as UTF-8 (emoji and 中文 included, standard or URL-safe), or paste Base64 or a whole data: URI to decode it. If it turns out to be a file — a PNG, a PDF, a ZIP — you get a preview where possible and a download. A typo is pointed at by position instead of a shrug. Two smaller honesty fixes: an iPhone HEIC photo is converted to JPEG first (browsers can't show HEIC from a data URI) and the page now says so, with the size of the file you actually picked; and I took back "inline images in HTML emails" — Gmail and Outlook block those.
I opened this on my phone and the whole page slid sideways — the copy buttons and the output were hanging off the right edge. That's fixed: on a small screen everything now stacks. While I was in there I added a "Copy Base64 only" button for when an API wants the bare string without the data: prefix, made each button tick on its own (copying the CSS used to light up a different button), and you can now paste a screenshot straight in with Ctrl+V. Drop something that isn't an image and it tells you so instead of quietly doing nothing.
From the blog
- 📖 How to Encode and Decode Base64 (and Turn an Image Into a Data URI) — Encode and decode Base64 text, and convert a small image into a data URI you can inline in CSS or HTML — all locally in your browser, nothing uploaded.
Related Tools
- 🔁 Convert Format — Convert between PNG, JPG, WebP — instantly in your browser
- 📦 Compress Image — Reduce file size without losing quality — all in your browser
- 🔗 URL Encoder / Decoder — Encode or decode URLs and query strings instantly
💬 Bug, idea, or just to say hi? Tell Milo 🐨 · [email protected]