Base64 Encoding Explained — When and Why to Use It

Base64 is one of those things every developer encounters but few fully understand. Let’s break it down.

What Is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). It converts every 3 bytes of input into 4 ASCII characters, making binary data safe to transmit through text-only channels.

When to Use Base64

• Data URIs — embedding small images directly in HTML or CSS (data:image/png;base64,...)
• Email attachments — MIME encoding uses Base64 to send binary files through email
• API payloads — sending binary data (files, images) in JSON requests
• Basic authentication — HTTP Basic Auth encodes username:password as Base64
• JWT tokens — the header and payload of JWTs are Base64URL-encoded

When NOT to Use Base64

Base64 is not encryption. It provides zero security — anyone can decode it instantly. Never use it to “protect” sensitive data. It also increases data size by about 33%, so avoid it for large files when a binary transfer is possible.

Base64 vs Base64URL

Standard Base64 uses + and /, which are special characters in URLs. Base64URL replaces them with - and _, and omits padding (=). JWTs and URL-safe tokens use Base64URL.

Quick Examples

// Encode
btoa("Hello, World!")  // "SGVsbG8sIFdvcmxkIQ=="

// Decode
atob("SGVsbG8sIFdvcmxkIQ==")  // "Hello, World!"

Note: btoa and atob only handle ASCII. For Unicode text, you need to encode to UTF-8 first using TextEncoder.