Base64 Decoder

What is Base64?#

Base64 is a way to represent binary data as plain text using 64 ASCII characters: A–Z, a–z, 0–9, plus + and /. It lets binary like images, keys, and email attachments travel safely through systems built for text. It is encoding, not encryption.

Base64 uses a fixed alphabet of 64 characters. Each value from 0 to 63 maps to exactly one of them, which is how any 3 bytes of binary become 4 readable characters:

You have almost certainly seen it already. Base64 shows up wherever binary needs to ride inside text:

• Inlining a small image or icon straight into HTML or CSS
• Returning binary blobs inside a JSON API response
• Encoding email attachments (MIME)
• Storing keys and certificates in PEM files

That data-URI trick looks like this. The long string is the entire image:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Why does Base64 exist?#

Early network protocols were built for text, not raw bytes. ASCII used 7 bits and 128 characters, which was fine for English but not for binary. Some systems mangled control characters or rewrote line endings (LF to CR + LF), quietly corrupting images and audio in transit.

Base64 sidesteps all of that by only ever emitting characters every system already agrees on. Base16 and Base32 do the same job with smaller alphabets, but Base64 packs more data per character while staying safe. That is why it won.

How Base64 encoding works#

The whole scheme is one idea on repeat: take 3 bytes (24 bits), re-slice them into four 6-bit groups, and look each group up in the alphabet. Here is the word "Logto", encoded by hand.

1. Write each character as its 8-bit binary, using its ASCII code.
2. Take 3 bytes at a time. That is 24 bits.
3. Re-slice the same 24 bits into four groups of 6 bits.
4. Read each 6-bit group as a number from 0 to 63.
5. Look that number up in the alphabet to get one character.
6. If the last chunk of bytes does not reach 3, pad the leftover bits with zeros and add "=" so every block stays 4 characters.

Step 1. Turn each character into its 8-bit binary:

Step 2. Take the first three bytes, "Log", and re-slice those same 24 bits into four 6-bit groups:

Step 3. Read each 6-bit group as a number, then look the number up in the alphabet:

"Logto" is 5 bytes, not a multiple of 3. The last two bytes, "to", leave a 6 + 6 + 4 split. Pad those last 4 bits with zeros to fill a 6-bit group, then add one "=" to complete the 4-character block:

Put the blocks together:

"Logto"  →  TG9ndG8=

Every language ships this built in. In Node.js:

const text = 'Logto';
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // TG9ndG8=

Three rules fall out of that process, worth keeping in mind:

• 3 in, 4 out: Output length is the input rounded up to a multiple of 4 characters, so encoded data always runs about 33% larger.
• "=" means padding: It only appears when the input is not a multiple of 3 bytes.
• Padding counts the leftovers: No "=" means a multiple of 3 bytes, one "=" means 2 leftover bytes, two "=" means 1 leftover byte.

When should you use Base64?#

Reach for Base64 when binary has to pass through a text-only channel:

• Inline assets: Embed a tiny image or font in HTML/CSS to save a request.
• Text-only transports: Put binary inside JSON, XML, or a URL query parameter.
• Restricted characters: Move data through systems that choke on control bytes.

What you get in return:

• It works everywhere: Any ASCII-capable system can read it, with no charset negotiation.
• Nothing gets corrupted: The output survives channels that would otherwise damage raw bytes.

URL-safe Base64 (Base64URL)#

Standard Base64 leans on three characters that clash with how URLs, query strings, and filenames work: +, /, and the = padding. Drop a normal Base64 string into a link and it can break in quiet ways:

• + turns into a space. In a query string, many servers read + as a space. So ?data=ab+cd quietly arrives as "ab cd", and the bytes are wrong.
• / is a path separator. A / inside a value can be read as a new path segment, and most filesystems reject it in a filename outright.
• = is reserved as well. It splits keys from values in a query string, so trailing = padding gets stripped or misread.

You can percent-encode them (+ becomes %2B, / becomes %2F, = becomes %3D), but that bloats the string and is easy to double-encode by mistake.

Base64URL (RFC 4648 §5) fixes this at the source: swap + for -, swap / for _, and drop the = padding. The result drops straight into a URL, query parameter, or filename with nothing to escape. You will see it in URLs, filenames, and many web APIs.

const base64 = 'TG9ndG8=';
const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe); // TG9ndG8

Limitations (and one big misconception)#

Base64 is a representation, not a free lunch. Keep three things in mind:

• It is ~33% bigger: 3 bytes become 4 characters, so encoded data inflates by roughly a third.
• It costs CPU: Encoding and decoding are not free at high volume or on large payloads.
• It is unreadable: Opaque strings make logs and debugging harder.

Frequently asked questions#