Free tools

Base64 encoder and decoder

Turn text into Base64 and back as you type, or drop in a picture to get a data URI you can paste into your code. It all runs in your browser, so nothing you paste is uploaded.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

Base64

Technical details

🔒 Nothing you paste or drop here leaves your browser.

More free tools

See all 89 tools

How it works

  1. For text, type or paste in the box. The Base64 appears next to it as you type. To go the other way, pick Decode and paste the Base64; if you paste Base64 while encoding, we offer to switch for you.
  2. For a picture or any other file, open Image or file and drop it in, pick it, or paste a screenshot. You get a data URI with a preview and the size before and after.
  3. Copy the result the way you need it: the plain data URI, an <img> tag, a CSS url() or JSON. Paste a data URI into the decode box to see the picture again and download it.

Questions

Is my text or file uploaded?

No. Everything is encoded and decoded in your browser. Nothing you type or drop here is sent anywhere, not even to us.

What is Base64?

Base64 turns any data, like text, a picture or a font, into plain letters and numbers so it can travel where only text is allowed: inside JSON, an email, a URL, or straight in your HTML and CSS. It isn’t encryption. Anyone can decode it, so never use it to hide a password or a key.

What is URL-safe Base64?

Normal Base64 uses +, / and =, which have special meanings in web addresses. URL-safe Base64 (also called base64url) uses - and _ instead and drops the = at the end. JWTs and many APIs use it. When you decode, we read both kinds automatically.

Why is the Base64 bigger than my file?

Base64 stores every 3 bytes as 4 characters, so the result is about a third bigger than the original. That’s why it’s great for tiny icons but a bad idea for big pictures: a 200 KB photo becomes 270 KB of text inside your page that the browser can’t cache separately.

When should I use a data URI, and when a normal file?

Use a data URI for very small things, like icons, a tiny logo or a loading spinner under about 10 KB, so the page needs one less request. For anything bigger, keep the picture as a file in your project (for example in public/) and link to it. Your page loads faster and the browser can cache it.

It says my Base64 isn’t valid. Why?

Usually something extra came along when you copied it: quotes, a \n, or a piece of the text around it. Base64 only uses letters, numbers, + / (or - _) and up to two = at the end. Spaces and line breaks are fine; we skip them. We point out the first character that doesn’t belong.