Common Uses for Base64 Encoding: Data URIs, APIs, and More

Embedding Small Images Directly in CSS or HTML

A Base64-encoded image can be embedded directly as a "data URI" inside a stylesheet or HTML attribute, avoiding a separate HTTP request for that image file. This trades a larger inline payload for one fewer network round-trip — a reasonable tradeoff for small icons or images, less so for large photos where the size increase outweighs the saved request.

background-image: url("data:image/png;base64,iVBORw0KGgo...");

HTTP Basic Authentication

When an API uses Basic Authentication, the username and password are combined and Base64-encoded before being sent in the request header. This is worth understanding clearly: Base64 here makes the credentials safe to transmit in a text header, but it does not protect them — anyone who intercepts the request can decode them instantly. This is exactly why Basic Auth should only ever be used over HTTPS, where the encryption layer (not the Base64 encoding) is what actually protects the credentials in transit.

JSON Web Tokens (JWTs)

A JWT's header and payload sections are Base64-encoded (in a URL-safe variant) so the token can be safely included in URLs, headers, and cookies. Anyone can decode a JWT's contents without any special key — the token's actual security comes from a separate cryptographic signature, not from the Base64 encoding itself.

Storing Binary Data in Text-Only Fields

Databases, config files, or APIs that only accept text values sometimes need to store binary data (like a small file or a cryptographic key) — Base64-encoding that binary data lets it fit safely into a plain text field.