·TheToolStash

What Is Base64 Encoding? A Plain-English Explanation

Learn what Base64 encoding is, why it exists, how to encode and decode it in JavaScript and Python, and when to use Base64url instead of standard Base64.

If you've ever seen a string like SGVsbG8sIHdvcmxkIQ== and wondered what it was, you were looking at Base64-encoded data. It looks random, but it encodes the text "Hello, world!" in a format safe for any text-based system.

Why Does Base64 Exist?

The web was built on protocols designed to transmit text. Email (SMTP), HTTP headers, HTML attributes, and JSON payloads were all originally designed with ASCII text in mind — not arbitrary binary bytes. When engineers needed to transmit binary data (images, files, cryptographic keys) through these text-based channels, they needed a way to represent binary bytes using only printable characters.

Base64 solves this by mapping every 3 bytes of binary data into exactly 4 printable characters, using an alphabet of 64 characters: A–Z, a–z, 0–9, +, and /. The name comes directly from the size of this alphabet. The = character is used as padding when the input length is not a multiple of 3 bytes.

The tradeoff is size: Base64 output is approximately 33% larger than the original input. Three input bytes become four output characters. For small values like tokens and keys this is negligible; for large files it matters more.

Where You Encounter Base64 Every Day

You interact with Base64 constantly in software, even if you don't notice it:

  • Images in CSS: background-image: url('data:image/png;base64,iVBOR...') — embedding small images directly in HTML or CSS without a separate file request
  • JWT tokens: The three dot-separated sections of a JSON Web Token (header.payload.signature) are each Base64url-encoded
  • Email attachments: MIME multipart email encodes attachments as Base64 so binary files survive transport through text-only email servers
  • SSH and TLS certificates: Public keys and certificate files (.pem) contain Base64-encoded binary data between -----BEGIN----- and -----END----- markers
  • API authentication: Many APIs encode credentials as Base64 for the Authorization: Basic header (though this is not encryption — it is just encoding)
  • btoa() in JavaScript: The name "btoa" stands for "binary to ASCII" — another name for Base64 encoding

How Base64 Encoding Works

Base64 operates on 3-byte groups. Each group of 3 bytes (24 bits) is split into four 6-bit chunks. Each 6-bit value (0–63) is mapped to one character in the Base64 alphabet.

For example, the bytes for "Man" are 77 97 110 in ASCII. In binary:

01001101  01100001  01101110

Split into 6-bit groups:

010011  010110  000101  101110   19      22      5       46    T       W       F       u

So "Man" encodes to TWFu. For inputs not divisible by 3, = padding characters are added:

  • 1 leftover byte → 2 Base64 chars + ==
  • 2 leftover bytes → 3 Base64 chars + =

Base64url — The URL-Safe Variant

Standard Base64 uses + and /, which are special characters in URLs. If you embed a standard Base64 string in a URL query parameter, those characters must be percent-encoded as %2B and %2F, which creates ugly and sometimes error-prone URLs.

Base64url is a drop-in variant defined in RFC 4648 that makes two substitutions:

  • +-
  • /_
  • Trailing = padding is typically omitted
JWT tokens use Base64url. If you decode a JWT's header or payload segment in a standard Base64 decoder, remember to replace - with + and _ with / first.

Encoding and Decoding in Code

JavaScript (browser and Node.js)

// ── Encode (browser — plain ASCII only)
const encoded = btoa('Hello, world!')     // "SGVsbG8sIHdvcmxkIQ=="
const decoded = atob('SGVsbG8sIHdvcmxkIQ==')  // "Hello, world!"

// ── Encode Unicode text correctly (handles emoji, CJK, etc.) function encodeBase64(text) { const bytes = new TextEncoder().encode(text) let binary = '' bytes.forEach(b => binary += String.fromCharCode(b)) return btoa(binary) }

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

encodeBase64('Hello 🌍') // handles emoji correctly

> Warning: btoa() throws InvalidCharacterError for characters outside the Latin-1 range (code points above 255). Always use the TextEncoder approach for any text that might contain Unicode.

Python

import base64

Encode bytes to Base64

data = b'Hello, world!' encoded = base64.b64encode(data) # b'SGVsbG8sIHdvcmxkIQ==' encoded_str = encoded.decode('utf-8') # "SGVsbG8sIHdvcmxkIQ=="

Decode Base64 back to bytes

decoded = base64.b64decode('SGVsbG8sIHdvcmxkIQ==') print(decoded.decode('utf-8')) # "Hello, world!"

URL-safe Base64 (Base64url)

url_safe = base64.urlsafe_b64encode(b'Hello, world!')

b'SGVsbG8sIHdvcmxkIQ==' (same here, but + and / become - and _)

Node.js (Buffer API)

// Encode
const encoded = Buffer.from('Hello, world!').toString('base64')
// "SGVsbG8sIHdvcmxkIQ=="

// Decode const decoded = Buffer.from('SGVsbG8sIHdvcmxkIQ==', 'base64').toString('utf8') // "Hello, world!"

// Base64url const urlSafe = Buffer.from('Hello, world!').toString('base64url')

Common Gotchas

Base64 is not encryption. Base64 is purely encoding — it can be decoded by anyone without a key. Never treat Base64-encoded data as secure. If you see credentials in a Basic auth header, they are trivially decodable by anyone who can intercept the request. Use HTTPS.

Unicode and btoa(). The browser's btoa() only accepts "binary strings" — strings where every character has a code point ≤ 255. Characters like é, , or 🌍 will throw an error. Use TextEncoder as shown above.

Whitespace in encoded strings. Base64 strings are often wrapped at 76 characters for email compatibility (MIME), meaning they contain newlines. Strip whitespace before decoding: b64string.replace(/\s/g, '').

The trailing ==. This is normal padding. Some systems omit padding (Base64url often does). Both with and without padding are valid and should decode to the same result.


Try it now: Use our free Base64 Encoder / Decoder to encode any text or file to Base64 and decode it back — all in your browser with no data ever leaving your device.

Read next: What Is URL Encoding? — the percent-encoding scheme that makes URLs safe for special characters.

Tools mentioned in this post

🔡Base64 Encoder
← All postsAll tools →