Encode and Decode Base64 Strings

Base64 encoding is one of those foundational concepts that appears across the entire web stack — in HTTP authentication headers, JWT tokens, data URI images, cookie values, MIME email attachments, and API key formats. Despite how ubiquitous it is, developers often confuse it with encryption. Base64 is purely an encoding scheme: it converts binary data into printable ASCII text so it can be safely embedded in contexts that only support text. Anyone who sees a Base64-encoded string can instantly decode it — there's no secret involved. This collection demonstrates five distinct Base64 use cases that you'll encounter regularly. The HTTP Basic Authentication pattern (username:password → Base64 → Authorization header) is used by dozens of APIs. You concatenate the username and password with a colon separator, Base64 encode the result, and set Authorization: Basic {encoded}. The server decodes the header and splits on the colon to extract the credentials. JWT header and payload are Base64url encoded (a URL-safe variant that uses - instead of + and _ instead of /). This is why JWT tokens look like "eyJ..." — that's {"alg":"...", opening a JSON object, Base64url encoded. The encoder here uses standard Base64, but understanding the connection to JWT decoding helps when debugging authentication issues. Data URIs embed binary content directly in HTML or CSS using the format data:[mediatype];base64,[data]. This is used for small icons (avoiding an HTTP request), inline images in email HTML (since email clients block external image requests), and embedding fonts in CSS. The overhead of 33% larger size makes data URIs appropriate only for small resources. Size overhead understanding: Base64 works by mapping every three bytes of input to four Base64 characters. Three bytes × 8 bits = 24 bits, which maps to four 6-bit Base64 characters. This 3:4 ratio means Base64-encoded data is always 33% larger than the original binary data. A 1MB image becomes a 1.37MB Base64 string. URL-safe Base64: standard Base64 uses + and / which have special meaning in URLs (+ is a space in query strings, / separates path segments). Base64url replaces these with - and _ respectively, and omits the = padding. JWTs, OAuth tokens, and URL tokens all use Base64url. When decoding tokens from URLs, replace - with + and _ with / before decoding, or use a Base64url-aware library. Security reminder: this encoder runs entirely in your browser with no network requests. However, Base64 provides zero security — it's trivially reversible. Never use Base64 to "protect" sensitive data. If you need to securely transmit credentials or tokens, use TLS (HTTPS) for transport security and proper cryptographic signing or encryption for the data itself.

# Basic Auth credential encoding
username:password

# JWT header (decoded)
{"alg":"HS256","typ":"JWT"}

# Example API key
sk-prod-example-key-12345abcdef

# Small icon data URI prefix
data:image/png;base64,

# URL-safe Base64 example
Hello, World! This is a test string for encoding.