What Is Base64 Encoding? Complete Developer Guide

← Back to Blog

Base64 is a binary-to-text encoding scheme that converts arbitrary binary data into a string of printable ASCII characters. It appears everywhere in web development — from embedding images in HTML and CSS, to HTTP authentication headers, JWT tokens, and email attachments. Understanding Base64 is a foundational skill for any developer working with APIs, authentication, or data transmission.

Why Does Base64 Exist?

Many communication protocols and text formats — HTTP headers, XML, JSON, email (SMTP/MIME) — were designed to carry text, not arbitrary binary data. A JPEG image, a PDF file, or a cryptographic certificate contains bytes that include null characters, control codes, and other values that would corrupt or break text-based protocols.

Base64 solves this by translating binary data into a safe subset of 64 printable ASCII characters. Any system that can handle text can safely transmit Base64-encoded binary data.

How Base64 Encoding Works

Base64 encodes 3 bytes of binary data as 4 ASCII characters. The encoding uses a 64-character alphabet:

• Uppercase letters A–Z (26 characters)
• Lowercase letters a–z (26 characters)
• Digits 0–9 (10 characters)
• Plus + and slash / (2 characters)
• Equals = as padding

Simple example — encoding the ASCII text Man:

M        a        n
01001101 01100001 01101110   (3 bytes = 24 bits)
↓ Split into four 6-bit groups ↓
010011 010110 000101 101110
  T      W      F      u
→ Base64: TWFu

If the input is not a multiple of 3 bytes, padding characters (= or ==) are appended to make the output a multiple of 4 characters.

The Size Overhead

Base64 encoding increases data size by approximately 33% — every 3 bytes of input becomes 4 characters of output. A 100 KB image becomes roughly 133 KB when Base64-encoded. This overhead is acceptable for small data like tokens and thumbnails but becomes significant for large binary files.

Real-World Use Cases

Data URLs — Inline Images in HTML and CSS

Embedding small images directly in HTML or CSS eliminates HTTP requests, improving page load performance for icons and thumbnails:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2Zy4u...");
}

HTTP Basic Authentication

The HTTP Basic Auth scheme encodes credentials as Base64 in the Authorization header:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Decode dXNlcm5hbWU6cGFzc3dvcmQ= and you get username:password. Important: Basic Auth must always be used over HTTPS — Base64 is not encryption, and credentials are trivially decoded.

JSON Web Tokens (JWT)

JWTs consist of three Base64url-encoded parts separated by dots:

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyMSJ9.signature

The header and payload are Base64url-encoded JSON. You can decode them without a key — only the signature requires the secret. Use the JWT Decoder tool on DataConvertProTools to inspect any JWT's header and payload instantly.

Email Attachments (MIME)

The MIME standard uses Base64 to encode binary email attachments for transmission over text-based SMTP. When you receive an email with a PDF attachment, the PDF bytes are Base64-encoded in the email's raw source.

Storing Binary Data in JSON or XML

When an API needs to transmit binary data inside a JSON or XML body, Base64 is the standard approach. For example, an image upload API might accept:

{"filename": "photo.jpg", "data": "data:image/jpeg;base64,/9j/4AAQ..."}

Base64 vs Base64url

Standard Base64 uses + and / which are special characters in URLs and must be percent-encoded. Base64url is a URL-safe variant that replaces:

• + → - (dash)
• / → _ (underscore)
• Padding = is often omitted

Base64url is used in JWTs, URL shorteners, and anywhere the encoded string appears in a URL or HTTP header.

Base64 Is NOT Encryption

This is critical: Base64 is encoding, not encryption. It is fully reversible by anyone without any key. Do not use Base64 to "hide" or "secure" sensitive data — it provides zero confidentiality. For actual security, use proper encryption (AES, RSA) or hashing (SHA-256 for checksums, bcrypt for passwords).

The DataConvertProTools SHA-256 hash generator in the Tools tab creates cryptographic hashes using the Web Crypto API — entirely in your browser.

Encode and Decode Base64 Online

The Base64 Encoder/Decoder in the DataConvertProTools Tools tab lets you encode any text string to Base64 or decode any Base64 string back to plain text — instantly in your browser with no server involvement.

Further Reading

Base64 encoding is often used alongside JSON — particularly when embedding binary data in API payloads. For a complete understanding of JSON itself, see our Complete JSON Guide. When working with JWTs, the JWT Decoder in the Tools tab shows you the decoded header and payload of any token instantly. For encoding and decoding URL-safe strings, the URL Encoder/Decoder is available in the same tab. If you are building or consuming APIs and need to choose the right data format, see our API Data Formats guide.