What Is Base64 Encoding and How to Use It - Complete Guide

Published May 18, 2026 - 8 min read
Back to Base64 Encode Decode Tool

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It converts any data - text, images, files - into a string of 64 different characters (A-Z, a-z, 0-9, +, /) plus the "=" padding character.

It was originally designed for use in email (MIME) to ensure that binary file attachments could survive transit through text-only systems like SMTP. Today it is a fundamental part of the web - used in data URIs, JWT tokens, API authentication, CSS images, and more.

How Base64 Works Under the Hood

Base64 works by taking binary data and processing it in 3-byte (24-bit) chunks. Here is the step-by-step breakdown:

  1. Split: Divide the binary data into groups of 3 bytes (24 bits).
  2. Re-group: Split those 24 bits into four 6-bit groups (6 x 4 = 24).
  3. Map: Each 6-bit value (0-63) is mapped to a character in the Base64 alphabet.
  4. Pad: If the input size is not divisible by 3, padding "=" characters are added to make the output length a multiple of 4.

For example, the string Man (3 bytes: M=77, a=97, n=110) becomes:

TWFu

Each input byte provides 8 bits. 3 x 8 = 24 bits. Split into 4 x 6 bits. The six-bit values 19, 22, 5, 46 map to T, W, F, u in the Base64 alphabet.

The Base64 Alphabet

ValueCharValueCharValueCharValueChar
0A16Q32g48w
1B17R33h49x
2C18S34i50y
3D19T35j51z
4E20U36k520
5F21V37l531
6G22W38m542
7H23X39n553
8I24Y40o564
9J25Z41p575
10K26a42q586
11L27b43r597
12M28c44s608
13N29d45t619
14O30e46u62+
15P31f47v63/

Common Use Cases for Base64

1. Data URIs in HTML and CSS

One of the most common uses of Base64 on the web is embedding small images directly in HTML or CSS as data URIs. Instead of an HTTP request for an image file, the image data is encoded in Base64 and placed directly in the source code:

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

This eliminates an HTTP request, which can improve load times for small icons and graphics. However, Base64-encoded data is about 33% larger than the original binary, so it is best used for files under 10KB.

2. Email Attachments (MIME)

The original application of Base64. When you send an email with an attachment, that file is typically encoded in Base64 and embedded in the email body. This ensures the binary data survives transit through text-only email servers.

3. JWT (JSON Web Tokens)

JWT tokens use a URL-safe variant called Base64URL to encode the header, payload, and signature. A JWT looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNqPZAmYgCgP

Each segment between the dots is Base64URL-encoded JSON. You can use our Base64 Decode tool to inspect JWT payloads.

4. API Authentication Tokens

Basic HTTP Authentication uses Base64 to encode the username:password pair. The browser sends a header like:

Authorization: Basic dXNlcjpwYXNz

Important: Base64 is not encryption. Anyone can decode it instantly. Always use HTTPS with Basic Auth.

5. Storing Binary Data in Text Formats

Base64 is used to include binary data in JSON, XML, or YAML - formats that only support text. For example, storing a thumbnail image in a JSON API response:

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

Base64 vs Base64URL: What is the Difference?

Standard Base64 uses +, /, and = characters. These cause problems in URLs and filenames because:

  • + is interpreted as a space in URL query strings
  • / is a path separator
  • = is used for query parameters

Base64URL solves this by replacing:

  • + becomes - (minus)
  • / becomes _ (underscore)
  • Trailing = is stripped (padding removed)

Is Base64 Secure?

No. Base64 is not encryption. It is encoding. There is no secret key involved - anyone who sees a Base64 string can decode it in milliseconds using tools like this one.

Never use Base64 to protect sensitive information like passwords, credit card numbers, or private keys. For security, use proper encryption (AES, RSA) and always transmit over HTTPS.

Performance Considerations

  • Size increase: Base64 output is approximately 33% larger than the original binary data.
  • CPU cost: Encoding/decoding has a small CPU overhead - fine for small data, but avoid encoding large files (megabytes) in the browser.
  • Caching: Data URIs are not cached separately from the HTML/CSS that contains them. For images used on multiple pages, separate files with HTTP caching are better.
  • Gzip: Base64 text compresses well with gzip, which often negates the 33% size penalty when served over HTTP.

How to Encode and Decode Base64

You can use our free online Base64 encoder/decoder - it works entirely in your browser with no server uploads. Or use one of these code snippets:

JavaScript (Browser)

// Encode
const encoded = btoa('Hello, World!');
// "SGVsbG8sIFdvcmxkIQ=="

// Decode
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');
// "Hello, World!"

Node.js

// Encode
const encoded = Buffer.from('Hello, World!').toString('base64');
// "SGVsbG8sIFdvcmxkIQ=="

// Decode
const decoded = Buffer.from('SGVsbG8sIFdvcmxkIQ==', 'base64').toString();
// "Hello, World!"

Python

import base64
# Encode
encoded = base64.b64encode(b"Hello, World!").decode()
# "SGVsbG8sIFdvcmxkIQ=="
# Decode
decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==").decode()
# "Hello, World!"

When Should You NOT Use Base64?

  • For large files: Base64 encoding large files (MB+) adds significant size and processing overhead. It is better to serve files separately.
  • For security: Base64 is not encryption. Anyone can decode it.
  • For binary protocols: If you control both ends of a connection, using pure binary (e.g., Protocol Buffers, MessagePack) is more efficient.
  • For caching: Data URIs can not be cached independently. If an image appears on multiple pages, serve it as a separate file.

Conclusion

Base64 is an essential tool for every developer. It solves a specific problem - representing binary data in text-based formats - and it does it well. Whether you are embedding images in HTML, inspecting JWT tokens, or building APIs, understanding Base64 will make you more effective.

Bookmark our free Base64 encoder/decoder for quick conversions, and check out our other developer tools:

Try our free online tools:

Base64 Encode/Decode

Unix Timestamp Converter