Base64 Encoding Explained: How It Works and When to Use It

Base64 is everywhere once you start looking: inside data: image URLs, in the middle of JWT tokens, in Authorization: Basic headers and in every email attachment you have ever sent. It is also one of the most misunderstood encodings, often mistaken for encryption and regularly broken by emoji.

This guide explains what Base64 does, how it works under the hood, and when you should and should not reach for it.

The problem Base64 solves

Computers store everything as bytes, and a byte can hold any value from 0 to 255. Many older systems, such as email, URLs, JSON strings, HTML attributes and HTTP headers, were designed to carry text. Push arbitrary bytes through them and some values get stripped, rewritten or treated as control characters.

Base64 fixes this by rewriting any bytes using only 64 characters that every text system handles safely: A-Z, a-z, 0-9, + and /. The receiver decodes them back into the exact original bytes.

How Base64 works

The algorithm is short:

• Take the input 3 bytes (24 bits) at a time.
• Split those 24 bits into four groups of 6 bits.
• Each 6-bit group is a number from 0 to 63, which picks one character from the 64-character alphabet.
• If the input does not divide evenly by 3, pad the output with one or two = signs.

So Hi! (3 bytes) becomes SGkh (4 characters), and Hi (2 bytes) becomes SGk=. That 3-to-4 ratio is why Base64 output is always about 33% larger than the input.

Where you will meet Base64

Data URIs

Small images, icons and fonts can be embedded directly in HTML or CSS, saving an HTTP request:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo">

Use this only for small assets. Because of the 33% overhead and the lost browser caching, large images are better served as normal files.

HTTP Basic authentication

The header Authorization: Basic YWxpOnNlY3JldA== is simply ali:secret in Base64. Anyone who sees the header can decode it, which is exactly why Basic auth must only ever be used over HTTPS.

JWT tokens

A JSON Web Token is three base64url strings joined by dots: header, payload and signature. Decode the middle part and you can read the claims, such as the user id and the expiry time. The signature stops tampering, but it does not hide the content.

Email attachments and APIs

MIME encodes attachments in Base64 so they survive mail servers, and many APIs accept file uploads as a Base64 string inside a JSON body.

Base64 vs base64url

Standard Base64 uses + and /, which have special meanings in URLs and file paths. The base64url variant swaps them for - and _ and usually drops the = padding. Use base64url for anything that goes into a URL, a filename or a token. A good decoder accepts both.

The Unicode trap: btoa() and emoji

The browser's built-in btoa() only accepts characters in the Latin-1 range. Pass it an emoji or Urdu text and it throws InvalidCharacterError. The fix is to convert the text to UTF-8 bytes first:

function encode(text) {
  const bytes = new TextEncoder().encode(text);
  let binary = '';
  bytes.forEach(b => binary += String.fromCharCode(b));
  return btoa(binary);
}

function decode(b64) {
  const binary = atob(b64);
  const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

encode('Salam 👋');   // "U2FsYW0g8J+Riw=="

The formvoxo Base64 tool does this for you, and warns you when decoded data is binary rather than readable text.

Base64 is not encryption

This is the most important point in this article. Base64 has no key and no secret. Anyone can decode it instantly. Never use it to "hide" passwords, API keys or personal data in your front-end code, URLs or logs. If you need confidentiality, use real encryption and always transport data over HTTPS.

When not to use Base64

• Large files. The 33% size increase and extra CPU work add up. Upload files as binary (multipart) instead.
• Storing images in a database. Store the file in object storage and keep only the URL.
• Security. As above, it protects nothing.

Collecting form data without encoding anything

If all you need is for visitors to send you messages from a website, you do not need to encode, decode or store anything yourself. Point your HTML form at formvoxo and every submission arrives in your inbox, with spam filtering included. See how it works.