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 this 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: 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 this 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 is Encoding and Decoding?

Encoding is the process of converting data from one format or representation to another. In the context of Base64, encoding involves taking binary data (such as images, files, or any binary information) and converting it to a textual representation using a specific set of characters. This textual representation consists of a combination of alphanumeric characters and certain symbols.

Base64 Encoding in 4 simple steps - Infographic

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.

Base64 Decoding in 4 simple steps - Infographic

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 is a collection of 64 characters that have been carefully chosen to efficiently represent a wide variety of binary values. This set includes uppercase letters (A-Z), lowercase letters (a-z), numerical digits (0-9), and two additional delimiters: “+” and “/”.

These 64 characters have a balanced mix of ASCII characters, allowing Base64 encoding to perform flawlessly across multiple systems and platforms.

The Base64 character table is a reference guide that clearly maps characters to their corresponding values in binary and decimal.

Here is the comprehensive Base64 character table:


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 “=”.

The difference between Base64 vs Base64URL characters - Infographic

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

Base64 CharacterBase64URL 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 data but change the case, you’ll get various Base64-encoded texts. This is because uppercase and lowercase letters are handled as separate characters during the encoding process.

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

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 Base64 value of “B64Encode”, which is “QjY0RW5jb2Rl” and set all the characters to lower or upper case, then you can see when decoding that the result will be completely different from the original content.

qjy0rw5jb2rl = ª<´¯cojå

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 work with our free Base64 Encoder.

Example of Base64 Encoding in JavaScript

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

Base64 in JavaScript Infographic: btoa() and atob() functions

Assume you have a string 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"

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


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 work 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 may use the atob() method to decode this Base64-encoded text and obtain 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!