Base64 Encoding Explained: What It Is, When to Use It, and How to Encode Files

Base64 is one of those things most developers use regularly without fully understanding it. You see it in JWTs, data URIs, email attachments, API payloads, and environment variables. It always looks like a wall of letters and slashes, and people sometimes confuse it with encryption. It’s not encryption — it’s encoding.

This guide explains what Base64 is, when to use it, and how to use the encoder/decoder tool effectively.

What Base64 Actually Is

Binary data (files, images, arbitrary bytes) can contain any byte value from 0 to 255. When you send data over text-based protocols — HTTP headers, JSON, XML, email — many byte values cause problems: they break string parsing, encode as multi-byte sequences in UTF-8, or are interpreted as control characters.

Base64 solves this by representing arbitrary binary data using only 64 printable ASCII characters:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Every 3 bytes of input (24 bits) becomes 4 Base64 characters (each character encodes 6 bits). The output is 33% larger than the input, but it’s safe to embed anywhere text is expected.

A simple example

Text: Hello Bytes (ASCII): 72 101 108 108 111 Base64: SGVsbG8=

The = at the end is padding — Base64 always outputs groups of 4 characters. If the input isn’t divisible by 3, padding is added.

When to Use Base64

Embedding binary data in text formats

JSON doesn’t have a binary type. If you need to include a file, an image, or any binary blob in a JSON payload, Base64 is the standard approach:

{
  "filename": "avatar.png",
  "content": "iVBORw0KGgoAAAANSUhEUgAA..."
}

The receiver decodes the Base64 back to bytes.

Data URIs

You can embed an image directly in HTML or CSS without a separate HTTP request:

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

background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz...');

This is useful for small icons, inline images in email templates, or self-contained HTML pages.

JWT tokens

JWTs are Base64URL-encoded JSON. The three dots in a JWT (header.payload.signature) are each a Base64URL-encoded segment. Decoding the middle section gives you the claims object. For full JWT inspection — expiry checking, claim rendering, and HMAC signature verification — the JWT Decoder guide walks through the complete workflow.

Storing binary data in databases

Some databases (older MySQL versions, simple key-value stores) don’t handle binary columns well. Base64-encoding binary data before storing it makes the data compatible with any text column.

Environment variables and configuration

Binary secrets (cryptographic keys, certificates) are often Base64-encoded for storage in environment variables, which are text-only. If you’re working with HMAC secrets for webhook verification or JWT signing, the Hash Generator guide covers how HMACs are constructed on top of hashing algorithms — and how to verify them directly in the browser.

JWT_SECRET=dGhpcyBpcyBhIHNlY3JldA==

Base64 vs. Base64URL

Standard Base64 uses + and / as the 62nd and 63rd characters. These characters have special meaning in URLs:

• + is interpreted as a space in query strings
• / is interpreted as a path separator

Base64URL (RFC 4648 §5) solves this by substituting:

• + → -
• / → _

And removing the = padding.

When to use which:

• Embedding in JSON, email, or file content: Standard Base64
• Query strings, URL fragments, HTTP headers, JWT tokens, file names: Base64URL

For everyday query parameter values — names, IDs, search terms — percent-encoding is more appropriate than Base64. The URL Encoder guide explains the difference between component and full URL encoding and when each applies.

The ByteKiln encoder has a “Base64URL mode” toggle that switches between the two variants.

Encoding Files

Text input is straightforward — type or paste and encode. Files are more interesting.

Encoding a file

The file tab accepts any file via drag-and-drop or click-to-upload. The file is read entirely in-browser using the FileReader API and encoded to Base64. Nothing leaves your machine.

You get:

• The Base64 string — copy it to use in JSON, a script, a database
• The data URI — the full data:mime/type;base64,<data> string ready to use in HTML or CSS

Image preview

For image files (PNG, JPEG, GIF, SVG, WebP), the tool shows a preview of the image alongside the encoded output. This confirms you’ve encoded the right file and shows you what the data URI would render as.

File size considerations

Base64 is 33% larger than the original file. For small files (icons, logos, small images), the inline data URI approach is efficient — you save an HTTP round-trip. For larger files (photographs, audio, video), the size overhead becomes significant:

For large files, serve them as separate assets. Use inline data URIs for small, frequently-needed assets.

Decoding Base64

Decoding reverses the process. Paste a Base64 string and toggle to “Decode” to get the original text.

Common decode use cases:

Inspect a JWT payload. Take the middle segment of a JWT (between the first and second .) and decode it to see the claims object. (The JWT Decoder tool does this automatically and is more convenient for JWT-specific inspection.)

Read a data URI. Strip the data:mime;base64, prefix and decode to see the binary — or if it’s text-based SVG, XML, or JSON, to read the content.

Decode an API field. Some APIs Base64-encode certain fields (content bodies, binary attachments, encoded identifiers). Decode them to see the actual value.

Decode environment variable values. If a secret is Base64-encoded, decode it to verify it contains what you expect.

Unicode and Encoding Safety

Standard JavaScript btoa() and atob() functions only handle ASCII characters (byte values 0–255). Unicode characters (emoji, accented characters, CJK) have code points above 255 and will throw an error if you try to pass them directly.

The ByteKiln encoder handles Unicode-safe encoding by converting the input to UTF-8 bytes first. For example:

Input: "Hello 🌍"
UTF-8 bytes: 48 65 6C 6C 6F 20 F0 9F 8C 8D
Base64: SGVsbG8g8J+MjQ==

Decoding this correctly requires interpreting the bytes as UTF-8 on the decode side. The tool handles this consistently.

Base64 Is Not Encryption

This is worth repeating: Base64 does not provide security. Anyone can decode it with a single function call. It provides zero confidentiality.

If you need to keep data secret, use encryption (AES, RSA, etc.) or a cryptographic hash. Base64 is for representation, not protection. A common mistake is storing passwords or tokens as Base64 in a database under the assumption that they’re “encoded” — they’re not protected at all.

The Base64 encoder/decoder is one of those tools you don’t think about until you need it, and then you need it constantly. Understanding when to use standard Base64 vs. Base64URL, and how to handle files vs. text, will save you debugging time when a payload doesn’t decode correctly.