If you have spent any time doing web development, working with APIs, or debugging network requests you have almost certainly encountered Base64 encoded strings. They look like a random jumble of letters, numbers, and occasional + and / characters — something like `SGVsbG8gV29ybGQ=`. Base64 is everywhere in modern web development yet many developers use it without fully understanding what it is, how it works, or when they should and should not use it. This guide explains everything clearly.
What is Base64 Encoding?
Base64 is a method of encoding binary data into a text format using only 64 printable ASCII characters: the uppercase letters A-Z, lowercase letters a-z, digits 0-9, and the two symbols + and /. The = character is used for padding at the end. The name comes directly from this use of 64 characters. Base64 was designed to allow binary data — like images, audio files, or arbitrary bytes — to be safely transmitted over systems that were designed to handle only text, such as email protocols and HTML.
How Does Base64 Encoding Work?
Base64 works by taking three bytes (24 bits) of binary data at a time and splitting them into four groups of 6 bits each. Each 6-bit group maps to one of the 64 characters in the Base64 alphabet. Since 3 bytes become 4 characters, Base64 always increases the data size by approximately 33%. If the input is not a multiple of 3 bytes, = padding characters are added at the end to make it so.
You do not need to understand the binary math to use Base64 effectively. Just remember: 3 bytes in → 4 characters out, and the output is always about 33% larger than the input.
Common Use Cases for Base64 in Web Development
- Embedding images in HTML and CSS as data URIs to avoid extra HTTP requests — <img src="data:image/png;base64,...">
- Encoding binary data for transmission in JSON APIs which only support text values
- JWT (JSON Web Tokens) use Base64url encoding for the header and payload sections
- Email attachments are encoded in Base64 as part of the MIME standard
- Basic HTTP Authentication encodes credentials as Base64 in the Authorization header
- Storing small binary assets like favicons or icons directly in CSS stylesheets
- Passing binary data through URL query parameters (using URL-safe Base64)
Base64 is NOT Encryption — A Critical Distinction
This is one of the most important things to understand about Base64. Encoding is not encryption. If someone has a Base64 encoded string, they can decode it back to the original content in seconds with any Base64 decoder — including the one on this page. Base64 provides zero security and zero privacy protection. It is simply a format change, not a transformation that hides or protects your data. Never use Base64 to protect passwords, API keys, sensitive user data, or anything else that needs to remain secret. For actual security, use proper encryption algorithms like AES-256.
Never store passwords, API keys, or sensitive data encoded only in Base64. It provides no security — anyone can decode it instantly.
Standard Base64 vs URL-Safe Base64 (Base64url)
Standard Base64 uses + and / characters which have special meaning in URLs. When a Base64 string needs to appear in a URL query parameter or a filename, these characters cause problems. URL-safe Base64 (also called Base64url) solves this by replacing + with - and / with _ and optionally removing the = padding. JWT tokens, OAuth tokens, and many modern APIs use Base64url specifically for this reason. When you see a JWT token, the parts separated by dots are Base64url encoded.
How to Encode and Decode Base64 in JavaScript
- In the browser — use `btoa()` to encode and `atob()` to decode. For Unicode support wrap with `encodeURIComponent` and `decodeURIComponent`.
- In Node.js — use `Buffer.from(text).toString('base64')` to encode and `Buffer.from(encoded, 'base64').toString('utf8')` to decode.
- For files in the browser — use the `FileReader` API with `readAsDataURL()` to get a Base64 data URL.
- For URL-safe Base64 — replace + with - and / with _ after encoding, and reverse before decoding.