February 14, 2026•18 min read•ToolBox Team

Base64 Encoding Explained: What It Is and When to Use It

tutorialencodingdeveloper-tools

This guide has a free tool → Open AES Encryption

# Base64 Encoding Explained: What It Is and When to Use It

What Is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters. It takes any data - images, files, binary blobs, arbitrary bytes - and converts it into a string of letters, numbers, and a few symbols that can safely travel through text-based systems.

The name comes from the 64-character alphabet it uses:

A-Z (26 uppercase letters)
a-z (26 lowercase letters)
0-9 (10 digits)
+ and / (2 symbols)
= used for padding

These 64 characters are chosen specifically because they are safe in virtually every text-handling system: email, HTTP headers, HTML attributes, JSON strings, XML, and URLs (with some caveats for the last one).

---

AES Encryption Tool

Free online AES encryption tool - encrypt and decrypt text using AES-256 encryption

Hash Generator

Free online hash generator - generate MD5, SHA-1, SHA-256 hashes from any input text

Base64 Encoder/Decoder

Base64 encode and decode online - convert text to Base64 or decode Base64 strings instantly, free

The Core Problem Base64 Solves

Before understanding Base64, you need to understand why it exists. The answer is: because many systems and protocols are designed to handle text, not arbitrary binary data.

Email (SMTP) was originally designed as a pure text protocol. The original specification allowed only 7-bit ASCII characters and limited line lengths. If you tried to send a raw binary file (like a JPEG image) through this system, the binary bytes that happened to be control characters (carriage returns, null bytes, escape sequences) would be misinterpreted or stripped, corrupting the file.

HTTP headers are text-based. Embedding binary credentials or tokens directly in headers would create parsing problems.

XML and JSON are text formats. They cannot natively represent binary data without encoding it somehow.

Databases often have text fields that are more portable than binary fields. Storing small binary blobs as text can simplify cross-system compatibility.

Base64 solves all of these by converting binary into a set of characters that every text system handles safely. The data can travel through any text-based channel and arrive uncorrupted, then be decoded back to the original binary on the other end.

---

How Base64 Encoding Works

Base64 works by taking every 3 bytes (24 bits) of binary input and splitting them into 4 groups of 6 bits each. Each 6-bit group maps to one of the 64 characters in the Base64 alphabet.

Why 6 bits? Because 2^6 = 64, which is exactly the size of the alphabet. Each 6-bit value (0-63) maps cleanly to one character.

Step-by-Step Example

Let us encode the word "Man":

Step 1: Get ASCII values
  M = 77, a = 97, n = 110

Step 2: Convert to binary (8 bits each)
  M: 01001101
  a: 01100001
  n: 01101110

Step 3: Concatenate the 24 bits
  010011010110000101101110

Step 4: Split into four 6-bit groups
  010011 | 010110 | 000101 | 101110

Step 5: Convert each 6-bit group to decimal
  19, 22, 5, 46

Step 6: Map each decimal to the Base64 alphabet
  19 = T
  22 = W
   5 = F
  46 = u

Result: TWFu

This is correct. Try it: btoa("Man") in a browser console returns "TWFu".

The Base64 Alphabet Table

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Padding with =

Base64 processes input in 3-byte chunks. When the input length is not a multiple of 3, the last chunk needs padding to complete the 4-character output block:

1 leftover byte (8 bits): encode into 2 Base64 characters, add ==
2 leftover bytes (16 bits): encode into 3 Base64 characters, add =
0 leftover bytes: no padding needed

"Hi" = 2 bytes (not divisible by 3)
H: 01001000
i: 01101001

Padded to 24 bits: 010010000110100100000000

Split into 6-bit groups: 010010 | 000110 | 100100 | 000000
Decimal:                    18       6       36      (padding)
Character:                   S       G        k       =

Result: SGk=

The = padding characters tell the decoder how many bytes were in the last chunk so it can reconstruct the original data exactly.

The Size Overhead

Base64 encoding increases data size by approximately 33%. The math: 3 bytes in become 4 characters out. Plus, some implementations add line breaks every 76 characters (a legacy MIME requirement), adding a tiny additional overhead.

3 bytes input → 4 characters output
100 bytes input → ~133 characters output
1 MB input → ~1.33 MB output
10 MB input → ~13.3 MB output

This overhead is the fundamental trade-off of Base64. You gain text-safe transmission at the cost of 33% more data.

---

Common Use Cases

Data URIs

Embed small images directly in HTML or CSS, eliminating a separate HTTP request for the image file.

In HTML:

html

<!-- Small inline icon as Base64 PNG -->
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
  alt="1x1 pixel"
  width="1"
  height="1"
/>

<!-- The format is: data:[media-type];base64,[data] -->

In CSS:

css

.icon-search {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuNSAxNGgtLjc5bC0uMjgtLjI3QTE2LjUgMTYuNSAwIDAgMCAxNiAxMC41IDYuNSA2LjUgMCAxIDAgOS41IDE3YzEuNjEgMCAzLjA5LS41OSA0LjIzLTEuNTdsLjI3LjI4di43OWw1IDQuOTlMMjAuNDkgMTlsLTQuOTktNXptLTYgMEM3LjAxIDE0IDUgMTEuOTkgNSA5LjVTNy4wMSA1IDkuNSA1IDE0IDcuMDEgMTQgOS41IDExLjk5IDE0IDkuNSAxNHoiLz48L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
}

When data URIs are beneficial:

Images under approximately 2KB where the HTTP request overhead exceeds the Base64 size overhead
Images used on every page load so caching is less relevant
Icons embedded in CSS that are served as part of a cached stylesheet
Email templates where external image references may be blocked

When to avoid data URIs:

Images over 2-5KB (the 33% overhead outweighs the HTTP request savings)
Images used on only one or a few pages (cached separately as files is more efficient)
Critical images (data URIs cannot be cached independently from the document)

HTTP Basic Authentication

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

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

That value decodes to username:password (the username and password joined with a colon, then Base64-encoded).

javascript

// Generating a Basic Auth header in JavaScript
const username = "alice";
const password = "correcthorsebatterystaple";
const credentials = btoa(`${username}:${password}`);
const header = `Basic ${credentials}`;
// "Basic YWxpY2U6Y29ycmVjdGhvcnNlYmF0dGVyeXN0YXBsZQ=="

Critical security note: Base64 is encoding, not encryption. The credentials are trivially recoverable by anyone who can see the header:

javascript

// Anyone can do this
atob("YWxpY2U6Y29ycmVjdGhvcnNlYmF0dGVyeXN0YXBsZQ==");
// "alice:correcthorsebatterystaple"

HTTP Basic Authentication must only be used over HTTPS. Without TLS, the credentials are transmitted in plain text as far as any network observer is concerned.

JSON Web Tokens (JWTs)

JWTs are the most common modern use of Base64 encoding that developers encounter. A JWT consists of three parts separated by dots:

header.payload.signature

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.
eyJzdWIiOiJ1c3JfMTIzNDU2IiwibmFtZSI6IkFsaWNlIiwicm9sZXMiOlsiYWRtaW4iXSwiaWF0IjoxNzA5MDAwMDAwLCJleHAiOjE3MDkwMDM2MDB9
.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

The header and payload are Base64URL-encoded JSON. Decoding them reveals the token's contents:

json

// Header (decoded)
{
  "alg": "HS256",
  "typ": "JWT"
}

// Payload (decoded)
{
  "sub": "usr_123456",
  "name": "Alice",
  "roles": ["admin"],
  "iat": 1709000000,
  "exp": 1709003600
}

The signature is a cryptographic hash that verifies the token has not been tampered with. Unlike the header and payload, the signature cannot be decoded without the secret key.

Base64URL vs. Standard Base64:

JWTs use Base64URL, a URL-safe variant of Base64 that makes two changes:

+ is replaced with -
/ is replaced with _
Padding characters (=) are typically omitted

This makes the token safe to use directly in URLs and HTTP headers without percent-encoding.

javascript

// Standard Base64
const standard = btoa("Hello+World/Test=");
// "SGVsbG8rV29ybGQvVGVzdD0="

// Base64URL (URL-safe variant)
const base64url = btoa("Hello+World/Test=")
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=/g, '');
// "SGVsbG8rV29ybGQvVGVzdD0"

Email Attachments (MIME Encoding)

When you send a file attachment via email, your email client Base64-encodes it. The MIME specification defines how this works, and it is the reason you can send any file type through email despite SMTP being a text protocol.

The MIME encoding wraps the Base64 data with headers:

Content-Type: application/pdf; name="document.pdf"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="document.pdf"

JVBERi0xLjQKMSAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZyAvUGFnZXMgMiAwIFIgPj4KZW5k
b2JqCjIgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzIC9LaWRzIFszIDAgUl0gL0NvdW50IDEgPj4K
...

The Content-Transfer-Encoding: base64 header tells the mail client to decode this block as Base64 before presenting it to the user.

Binary Data in JSON and XML

JSON does not natively support binary data types. When an API needs to transfer file contents within a JSON payload, Base64 is the standard approach:

json

{
  "document": {
    "filename": "report.pdf",
    "contentType": "application/pdf",
    "encoding": "base64",
    "data": "JVBERi0xLjQKMSAwIG9iag...",
    "size": 45231,
    "checksum": "sha256:abc123..."
  }
}

This pattern is used by:

GitHub API (returns file contents Base64-encoded)
AWS Lambda event payloads for binary uploads
Twilio API for media message content
Various storage APIs when embedding small files

javascript

// Decoding binary data from a GitHub API response
const response = await fetch('https://api.github.com/repos/owner/repo/contents/file.png');
const data = await response.json();

// data.content is Base64-encoded with newlines
const base64 = data.content.replace(/\n/g, '');
const binaryString = atob(base64);

// Convert to Uint8Array for use as binary
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
  bytes[i] = binaryString.charCodeAt(i);
}
const blob = new Blob([bytes], { type: 'image/png' });
const imageUrl = URL.createObjectURL(blob);

Webhook Signature Verification

Many webhook providers sign their payloads using HMAC-SHA256 and include the signature Base64-encoded in a header. Verifying this signature confirms the webhook came from the legitimate sender:

javascript

// Stripe webhook signature verification pattern
const crypto = require('crypto');

function verifyWebhookSignature(payload, signature, secret) {
  // Stripe includes timestamp + payload hash in the signature header
  const [timestamp, sig] = signature.split(',').reduce((acc, part) => {
    const [key, value] = part.split('=');
    if (key === 't') acc[0] = value;
    if (key === 'v1') acc[1] = value;
    return acc;
  }, [null, null]);

  const signedPayload = `${timestamp}.${payload}`;
  const expectedSig = crypto
    .createHmac('sha256', secret)
    .update(signedPayload)
    .digest('hex');  // Note: hex here, some providers use base64

  return crypto.timingSafeEqual(
    Buffer.from(sig, 'hex'),
    Buffer.from(expectedSig, 'hex')
  );
}

Configuration and Secrets Management

Some configuration systems store credentials or certificates as Base64 strings for portability. Kubernetes secrets, for example, store data as Base64:

yaml

# Kubernetes Secret
apiVersion: v1
kind: Secret
metadata:
  name: my-database-secret
type: Opaque
data:
  # Values must be Base64-encoded
  username: YWRtaW4=          # "admin"
  password: c3VwZXJzZWNyZXQ=  # "supersecret"
  connection-string: cG9zdGdyZXM6Ly9hZG1pbjpzdXBlcnNlY3JldEBkYi5leGFtcGxlLmNvbTo1NDMyL215ZGI=

The encoding is not for security. It is so that the YAML can safely contain any characters, including special characters that might be misinterpreted in a YAML string.

---

Base64 in Code: Language Reference

JavaScript (Browser)

javascript

// Basic text encoding/decoding
const encoded = btoa("Hello, World!");   // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");  // "Hello, World!"

// WARNING: btoa() only handles Latin-1 characters
// For UTF-8 strings (non-ASCII characters like emoji or Chinese), use this:
function encodeUTF8(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
function decodeUTF8(str) {
  return decodeURIComponent(escape(atob(str)));
}

encodeUTF8("Hello, 世界!");   // Handles multi-byte characters
encodeUTF8("Café ☕");        // Works with accented characters and emoji

// Modern alternative using TextEncoder (cleaner)
function encodeToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = Array.from(bytes, (byte) =>
    String.fromCodePoint(byte)
  ).join("");
  return btoa(binString);
}

JavaScript (Node.js)

javascript

// Node.js Buffer-based encoding
const encoded = Buffer.from("Hello, World!").toString("base64");
// "SGVsbG8sIFdvcmxkIQ=="

const decoded = Buffer.from("SGVsbG8sIFdvcmxkIQ==", "base64").toString("utf-8");
// "Hello, World!"

// File to Base64
const fs = require('fs');
const fileContent = fs.readFileSync('./image.png');
const base64String = fileContent.toString('base64');

// Base64 to file
const base64Data = "iVBORw0KGgoAAAANSUhEUg...";
const buffer = Buffer.from(base64Data, 'base64');
fs.writeFileSync('./output.png', buffer);

// Base64URL encoding (URL-safe, no padding)
function toBase64URL(str) {
  return Buffer.from(str)
    .toString('base64')
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

function fromBase64URL(str) {
  const padded = str + '='.repeat((4 - str.length % 4) % 4);
  return Buffer.from(padded.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString();
}

Python

python

import base64

# Basic encoding
encoded = base64.b64encode(b"Hello, World!")
# b'SGVsbG8sIFdvcmxkIQ=='

# Decode bytes to string
encoded_str = encoded.decode('utf-8')
# 'SGVsbG8sIFdvcmxkIQ=='

# Basic decoding
decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==")
# b'Hello, World!'
decoded_str = decoded.decode('utf-8')
# 'Hello, World!'

# Encoding with UTF-8 strings (not just bytes)
text = "Café ☕"
encoded = base64.b64encode(text.encode('utf-8')).decode('utf-8')
decoded = base64.b64decode(encoded).decode('utf-8')

# File encoding
with open('image.png', 'rb') as f:
    file_bytes = f.read()
    encoded = base64.b64encode(file_bytes).decode('utf-8')

# URL-safe Base64
url_safe_encoded = base64.urlsafe_b64encode(b"Hello+World/Test")
# b'SGVsbG8rV29ybGQvVGVzdA=='
url_safe_decoded = base64.urlsafe_b64decode(url_safe_encoded)

PHP

php

<?php
// Basic encoding
$encoded = base64_encode("Hello, World!");
// "SGVsbG8sIFdvcmxkIQ=="

// Basic decoding
$decoded = base64_decode("SGVsbG8sIFdvcmxkIQ==");
// "Hello, World!"

// File encoding
$fileContent = file_get_contents('image.png');
$encoded = base64_encode($fileContent);
$dataUri = 'data:image/png;base64,' . $encoded;

// URL-safe Base64
function base64url_encode($data) {
    return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}

function base64url_decode($data) {
    return base64_decode(strtr($data, '-_', '+/'));
}

Bash / Command Line

bash

# Encode text
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==

# Decode text
echo "SGVsbG8sIFdvcmxkIQ==" | base64 -d
# Hello, World!

# Encode a file
base64 image.png > image.b64
base64 document.pdf > document.b64

# Decode a file
base64 -d image.b64 > image_restored.png

# One-liner to create a data URI for a small image
echo "data:image/png;base64,$(base64 -w 0 small-icon.png)"
# -w 0 disables line wrapping

# On macOS, use -b 0 instead of -w 0
echo "data:image/png;base64,$(base64 -b 0 small-icon.png)"

Go

package main

import (
    "encoding/base64"
    "fmt"
)

func main() {
    // Encode
    input := []byte("Hello, World!")
    encoded := base64.StdEncoding.EncodeToString(input)
    fmt.Println(encoded) // "SGVsbG8sIFdvcmxkIQ=="

    // Decode
    decoded, err := base64.StdEncoding.DecodeString("SGVsbG8sIFdvcmxkIQ==")
    if err != nil {
        panic(err)
    }
    fmt.Println(string(decoded)) // "Hello, World!"

    // URL-safe encoding (for JWTs and URL parameters)
    urlEncoded := base64.URLEncoding.EncodeToString(input)
    urlDecoded, _ := base64.URLEncoding.DecodeString(urlEncoded)

    // URL-safe without padding (common in JWTs)
    noPadding := base64.RawURLEncoding.EncodeToString(input)
}

---

What Base64 Is NOT

Not Encryption

This is the most important misconception to address. Base64 is encoding, not encryption. The difference is fundamental:

Encoding transforms data into another format. It is reversible with no key. Anyone who knows the scheme can reverse it.
Encryption uses a secret key to transform data so that only parties with the key can reverse it.

Base64 provides zero security. A Base64-encoded string is as readable as plain text to anyone who knows what Base64 is (which is every developer).

javascript

// This is NOT security
const "obfuscated" = btoa("my-secret-password");
// "bXktc2VjcmV0LXBhc3N3b3Jk"

// This takes approximately 0.1 seconds to reverse
const exposed = atob("bXktc2VjcmV0LXBhc3N3b3Jk");
// "my-secret-password"

If you need to protect sensitive data, use actual encryption:

For data at rest: AES-256 encryption (the AES Encryption tool on ToolBox)
For passwords: bcrypt, Argon2, or scrypt (never reversible encoding)
For data in transit: TLS/HTTPS (wraps all your HTTP traffic)

Not Compression

Base64 makes data larger, not smaller. It increases size by approximately 33%. If you need to reduce data size, use actual compression (gzip, brotli, zstd).

Not Hashing

Hashing is one-way. You can hash a file, but you cannot unhash it. Base64 is completely reversible. If you need to verify file integrity or store passwords, use a hash function (SHA-256, bcrypt, etc.) not Base64. The Hash Generator on ToolBox can compute SHA-256 and other hashes.

---

When to Use Base64 vs. Alternatives

Scenario	Use Base64?	Better Alternative
Transmitting binary over text protocols	Yes	n/a - this is the purpose
Small images in HTML/CSS	Yes, if under ~2KB	File reference for larger images
File uploads from browser	No	`multipart/form-data`
Storing passwords	Never	bcrypt, Argon2, scrypt
Hiding sensitive data	Never	Actual encryption
Compressing data	No	gzip, brotli
Securing API tokens	No	HTTPS + bearer tokens
JWT header and payload	Yes (required by spec)	n/a - this is how JWTs work
Binary in JSON payload	Yes	Consider multipart/form-data for large files
Email attachments	Yes (required by MIME)	n/a - this is how email works

---

Identifying Base64 in the Wild

Base64-encoded strings are recognizable by their patterns:

Visual clues:

Only contains A-Z, a-z, 0-9, +, /, and =
Length is always a multiple of 4 (due to padding)
Ends with zero, one, or two = characters
Has no spaces, newlines, or special characters (unless it is MIME-formatted with line breaks)

Common lengths:

MD5 hash as Base64: 24 characters (ending in ==)
SHA-1 hash as Base64: 28 characters (ending in =)
SHA-256 hash as Base64: 44 characters (ending in =)
UUIDs are not Base64 - they contain hyphens

A quick decode test: If you see a string that looks like SGVsbG8gV29ybGQ= and wonder what it is, paste it into a Base64 decoder. If it decodes to readable text, it was Base64-encoded text. If it decodes to binary gibberish, it was Base64-encoded binary data.

---

Base64 and Data URIs in Practice

Here is a complete workflow for embedding a small SVG icon in a stylesheet using Base64:

bash

# Start with an SVG file
cat icon-close.svg
# <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/></svg>

# Encode it
base64 -w 0 icon-close.svg
# PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDZMNiAxOE02IDZsMTIgMTIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=

css

/* Use in CSS */
.btn-close {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDZMNiAxOE02IDZsMTIgMTIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  border: none;
  cursor: pointer;
}

Note: for SVGs specifically, you can often skip Base64 entirely and use a URL-encoded SVG directly, which is slightly smaller:

css

/* URL-encoded SVG (no Base64 needed) */
.btn-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
}

This avoids the 33% Base64 overhead for SVGs specifically, since SVGs are already text.

---

Decoding Base64 Quickly for Debugging

When debugging API responses, authentication headers, or JWT payloads, you often need to quickly decode a Base64 string to see what is inside. Doing this in a browser console is fine for quick checks:

javascript

// Quick decode in browser console
atob("SGVsbG8gV29ybGQ=");
// "Hello World"

// For JWT payload section (the middle part between dots)
const jwtPayload = "eyJzdWIiOiJ1c3JfMTIzIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNzA5MDAwMDAwfQ";
JSON.parse(atob(jwtPayload));
// {sub: "usr_123", name: "Alice", iat: 1709000000}

But for anything involving tokens, authentication data, or anything sensitive, you should use a client-side tool rather than pasting into a random website. The Base64 Encoder/Decoder on ToolBox processes everything in your browser. Your data is never sent to a server.

---

Try It Yourself

The Base64 Encoder/Decoder on ToolBox gives you:

Instant text-to-Base64 and Base64-to-text conversion as you type
Correct UTF-8 handling for non-ASCII characters (accents, emoji, non-Latin scripts)
File-to-Base64 conversion: drag and drop any file to get its Base64 representation
Instant data URI generation for images
Standard Base64 and URL-safe Base64URL modes
Everything runs in your browser - no server, no tracking, no data retention

The next time you need to embed a small SVG in your CSS, decode an Authorization header to debug an API issue, inspect a JWT payload, or verify what a Base64 blob in an API response actually contains, you have a tool ready without copy-pasting into a random website or writing a quick console snippet.

Visit toolbox-kit.com/tools/base64 to encode or decode Base64 in seconds. If you are also working with authentication tokens, the JWT Decoder handles the Base64URL decoding for you and presents the header and payload as formatted JSON. For general data integrity and hashing, the Hash Generator complements Base64 when you need one-way verification rather than reversible encoding.

Related Tools

Free, private, no signup required

JSON Formatter

JSON formatter and validator online - format, beautify, and validate JSON data instantly in your browser

Try it

Regex Tester

Free online regex tester - test and debug regular expressions with live matching and highlights

Try it

Text Diff Checker

Free online text diff checker - compare two texts and see the differences highlighted line by line

Try it

Code Formatter

Free online code formatter - beautify and format JavaScript, CSS, HTML, and more

Try it

Share this post

16 min read

URL Encoding Explained: A Developer's Complete Guide

urlencoding

17 min read

How to Write Better Git Commit Messages (With Examples)

gitdeveloper-tools

16 min read

How to Build and Test HTTP Requests Without Writing Code

httpapi

Want higher limits, batch processing, and AI tools?

See Pro Features Explore Free Tools

Back to Blog

February 14, 2026•18 min read•ToolBox Team

Base64 Encoding Explained: What It Is and When to Use It

tutorialencodingdeveloper-tools

This guide has a free tool → Open AES Encryption

# Base64 Encoding Explained: What It Is and When to Use It

What Is Base64?

The name comes from the 64-character alphabet it uses:

A-Z (26 uppercase letters)
a-z (26 lowercase letters)
0-9 (10 digits)
+ and / (2 symbols)
= used for padding

---

AES Encryption Tool

Free online AES encryption tool - encrypt and decrypt text using AES-256 encryption

Hash Generator

Free online hash generator - generate MD5, SHA-1, SHA-256 hashes from any input text

Base64 Encoder/Decoder

Base64 encode and decode online - convert text to Base64 or decode Base64 strings instantly, free

The Core Problem Base64 Solves

Before understanding Base64, you need to understand why it exists. The answer is: because many systems and protocols are designed to handle text, not arbitrary binary data.

HTTP headers are text-based. Embedding binary credentials or tokens directly in headers would create parsing problems.

XML and JSON are text formats. They cannot natively represent binary data without encoding it somehow.

Databases often have text fields that are more portable than binary fields. Storing small binary blobs as text can simplify cross-system compatibility.

---

How Base64 Encoding Works

Base64 works by taking every 3 bytes (24 bits) of binary input and splitting them into 4 groups of 6 bits each. Each 6-bit group maps to one of the 64 characters in the Base64 alphabet.

Why 6 bits? Because 2^6 = 64, which is exactly the size of the alphabet. Each 6-bit value (0-63) maps cleanly to one character.

Step-by-Step Example

Let us encode the word "Man":

Step 1: Get ASCII values
  M = 77, a = 97, n = 110

Step 2: Convert to binary (8 bits each)
  M: 01001101
  a: 01100001
  n: 01101110

Step 3: Concatenate the 24 bits
  010011010110000101101110

Step 4: Split into four 6-bit groups
  010011 | 010110 | 000101 | 101110

Step 5: Convert each 6-bit group to decimal
  19, 22, 5, 46

Step 6: Map each decimal to the Base64 alphabet
  19 = T
  22 = W
   5 = F
  46 = u

Result: TWFu

This is correct. Try it: btoa("Man") in a browser console returns "TWFu".

The Base64 Alphabet Table

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Padding with =

Base64 processes input in 3-byte chunks. When the input length is not a multiple of 3, the last chunk needs padding to complete the 4-character output block:

1 leftover byte (8 bits): encode into 2 Base64 characters, add ==
2 leftover bytes (16 bits): encode into 3 Base64 characters, add =
0 leftover bytes: no padding needed

"Hi" = 2 bytes (not divisible by 3)
H: 01001000
i: 01101001

Padded to 24 bits: 010010000110100100000000

Split into 6-bit groups: 010010 | 000110 | 100100 | 000000
Decimal:                    18       6       36      (padding)
Character:                   S       G        k       =

Result: SGk=

The = padding characters tell the decoder how many bytes were in the last chunk so it can reconstruct the original data exactly.

The Size Overhead

3 bytes input → 4 characters output
100 bytes input → ~133 characters output
1 MB input → ~1.33 MB output
10 MB input → ~13.3 MB output

This overhead is the fundamental trade-off of Base64. You gain text-safe transmission at the cost of 33% more data.

---

Common Use Cases

Data URIs

Embed small images directly in HTML or CSS, eliminating a separate HTTP request for the image file.

In HTML:

html

<!-- Small inline icon as Base64 PNG -->
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
  alt="1x1 pixel"
  width="1"
  height="1"
/>

<!-- The format is: data:[media-type];base64,[data] -->

In CSS:

css

.icon-search {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuNSAxNGgtLjc5bC0uMjgtLjI3QTE2LjUgMTYuNSAwIDAgMCAxNiAxMC41IDYuNSA2LjUgMCAxIDAgOS41IDE3YzEuNjEgMCAzLjA5LS41OSA0LjIzLTEuNTdsLjI3LjI4di43OWw1IDQuOTlMMjAuNDkgMTlsLTQuOTktNXptLTYgMEM3LjAxIDE0IDUgMTEuOTkgNSA5LjVTNy4wMSA1IDkuNSA1IDE0IDcuMDEgMTQgOS41IDExLjk5IDE0IDkuNSAxNHoiLz48L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
}

When data URIs are beneficial:

Images under approximately 2KB where the HTTP request overhead exceeds the Base64 size overhead
Images used on every page load so caching is less relevant
Icons embedded in CSS that are served as part of a cached stylesheet
Email templates where external image references may be blocked

When to avoid data URIs:

Images over 2-5KB (the 33% overhead outweighs the HTTP request savings)
Images used on only one or a few pages (cached separately as files is more efficient)
Critical images (data URIs cannot be cached independently from the document)

HTTP Basic Authentication

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

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

That value decodes to username:password (the username and password joined with a colon, then Base64-encoded).

javascript

// Generating a Basic Auth header in JavaScript
const username = "alice";
const password = "correcthorsebatterystaple";
const credentials = btoa(`${username}:${password}`);
const header = `Basic ${credentials}`;
// "Basic YWxpY2U6Y29ycmVjdGhvcnNlYmF0dGVyeXN0YXBsZQ=="

Critical security note: Base64 is encoding, not encryption. The credentials are trivially recoverable by anyone who can see the header:

javascript

// Anyone can do this
atob("YWxpY2U6Y29ycmVjdGhvcnNlYmF0dGVyeXN0YXBsZQ==");
// "alice:correcthorsebatterystaple"

HTTP Basic Authentication must only be used over HTTPS. Without TLS, the credentials are transmitted in plain text as far as any network observer is concerned.

JSON Web Tokens (JWTs)

JWTs are the most common modern use of Base64 encoding that developers encounter. A JWT consists of three parts separated by dots:

header.payload.signature

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.
eyJzdWIiOiJ1c3JfMTIzNDU2IiwibmFtZSI6IkFsaWNlIiwicm9sZXMiOlsiYWRtaW4iXSwiaWF0IjoxNzA5MDAwMDAwLCJleHAiOjE3MDkwMDM2MDB9
.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

The header and payload are Base64URL-encoded JSON. Decoding them reveals the token's contents:

json

// Header (decoded)
{
  "alg": "HS256",
  "typ": "JWT"
}

// Payload (decoded)
{
  "sub": "usr_123456",
  "name": "Alice",
  "roles": ["admin"],
  "iat": 1709000000,
  "exp": 1709003600
}

The signature is a cryptographic hash that verifies the token has not been tampered with. Unlike the header and payload, the signature cannot be decoded without the secret key.

Base64URL vs. Standard Base64:

JWTs use Base64URL, a URL-safe variant of Base64 that makes two changes:

+ is replaced with -
/ is replaced with _
Padding characters (=) are typically omitted

This makes the token safe to use directly in URLs and HTTP headers without percent-encoding.

javascript

// Standard Base64
const standard = btoa("Hello+World/Test=");
// "SGVsbG8rV29ybGQvVGVzdD0="

// Base64URL (URL-safe variant)
const base64url = btoa("Hello+World/Test=")
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=/g, '');
// "SGVsbG8rV29ybGQvVGVzdD0"

Email Attachments (MIME Encoding)

The MIME encoding wraps the Base64 data with headers:

Content-Type: application/pdf; name="document.pdf"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="document.pdf"

JVBERi0xLjQKMSAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZyAvUGFnZXMgMiAwIFIgPj4KZW5k
b2JqCjIgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzIC9LaWRzIFszIDAgUl0gL0NvdW50IDEgPj4K
...

The Content-Transfer-Encoding: base64 header tells the mail client to decode this block as Base64 before presenting it to the user.

Binary Data in JSON and XML

JSON does not natively support binary data types. When an API needs to transfer file contents within a JSON payload, Base64 is the standard approach:

json

{
  "document": {
    "filename": "report.pdf",
    "contentType": "application/pdf",
    "encoding": "base64",
    "data": "JVBERi0xLjQKMSAwIG9iag...",
    "size": 45231,
    "checksum": "sha256:abc123..."
  }
}

This pattern is used by:

GitHub API (returns file contents Base64-encoded)
AWS Lambda event payloads for binary uploads
Twilio API for media message content
Various storage APIs when embedding small files

javascript

// Decoding binary data from a GitHub API response
const response = await fetch('https://api.github.com/repos/owner/repo/contents/file.png');
const data = await response.json();

// data.content is Base64-encoded with newlines
const base64 = data.content.replace(/\n/g, '');
const binaryString = atob(base64);

// Convert to Uint8Array for use as binary
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
  bytes[i] = binaryString.charCodeAt(i);
}
const blob = new Blob([bytes], { type: 'image/png' });
const imageUrl = URL.createObjectURL(blob);

Webhook Signature Verification

Many webhook providers sign their payloads using HMAC-SHA256 and include the signature Base64-encoded in a header. Verifying this signature confirms the webhook came from the legitimate sender:

javascript

// Stripe webhook signature verification pattern
const crypto = require('crypto');

function verifyWebhookSignature(payload, signature, secret) {
  // Stripe includes timestamp + payload hash in the signature header
  const [timestamp, sig] = signature.split(',').reduce((acc, part) => {
    const [key, value] = part.split('=');
    if (key === 't') acc[0] = value;
    if (key === 'v1') acc[1] = value;
    return acc;
  }, [null, null]);

  const signedPayload = `${timestamp}.${payload}`;
  const expectedSig = crypto
    .createHmac('sha256', secret)
    .update(signedPayload)
    .digest('hex');  // Note: hex here, some providers use base64

  return crypto.timingSafeEqual(
    Buffer.from(sig, 'hex'),
    Buffer.from(expectedSig, 'hex')
  );
}

Configuration and Secrets Management

Some configuration systems store credentials or certificates as Base64 strings for portability. Kubernetes secrets, for example, store data as Base64:

yaml

# Kubernetes Secret
apiVersion: v1
kind: Secret
metadata:
  name: my-database-secret
type: Opaque
data:
  # Values must be Base64-encoded
  username: YWRtaW4=          # "admin"
  password: c3VwZXJzZWNyZXQ=  # "supersecret"
  connection-string: cG9zdGdyZXM6Ly9hZG1pbjpzdXBlcnNlY3JldEBkYi5leGFtcGxlLmNvbTo1NDMyL215ZGI=

The encoding is not for security. It is so that the YAML can safely contain any characters, including special characters that might be misinterpreted in a YAML string.

---

Base64 in Code: Language Reference

JavaScript (Browser)

javascript

// Basic text encoding/decoding
const encoded = btoa("Hello, World!");   // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");  // "Hello, World!"

// WARNING: btoa() only handles Latin-1 characters
// For UTF-8 strings (non-ASCII characters like emoji or Chinese), use this:
function encodeUTF8(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
function decodeUTF8(str) {
  return decodeURIComponent(escape(atob(str)));
}

encodeUTF8("Hello, 世界!");   // Handles multi-byte characters
encodeUTF8("Café ☕");        // Works with accented characters and emoji

// Modern alternative using TextEncoder (cleaner)
function encodeToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = Array.from(bytes, (byte) =>
    String.fromCodePoint(byte)
  ).join("");
  return btoa(binString);
}

JavaScript (Node.js)

javascript

// Node.js Buffer-based encoding
const encoded = Buffer.from("Hello, World!").toString("base64");
// "SGVsbG8sIFdvcmxkIQ=="

const decoded = Buffer.from("SGVsbG8sIFdvcmxkIQ==", "base64").toString("utf-8");
// "Hello, World!"

// File to Base64
const fs = require('fs');
const fileContent = fs.readFileSync('./image.png');
const base64String = fileContent.toString('base64');

// Base64 to file
const base64Data = "iVBORw0KGgoAAAANSUhEUg...";
const buffer = Buffer.from(base64Data, 'base64');
fs.writeFileSync('./output.png', buffer);

// Base64URL encoding (URL-safe, no padding)
function toBase64URL(str) {
  return Buffer.from(str)
    .toString('base64')
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

function fromBase64URL(str) {
  const padded = str + '='.repeat((4 - str.length % 4) % 4);
  return Buffer.from(padded.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString();
}

Python

python

import base64

# Basic encoding
encoded = base64.b64encode(b"Hello, World!")
# b'SGVsbG8sIFdvcmxkIQ=='

# Decode bytes to string
encoded_str = encoded.decode('utf-8')
# 'SGVsbG8sIFdvcmxkIQ=='

# Basic decoding
decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==")
# b'Hello, World!'
decoded_str = decoded.decode('utf-8')
# 'Hello, World!'

# Encoding with UTF-8 strings (not just bytes)
text = "Café ☕"
encoded = base64.b64encode(text.encode('utf-8')).decode('utf-8')
decoded = base64.b64decode(encoded).decode('utf-8')

# File encoding
with open('image.png', 'rb') as f:
    file_bytes = f.read()
    encoded = base64.b64encode(file_bytes).decode('utf-8')

# URL-safe Base64
url_safe_encoded = base64.urlsafe_b64encode(b"Hello+World/Test")
# b'SGVsbG8rV29ybGQvVGVzdA=='
url_safe_decoded = base64.urlsafe_b64decode(url_safe_encoded)

PHP

php

<?php
// Basic encoding
$encoded = base64_encode("Hello, World!");
// "SGVsbG8sIFdvcmxkIQ=="

// Basic decoding
$decoded = base64_decode("SGVsbG8sIFdvcmxkIQ==");
// "Hello, World!"

// File encoding
$fileContent = file_get_contents('image.png');
$encoded = base64_encode($fileContent);
$dataUri = 'data:image/png;base64,' . $encoded;

// URL-safe Base64
function base64url_encode($data) {
    return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}

function base64url_decode($data) {
    return base64_decode(strtr($data, '-_', '+/'));
}

Bash / Command Line

bash

# Encode text
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==

# Decode text
echo "SGVsbG8sIFdvcmxkIQ==" | base64 -d
# Hello, World!

# Encode a file
base64 image.png > image.b64
base64 document.pdf > document.b64

# Decode a file
base64 -d image.b64 > image_restored.png

# One-liner to create a data URI for a small image
echo "data:image/png;base64,$(base64 -w 0 small-icon.png)"
# -w 0 disables line wrapping

# On macOS, use -b 0 instead of -w 0
echo "data:image/png;base64,$(base64 -b 0 small-icon.png)"

Go

package main

import (
    "encoding/base64"
    "fmt"
)

func main() {
    // Encode
    input := []byte("Hello, World!")
    encoded := base64.StdEncoding.EncodeToString(input)
    fmt.Println(encoded) // "SGVsbG8sIFdvcmxkIQ=="

    // Decode
    decoded, err := base64.StdEncoding.DecodeString("SGVsbG8sIFdvcmxkIQ==")
    if err != nil {
        panic(err)
    }
    fmt.Println(string(decoded)) // "Hello, World!"

    // URL-safe encoding (for JWTs and URL parameters)
    urlEncoded := base64.URLEncoding.EncodeToString(input)
    urlDecoded, _ := base64.URLEncoding.DecodeString(urlEncoded)

    // URL-safe without padding (common in JWTs)
    noPadding := base64.RawURLEncoding.EncodeToString(input)
}

---

What Base64 Is NOT

Not Encryption

This is the most important misconception to address. Base64 is encoding, not encryption. The difference is fundamental:

Encoding transforms data into another format. It is reversible with no key. Anyone who knows the scheme can reverse it.
Encryption uses a secret key to transform data so that only parties with the key can reverse it.

Base64 provides zero security. A Base64-encoded string is as readable as plain text to anyone who knows what Base64 is (which is every developer).

javascript

// This is NOT security
const "obfuscated" = btoa("my-secret-password");
// "bXktc2VjcmV0LXBhc3N3b3Jk"

// This takes approximately 0.1 seconds to reverse
const exposed = atob("bXktc2VjcmV0LXBhc3N3b3Jk");
// "my-secret-password"

If you need to protect sensitive data, use actual encryption:

For data at rest: AES-256 encryption (the AES Encryption tool on ToolBox)
For passwords: bcrypt, Argon2, or scrypt (never reversible encoding)
For data in transit: TLS/HTTPS (wraps all your HTTP traffic)

Not Compression

Base64 makes data larger, not smaller. It increases size by approximately 33%. If you need to reduce data size, use actual compression (gzip, brotli, zstd).

Not Hashing

---

When to Use Base64 vs. Alternatives

Scenario	Use Base64?	Better Alternative
Transmitting binary over text protocols	Yes	n/a - this is the purpose
Small images in HTML/CSS	Yes, if under ~2KB	File reference for larger images
File uploads from browser	No	`multipart/form-data`
Storing passwords	Never	bcrypt, Argon2, scrypt
Hiding sensitive data	Never	Actual encryption
Compressing data	No	gzip, brotli
Securing API tokens	No	HTTPS + bearer tokens
JWT header and payload	Yes (required by spec)	n/a - this is how JWTs work
Binary in JSON payload	Yes	Consider multipart/form-data for large files
Email attachments	Yes (required by MIME)	n/a - this is how email works

---

Identifying Base64 in the Wild

Base64-encoded strings are recognizable by their patterns:

Visual clues:

Only contains A-Z, a-z, 0-9, +, /, and =
Length is always a multiple of 4 (due to padding)
Ends with zero, one, or two = characters
Has no spaces, newlines, or special characters (unless it is MIME-formatted with line breaks)

Common lengths:

MD5 hash as Base64: 24 characters (ending in ==)
SHA-1 hash as Base64: 28 characters (ending in =)
SHA-256 hash as Base64: 44 characters (ending in =)
UUIDs are not Base64 - they contain hyphens

---

Base64 and Data URIs in Practice

Here is a complete workflow for embedding a small SVG icon in a stylesheet using Base64:

bash

# Start with an SVG file
cat icon-close.svg
# <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/></svg>

# Encode it
base64 -w 0 icon-close.svg
# PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDZMNiAxOE02IDZsMTIgMTIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=

css

/* Use in CSS */
.btn-close {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDZMNiAxOE02IDZsMTIgMTIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  border: none;
  cursor: pointer;
}

Note: for SVGs specifically, you can often skip Base64 entirely and use a URL-encoded SVG directly, which is slightly smaller:

css

/* URL-encoded SVG (no Base64 needed) */
.btn-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
}

This avoids the 33% Base64 overhead for SVGs specifically, since SVGs are already text.

---

Decoding Base64 Quickly for Debugging

javascript

// Quick decode in browser console
atob("SGVsbG8gV29ybGQ=");
// "Hello World"

// For JWT payload section (the middle part between dots)
const jwtPayload = "eyJzdWIiOiJ1c3JfMTIzIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNzA5MDAwMDAwfQ";
JSON.parse(atob(jwtPayload));
// {sub: "usr_123", name: "Alice", iat: 1709000000}

---

Try It Yourself

The Base64 Encoder/Decoder on ToolBox gives you:

Instant text-to-Base64 and Base64-to-text conversion as you type
Correct UTF-8 handling for non-ASCII characters (accents, emoji, non-Latin scripts)
File-to-Base64 conversion: drag and drop any file to get its Base64 representation
Instant data URI generation for images
Standard Base64 and URL-safe Base64URL modes
Everything runs in your browser - no server, no tracking, no data retention

Related Tools

Free, private, no signup required

JSON Formatter

JSON formatter and validator online - format, beautify, and validate JSON data instantly in your browser

Try it

Regex Tester

Free online regex tester - test and debug regular expressions with live matching and highlights

Try it

Text Diff Checker

Free online text diff checker - compare two texts and see the differences highlighted line by line

Try it

Code Formatter

Free online code formatter - beautify and format JavaScript, CSS, HTML, and more

Try it

Share this post

16 min read

See Pro Features Explore Free Tools

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

What Is Base64?

The Core Problem Base64 Solves

How Base64 Encoding Works

Step-by-Step Example

The Base64 Alphabet Table

Padding with =

The Size Overhead

Common Use Cases

Data URIs

HTTP Basic Authentication

JSON Web Tokens (JWTs)

Email Attachments (MIME Encoding)

Binary Data in JSON and XML

Webhook Signature Verification

Configuration and Secrets Management

Base64 in Code: Language Reference

JavaScript (Browser)

JavaScript (Node.js)

Python

PHP

Bash / Command Line

Go

What Base64 Is NOT

Not Encryption

Not Compression

Not Hashing

When to Use Base64 vs. Alternatives

Identifying Base64 in the Wild

Base64 and Data URIs in Practice

Decoding Base64 Quickly for Debugging

Try It Yourself

Related Tools

You might also like

URL Encoding Explained: A Developer's Complete Guide

How to Write Better Git Commit Messages (With Examples)

How to Build and Test HTTP Requests Without Writing Code

What Is Base64?

The Core Problem Base64 Solves

How Base64 Encoding Works

Step-by-Step Example

The Base64 Alphabet Table

Padding with =

The Size Overhead

Common Use Cases

Data URIs

HTTP Basic Authentication

JSON Web Tokens (JWTs)

Email Attachments (MIME Encoding)

Binary Data in JSON and XML

Webhook Signature Verification

Configuration and Secrets Management

Base64 in Code: Language Reference

JavaScript (Browser)

JavaScript (Node.js)

Python

PHP

Bash / Command Line

Go

What Base64 Is NOT

Not Encryption

Not Compression

Not Hashing

When to Use Base64 vs. Alternatives

Identifying Base64 in the Wild

Base64 and Data URIs in Practice

Decoding Base64 Quickly for Debugging

Try It Yourself

Related Tools

You might also like

URL Encoding Explained: A Developer's Complete Guide

How to Write Better Git Commit Messages (With Examples)

How to Build and Test HTTP Requests Without Writing Code

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/