What is Base64: How To Encode & Decode? How Does It Work?

In this article we will cover Base64 in its entirety: we will learn what Base64 is and what it is used for. We will also learn about the characters of Base64 encoding method, the concepts of encoding and decoding. We’ll even show you the algorithm, not just in theory, but through examples: you’ll be able to encode and decode Base64 manually and in JavaScript.

What is Base64?

Base64 encoding was first introduced in the early 1970s as part of the Multi-purpose Internet Mail Extensions (MIME) standard, defined by Phillip Hallam-Baker in RFC 3548 and subsequently refined in RFC 4648.

MIME was created to enable the exchange of different types of data via email systems, and Base64 was adopted as a way of encoding binary attachments within email messages. Since then, the Base64 encoding scheme has been widely adopted and extended to various other applications beyond email, making it a fundamental technique for representing binary data as text. Its simplicity and effectiveness in representing binary data across platforms and systems has contributed to its continued use and integration into modern programming practices.

Base64 is a binary-to-text encoding scheme that is commonly used to represent binary data as text characters. It does this by encoding binary data in a way that ensures safe transmission and storage across various systems and protocols that may not handle raw binary data effectively.

The term “Base64” comes from the fact that it uses a base of 64 different characters to represent data. This encoding process allows binary data, such as images, files or any other binary content, to be converted into a text format that can be easily shared, transmitted or stored.

What are Encoding and Decoding?

Encoding is the process of converting data from one format or representation to another. In the Base64 context, encoding means converting binary data (such as images, audio files, other files, or any binary information) into a text representation, in this case, Base64 encoded, using a specific character set. This textual representation consists of a combination of alphanumeric characters and certain symbols.

Decoding is the reverse process of encoding. It involves taking the encoded textual representation and converting it back to its original binary form. Decoding is essential for extracting and using the original data after it has been encoded.

The encoding and decoding processes are fundamental to the transmission, storage and manipulation of data, as they allow binary data to be securely and efficiently represented in a human-readable format, ensuring compatibility and interoperability across different systems and platforms.

Base64 Characters and Table

The Base64 character set contains 64 ASCII characters used to represent binary data. This set includes uppercase letters (A-Z), lowercase letters (a-z), numerical digits (0-9), and two additional delimiters: “+” and “/”.

This set of 64 characters boasts a harmonious blend of ASCII characters, ensuring seamless performance for Base64 encoding across various systems and platforms.

A crucial point of reference, the Base64 character table delineates the mapping of characters to their respective binary and decimal values.

Here is the comprehensive Base64 character table:

Character	Binary	Decimal
A	000000	0
B	000001	1
C	000010	2
D	000011	3
E	000100	4
F	000101	5
G	000110	6
H	000111	7
I	001000	8
J	001001	9
K	001010	10
L	001011	11
M	001100	12
N	001101	13
O	001110	14
P	001111	15
Q	010000	16
R	010001	17
S	010010	18
T	010011	19
U	010100	20
V	010101	21
W	010110	22
X	010111	23
Y	011000	24
Z	011001	25
a	011010	26
b	011011	27
c	011100	28
d	011101	29
e	011110	30
f	011111	31
g	100000	32
h	100001	33
i	100010	34
j	100011	35
k	100100	36
l	100101	37
m	100110	38
n	100111	39
o	101000	40
p	101001	41
q	101010	42
r	101011	43
s	101100	44
t	101101	45
u	101110	46
v	101111	47
w	110000	48
x	110001	49
y	110010	50
z	110011	51
0	110100	52
1	110101	53
2	110110	54
3	110111	55
4	111000	56
5	111001	57
6	111010	58
7	111011	59
8	111100	60
9	111101	61
+	111110	62
/	111111	63

Base64URL Differences

Base64 uses a character set that includes special characters such as “+”, “/”, and “=”, which, due to their distinct semantics, may pose issues in URL scenarios. Base64URL, on the other hand, uses a URL-safe character set, replacing “+” with “-“, “/” with “_”, and padding with “=”.

Below you can see in a table the characters in which Base64 and Base64URL differ:

Base64 Character	Base64URL Equivalent
+	–
/	_
= (Padding)	(Padding omitted)

Case Sensitivity in Base64 Encoding

When working with this data transformation method, the question of whether Base64 encoding is case-sensitive frequently arises. In short, Base64 encoding is case-sensitive by default. This means that separating uppercase and lowercase letters in input data can result in different encoded outputs.

For example, if you encode the same text in Base64 but change the case of the characters, you will get different Base64 results. This is because Base64 is a case-sensitive encoding scheme.

Let’s explore an example to illustrate the impact of case sensitivity in Base64 encoding:

B64ENCODE = QjY0RU5DT0RF
b64encode = YjY0ZW5jb2Rl
B64Encode = QjY0RW5jb2Rl
B64encode = QjY0ZW5jb2Rl

As you can see, the encoded strings differ when the case of the letters changes.

If I take the text “B64Encode” with the Base64 value “QjY0RW5jb2Rl” and set all characters to uppercase or lowercase, the results of the decoding will be different.

qjy0rw5jb2rl = ª<´¯cojå
QJY0RW5JB2RL = @–4EnIdK

How the Base64 Encoding Algorithm Works

Encoding involves dividing the binary data into smaller chunks (usually groups of three bytes) and converting each chunk into a set of four Base64 characters.

Here's a detailed explanation of how the Base64 algorithm works:

1. Input data preparation: The input binary data is grouped into blocks of 3 bytes (24 bits). If the last block is less than 3 bytes, padding is added to make it a complete block.
2. Binary to decimal conversion: Each block of 3 bytes is converted from binary to decimal.
3. Decimal to Base64 conversion: The decimal values obtained in the previous step are mapped to the Base64 character set. Each decimal value corresponds to a specific character in the set.
4. Padding: If the input data was not divisible by 3, padding characters ('=' symbols) are added to the encoded output to ensure that the length of the encoded data is a multiple of 4 characters.
5. Final encoded output: The encoded characters from each block are concatenated to form the final Base64 encoded string.

Example of Base64 Encoding

Now let's look at an example of how to convert text to Base64 values.

Assume we want to convert the string "Base64" to Base64.

1. Convert the characters of the string into their ASCII values:
   • B: 66
   • a: 97
   • s: 115
   • e: 101
   • 6: 54
   • 4: 52
2. Convert the ASCII values into 8-bit binary representation:
   • 66: 01000010
   • 97: 01100001
   • 115: 01110011
   • 101: 01100101
   • 54: 00110110
   • 52: 00110100
3. Combine the binary representations:
   • 01000010 01100001 01110011 01100101 00110110 00110100
4. Group the binary bits into sets of 6 bits each:
   • 010000 100110 000101 110011 011001 010011 011000 110100
5. Convert the groups of 6 bits into decimal:
   • 16 38 5 51 25 19 24 52
6. Use the Base64 character table to convert the decimal values to characters:
   • 16: Q
   • 38: m
   • 5: F
   • 51: z
   • 25: Z
   • 19: T
   • 24: Y
   • 52: 0

So if we encode the text "Base64", the result is "QmFzZTY0".

You can check your encoding with our free Base64 Encoder.

Example of Base64 Encoding in JavaScript

Let's have a look at a simple example to show how the btoa() method works in JavaScript works for Base64 encoding.

Assume you have a string/text that says, "Hello, World!" to encode this string with btoa(), provide it to the function as an argument:

// Declare a variable to hold the original string
const originalString = Hello, World!;
 
// Use the btoa() function to encode the original string in Base64
const encodedString = btoa(originalString);
 
// Output: "SGVsbG8sIFdvcmxkIQ"
console.log(encodedString);

The resulting encodedString will contain the Base64-encoded version of the original string:

SGVsbG8sIFdvcmxkIQ==

This encoded string can now be readily shared or transmitted without fear of incompatibility.

How the Base64 Decoding Algorithm Works

The process of converting a Base64-encoded string back into its original binary data is known as decoding. The algorithm involves reversing the encoding process steps.

Here's how the Base64 decoding algorithm works:

1. Remove Padding: If the Base64-encoded string has padding characters ('='), remove them. Padding characters are added to ensure that the encoded data is a multiple of 4 characters, but they are not needed for decoding.
2. Convert Base64 Characters to Values: Each Base64 character in the encoded string is converted back to its value according to the Base64 character set. This is essentially the reverse lookup of the encoding process.
3. Convert decimal values to 6-bit form: Each decimal value must be converted to 6-bit form.
4. Concatenate 6-Bit Values: The resulting 6-bit values from step 2 are concatenated together to form a sequence of bits. This sequence of bits represents the binary data.
5. Divide Bits into Bytes: The concatenated bits are divided into groups of 8 bits (1 byte). If the number of bits is not a multiple of 8, trailing bits are ignored.
6. Convert Bytes to Original Data: Each group of 8 bits (byte) is then converted back to its original binary value. This process essentially reverses the original encoding steps, including the padding and concatenation.
7. Reconstruct Original Data: The bytes obtained from step 5 are concatenated together to reconstruct the original binary data.

Example of Base64 Decoding

Now let's look at how it is possible to decode a text manually.

Let's decode the Base64 value "QmFzZTY0" back to its original string.

1. Convert the Base64 characters to their decimal values:
   • Q: 16
   • m: 38
   • F: 5
   • z: 51
   • Z: 25
   • T: 19
   • Y: 24
   • 0: 52
2. Convert the decimal values to 6-bit binary representations:
   • Q16: 010000
   • 38: 100110
   • 5: 000101
   • 51: 110011
   • 25: 011001
   • 19: 010011
   • 24: 011000
   • 52: 110100
3. Combine the binary representations:
   • 010000 100110 000101 110011 011001 010011 011000 110100
4. Split the combined binary into groups of 8 bits:
   • 01000010 01100001 01110011 01100101 00110110 00110100
5. Convert the binary groups to their ASCII values:
   • 66 97 115 101 54 52
6. Convert the ASCII values to characters:
   • 66: B
   • 97: a
   • 115: s
   • 101: e
   • 54: 6
   • 52: 4

Finally, we got that the Base64 value "QmFzZTY0" corresponds to the text "Base64".

You can check your decoding result with our free Base64 Decoder.

Example of Base64 Decoding in JavaScript

Let's use a simple example to demonstrate the process of Base64 decoding with the atob() function.

Assume you have the following Base64-encoded string: "SGVsbG8sIFdvcmxkIQ==", which corresponds to the original string "Hello, World!". You can decode this Base64-encoded text using the atob() method to get the original data.

// Declare a variable to hold the Base64-encoded string
const encodedString = "SGVsbG8sIFdvcmxkIQ==";
 
// Use the atob() function to decode the Base64-encoded string
const decodedString = atob(encodedString);
 
// Log the decoded string to the console
console.log(decodedString); // Output: Hello, World!