What is Base64 Encoding? Complete Guide with Examples

Base64 Encoding Complete Reference for Developers

Base64 is the invisible glue of the internet. Email attachments, JWT tokens, CSS data URLs, and API image responses all use Base64. It is an encoding scheme — not encryption — that converts binary data into printable ASCII text.

How Base64 Works

Base64 uses 64 safe ASCII characters: A-Z (26), a-z (26), 0-9 (10), + and / (2), with = for padding. The name comes from representing data in base 64. Since 64 = 2^6, each Base64 character represents exactly 6 bits. Three bytes (24 bits) of binary become four Base64 characters (4 x 6 = 24 bits). This 3:4 ratio means Base64 always increases size by 33%.

Why it exists: Many internet protocols were designed for 7-bit ASCII text. Sending raw binary through these systems corrupts it. Base64 converts binary to safe ASCII that passes through any text-only channel intact.

Size Impact

Three bytes of binary data become four Base64 characters. A 100KB image becomes 133KB. A 1MB PDF becomes 1.33MB. For small files under 10KB, this size increase is worth eliminating an HTTP request by embedding the file directly. For large files, use direct URLs with proper CDN.

Data URLs in HTML and CSS

The data URL format embeds files directly in HTML or CSS:

data:[media-type];base64,[base64-encoded-data]

Example in CSS: background-image: url('data:image/png;base64,iVBORw0K...');

Example in HTML: The img src attribute can contain a data URL instead of a file path.

Common media types: image/jpeg, image/png, image/svg+xml, image/webp, application/pdf, text/plain.

Best practice: Use data URLs only for small images used on every page load (favicon, loading spinner, small icon). For images larger than 10KB, a regular URL with browser caching is more efficient.

Base64 in Authentication

HTTP Basic Auth sends credentials as Base64: Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=. The value is Base64 of username:password. This is trivially decodable — Base64 is not encryption. Always use HTTPS with Basic Auth.

JWT tokens have three Base64URL-encoded parts: header.payload.signature. The header and payload are readable by anyone. Only the signature (using a secret key) prevents tampering. Base64URL replaces + with - and / with _ for URL safety.

JavaScript API

To encode: btoa("Hello") returns "SGVsbG8=" — works for ASCII strings only.

To decode: atob("SGVsbG8=") returns "Hello".

For binary files in Node.js: Buffer.from(fileData).toString('base64') to encode; Buffer.from(base64string, 'base64') to decode.

For Unicode in browsers: Convert to UTF-8 bytes first, then Base64 encode the byte array.

Base64 vs Base64URL

Standard Base64 uses + and / which are special in URLs. Base64URL substitutes - for + and _ for /, and makes padding optional. Used in: JWT tokens, OAuth PKCE, URL-safe file identifiers.

Using Lazyblink Base64 Tool

Upload any image to get Base64 string, data URL, CSS property, and HTML img tag — all ready to copy. Paste any Base64 string to decode back to text or downloadable file. All processing happens in your browser. Sensitive files — private keys, confidential documents — are never sent to any server.

Important: Base64 is encoding, not encryption. Anyone who has the Base64 string can instantly decode it. Never use Base64 to protect sensitive data — use AES-256 or similar proper encryption.