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

Base64 rewrites any bytes (an image, a PDF, a string with emoji) using only 64 characters that survive text-only systems: A to Z, a to z, 0 to 9, plus + and /. Every 3 bytes become 4 characters, so the output is about a third larger. Anyone can reverse it, which means it hides nothing.

The standard is RFC 4648 (2006). Every encoded example below was run through the Base64 Encoder & Decoder, so the outputs are what the tool gives you.

How Base64 encoding works

Take 3 bytes, which is 24 bits. Cut them into four groups of 6 bits. Each 6-bit group is a number from 0 to 63, and that number picks one character from the alphabet. The word "Man" is the classic example, and it comes out as "TWFu" with no leftovers.

When the input length is not a multiple of 3, the last group is padded with = so the output stays a multiple of 4. "Hey" is 3 bytes and encodes to SGV5. "Hi" is 2 bytes and becomes SGk= with one pad. A single "a" becomes YQ==, two pads for one leftover byte.

Text, emoji and the btoa trap

Base64 encodes bytes, not letters. Text has to become bytes first, and on the web that means UTF-8. Plain English is one byte per letter, but an accented é takes two bytes and most emoji take four. The browser's built-in btoa() treats each character as one byte. It throws on anything above U+00FF, like an emoji, and it quietly encodes é as a single Latin-1 byte, so btoa("café") gives a different result from the UTF-8 version below (MDN, checked 2026-10).

"Hello" encodes to SGVsbG8=, and the other two decode back character for character. The ZipTools encoder converts text to UTF-8 before encoding, which is why the emoji works. In your own code, use one of these:

// Modern browsers (Baseline since September 2025)
const bytes = new TextEncoder().encode('café 🔑');
const b64 = bytes.toBase64();                    // standard alphabet
const url = bytes.toBase64({ alphabet: 'base64url', omitPadding: true });
const back = new TextDecoder().decode(Uint8Array.fromBase64(b64));

// Older browsers: go through a byte string
const legacy = btoa(String.fromCharCode(...bytes));

The toBase64() and fromBase64() methods are listed by MDN as Baseline 2025 (checked 2026-10). The spread in the legacy line can hit the engine argument limit on large inputs, so encode big files in chunks.

How much bigger Base64 makes your data

4 characters for every 3 bytes is 33.3% overhead. Real sizes get close to that quickly: 36% at 100 bytes, 33.6% at 1 KB. Small inputs pay more, because padding rounds the output up to the next multiple of 4.

Email adds a bit more. MIME wraps Base64 at no more than 76 characters per line (RFC 2045, section 6.8), and every line break adds two more bytes. So an attachment grows by a little more than a third on its way through email, which is worth remembering when a mailbox has a size limit.

Where you will actually meet Base64

• Data URIs. A data:image/png;base64 URI puts a small file straight into HTML or CSS. The Base64 tool gives you a ready-made data URI when you encode a file.
• JWTs. The header and payload of a JSON Web Token are base64url (- and _ in place of + and /) with the padding removed (RFC 7515, section 2). Decode the middle part and you can read every claim, which is a good reminder that a JWT is signed, not secret. The ZipTools decoder accepts missing padding but expects the standard alphabet, so if a segment contains - or _, swap them for + and / first.
• APIs that put files in JSON. The GitHub API, for one, returns file contents with the encoding field set to base64 (GitHub REST docs, checked 2026-10).

When Base64 is the wrong choice

Hiding secrets. Base64 is an encoding, not encryption. An API key in Base64 is an API key with extra steps; paste it into any decoder and it's back. If something needs protecting, encrypt it, or keep it out of the file altogether. If one already leaked, read what to do about a leaked API key.

Large images inside pages. A data URI is part of the HTML or CSS file, so it is downloaded again whenever that file is, and it is a third larger than the image. Fine for a tiny icon. For a hero photo, serve the file.

Two smaller ones. If your database has a binary column type, use it instead of paying a third more space plus a decode on every read. And in URLs, standard Base64 breaks because + and / mean something there: use base64url (the URL encoding guide covers it next to percent-encoding) or percent-encode the value.