Base64 appears in more places in web development than most developers realise. If you have ever used a JWT token, embedded an image in CSS, or used HTTP Basic Authentication, you have worked with Base64 — whether you knew it or not.
What Base64 Actually Does
Base64 converts arbitrary binary data into a string of 64 safe ASCII characters (A-Z, a-z, 0-9, +, /). The purpose is transport safety — some protocols and formats only handle text reliably. Base64 ensures binary data can travel through text-only channels without being corrupted.
Data URIs: Embedding Files Directly in HTML and CSS
A data URI embeds a file's content directly in HTML or CSS rather than referencing an external URL. Format: data:[mimetype];base64,[encoded-data]. Small icons (under 1KB) embedded as data URIs eliminate an HTTP request. However, data URIs are 33% larger than the original binary due to Base64 overhead, and they cannot be cached by the browser separately from the document.
JWT Tokens: Three Base64 Segments
A JWT (JSON Web Token) consists of three Base64URL-encoded segments separated by dots: header.payload.signature. The header and payload are Base64 encodings of JSON objects. The signature is a cryptographic hash — but still Base64-encoded. Decode the first two segments to inspect the token structure. Use the Base64 Decoder to inspect JWT payloads quickly during development.
Remember: Base64 is NOT encryption. The payload of a JWT is readable by anyone who has the token. Never store sensitive data like passwords in JWT payloads.
HTTP Basic Authentication
Basic Auth headers encode username:password as Base64 in the Authorization header: Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=. This is not secure over plain HTTP — the credentials are trivially decoded. Basic Auth is only acceptable over HTTPS. Encode credentials for API testing with the Base64 Encoder.