The Developer's Guide to Base64 Encoding and Decoding

·Online Toolbox Team

What is Base64 Encoding?

Base64 is a method of converting binary data into ASCII text. It uses 64 characters (A-Z, a-z, 0-9, +, /) to represent any binary data as plain text. This is essential when you need to transmit binary data through systems designed for text — like embedding images in HTML, sending attachments via email, or storing files in JSON.

How Base64 Works

Base64 takes 3 bytes of binary data (24 bits) and splits them into 4 groups of 6 bits. Each 6-bit value maps to one of the 64 characters:

  • 0-25: A-Z
  • 26-51: a-z
  • 52-61: 0-9
  • 62: +
  • 63: /

If the input isn't a multiple of 3 bytes, padding characters (=) are added at the end.

Common Use Cases

1. Embedding Images in HTML/CSS

Instead of hosting an image file, you can Base64-encode it and embed it directly:

<img src="data:image/png;base64,iVBORw0KGgo..." />

This reduces HTTP requests but increases HTML size — use it for small icons and logos.

2. HTTP Basic Authentication

When you log into a website with Basic Auth, your browser encodes username:password as Base64:

Authorization: Basic YWRtaW46cGFzc3dvcmQ=

Important: Base64 is encoding, not encryption. Anyone can decode it. Always use HTTPS with Basic Auth.

3. Storing Binary Data in JSON

JSON doesn't support binary data directly. If you need to include an image, file, or certificate in a JSON payload, Base64-encode it first.

4. Data URIs

You can encode any file as a Base64 data URI for inline display:

data:application/pdf;base64,JVBERi0xLjQK...

Base64 Encode vs Decode

DirectionInputOutputExample Tool
EncodePlain textBase64 stringBase64 Encoder
DecodeBase64 stringPlain textBase64 Decoder

Unicode Considerations

Standard btoa() and atob() functions only work with ASCII. For Unicode text (including emojis and CJK characters), you need a Unicode-safe approach:

// Encode Unicode
function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

// Decode Unicode
function fromBase64(b64) {
  return decodeURIComponent(escape(atob(b64)));
}

Our free Base64 encoder/decoder handles Unicode correctly out of the box.

When NOT to Use Base64

  • Large files — Base64 increases file size by approximately 33%. For large files, use direct binary transfer instead.
  • Encryption — Base64 is NOT encryption. Use AES, RSA, or other cryptographic algorithms for security.
  • URL parameters — For URL-safe encoding, use URL encoding instead of Base64 (or use Base64URL variant).

Try It Yourself

Need to encode or decode Base64? Use our free online Base64 tool — it's fast, private, and works entirely in your browser.