Base64 encoding is everywhere in web development — embedded in data URIs, stuffed inside JWTs, and piped through APIs. Yet many developers use it without fully understanding how it works, when it's appropriate, and when it's actively harmful to performance.
How Base64 Works
Base64 takes 3 bytes of binary input and encodes them as 4 ASCII characters, using an alphabet of 64 characters (A-Z, a-z, 0-9, +, /). This means every 3 bytes of input becomes 4 bytes of output — a 33% size increase. If the input length isn't divisible by 3, padding characters (=) are added.
Common Use Cases
Data URIs: Embedding small images directly in HTML or CSS eliminates an HTTP request. For images under 2 KB, this is typically a net performance win despite the 33% size increase, because you avoid connection overhead.
API payloads: When transmitting binary data (files, images) through JSON APIs, Base64 encoding ensures the data survives JSON serialization without corruption.
JWT tokens: JSON Web Tokens use Base64URL encoding (a URL-safe variant) for the header and payload segments. Understanding this is essential for debugging authentication issues.
Email (MIME): Email attachments are Base64-encoded because the SMTP protocol was designed for 7-bit ASCII text. This is the original use case that Base64 was designed for.
Performance Pitfalls
Don't Base64-encode large images. A 100 KB image becomes ~133 KB when Base64-encoded, and it cannot be cached separately from the HTML/CSS file it's embedded in. For images over 2-5 KB, separate files with proper caching are more efficient.
Don't use Base64 for security. Base64 is encoding, not encryption. Anyone can decode it instantly. Never Base64-encode passwords, API keys, or sensitive data as a "security" measure.
Base64 vs Base64URL
Standard Base64 uses + and / characters, which have special meaning in URLs. Base64URL replaces them with - and _ and typically omits padding (=). Always use Base64URL for data that appears in URLs, filenames, or JWT tokens.
Try our free Base64 Encoder/Decoder to quickly encode or decode Base64 data right in your browser.