developer By Marshkalk

Base64 Encoding Explained: When and Why to Use It

Base64 appears everywhere in web development – from email attachments to JWTs. Learn what it actually does, when to use it, and when not to.

What Is Base64?

Base64 is an encoding scheme that converts binary data into a string of 64 printable ASCII characters. The 64 characters are: A-Z, a-z, 0-9, +, and /, plus = as a padding character.

It was designed to solve a specific problem: many transport protocols and storage systems were built to handle text, not arbitrary binary data. When you need to move binary content (images, files, keys) through a text-only channel, Base64 is the standard solution.

How It Works (Simply)

Base64 takes every 3 bytes (24 bits) of input and encodes them as 4 characters. This means:

  • A 3-byte input → 4 characters of output
  • Every Base64-encoded string is approximately 33% larger than the original binary

The process is deterministic and reversible – it is an encoding, not encryption. Anyone can decode a Base64 string back to the original bytes.

Common Use Cases

1. Embedding images in HTML or CSS

Instead of linking to an external image file, you can embed it directly:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..." />

This eliminates an HTTP request, which can speed up small icons or inline images. The trade-off: the HTML file becomes larger and the image cannot be cached independently.

2. JSON Web Tokens (JWTs)

JWTs use Base64URL (a variant that replaces + with - and / with _) to encode their header and payload. This makes the token safe to use in URLs and HTTP headers without URL-encoding issues.

3. Email attachments (MIME)

Email protocols were originally text-only. MIME (Multipurpose Internet Mail Extensions) uses Base64 to encode binary attachments – PDFs, images, Word documents – so they can travel safely through email infrastructure.

4. API authentication

Basic HTTP authentication encodes credentials as username:password in Base64: 

Authorization: Basic dXNlcjpwYXNzd29yZA==
Note: this is not encryption. The credentials are trivially decodable. HTTPS is what provides security here, not Base64.

5. Storing binary data in JSON or databases

JSON has no native binary type. Base64 is the standard way to include binary blobs (icons, cryptographic keys, file content) inside a JSON payload or a text column in a database.

What Base64 Is NOT

Base64 is not encryption. It provides zero security. Never use it to obscure sensitive data. Base64 is not compression. It makes data larger. Base64 is not hashing. It is fully reversible.

These are common misconceptions. Base64's only job is binary-to-text conversion.

URL-Safe Base64 vs Standard Base64

Standard Base64 uses + and /, which have special meanings in URLs. Base64URL replaces them with - and _, making the output safe to use in query strings and URL path segments without percent-encoding. If you are working with JWTs or URL tokens, always use Base64URL.

Encoding and Decoding in Your Browser

You can encode and decode Base64 strings without any tools or libraries using the Base64 Encoder/Decoder on this site – paste your text or binary content, convert instantly, no data sent to servers.

In JavaScript: btoa(str) encodes, atob(str) decodes. In Python: base64.b64encode(bytes) and base64.b64decode(str).

Summary

Base64 is a binary-to-text encoding that makes binary data safe to transmit through text-based systems. It appears in JWTs, email attachments, embedded images, and API auth headers. It adds ~33% size overhead and provides no security on its own. Use it when a protocol or system requires text-safe binary representation.