What is Base64? How Encoding Works and Why It Every Web Developer Uses It
Base64 converts binary data (images, files, cryptographic keys) into 64 ASCII-safe characters — making it safe for email, JSON, URLs, and HTML data URIs. This guide explains encoding, decoding, variants (standard/URL-safe/MIME), and common pitfalls.
Last updated:
Core Concepts
- How Base64 encoding works (in 30 seconds)
- Base64 takes input bytes, splits them into 6-bit groups, and maps each 6-bit value (0-63) to one of 64 characters: A-Z (0-25), a-z (26-51), 0-9 (52-61), + and / (62-63). 3 input bytes (24 bits) produce 4 Base64 characters (4×6=24 bits). Padding (=) is added when the input byte count isn't a multiple of 3.
- Standard, URL-safe, and MIME variants
- Standard Base64 uses + and / with = padding. URL-safe Base64 (also called base64url in RFC 4648) replaces + with - and / with _ and often omits padding — safe for URL query strings and JWTs. MIME Base64 wraps output at 76 characters, used in email attachments.
- Common use cases
- Embedding images as data URIs (<img src='data:image/png;base64,...'>). Sending binary files as JSON strings (API payloads). JWTs use base64url for the header and payload. AWS CloudFormation and Terraform encode large user-data scripts. OAuth 2 client credentials in the Authorization: Basic header.
- Base64 is NOT encryption
- This is the top misconception. Base64 is an encoding scheme — it transforms data for transport, not for secrecy. Anyone who sees 'dGVzdA==' and knows it's Base64 can decode it with a one-liner: echo 'dGVzdA==' | base64 --decode. For actual secrecy, encrypt first, then Base64-encode the ciphertext.
Frequently Asked Questions
Why does Base64 increase the data size?
Base64 encoding increases the byte size by ~33%. 3 input bytes become 4 Base64 characters. If the input isn't a multiple of 3, 1 or 2 = padding bytes are added, bringing the overhead to exactly 4/3 of the original size.
When should I use Base64 vs Hex encoding?
Base64 is more compact — 4 chars per 3 input bytes vs hex's 2 chars per 1 input byte. Use Base64 when bandwidth matters (APIs, JWTs, embedded images). Use hex when readability and manual inspection matter (crypto hashes, memory dumps, debugging). Base64 saves ~33% vs hex for the same binary input.
Try these related tools
Base64 →
Encode and decode Base64 strings online. Supports UTF-8 text and URL-safe Base64. All processing runs locally in your browser.
String to Hex →
Convert any text (UTF-8) to its hexadecimal byte representation. Configurable separator (space / comma / none), lowercase / uppercase, and optional "0x" prefix per byte. Handles emoji, CJK, and every Unicode character correctly. 100% local.
Image → Base64 →
Convert images to Base64 data URLs online. Drop or select any image and copy the ready-to-paste data URI for CSS, HTML, or JSON.