A primer on Base 64 strings — Part 1

A primer on Base 64 strings — Part 1: Introduction

If you have been around the web for awhile, you will notice that sometimes, you will find a series of gibberish alphabets appearing, most often in your browser address bar as part of a website’s URL:

The blue highlighted portions in the GIF above are the aforementioned gibberish alphabets.

These are Base 64 characters, and a large portion of the web uses these characters for a multitude of purposes.

Why is it called Base 64?

These characters are called Base 64 characters because there are 64 characters in the character set:

  • Lowercase a to z (26 characters);
  • Uppercase A to Z (26 characters);
  • 0 to 9 (10 characters);
  • + and / (2 characters)

A full list of the characters, as well as their indexes, are shown in the table below:

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

How Base 64 conversion works

Essentially, Base 64 encoding works by:

  1. Dividing a sequence of bytes into 6-bit chunks (which can hold a value between 0 to 63).
  2. Assigning each of the 6-bit chunks to a character in the Base 64 character set shown above.

Take the following string sequence for example: BOW. It is represented by the following byte sequence:

LetterBOW
Decimal667987
Binary010000100100111101010111

If we reorganise the byte sequence into 6-bit chunks, this is how it looks like:

Chunk1234
Binary010000101000111101010111
Decimal1636495
Base 64 CharacterQk9X

To decode a Base 64 string, we simply reverse the encoding process to get our original string back.

When encoding strings with lengths that are not multiples of 3, the resulting output may sometimes have = characters at the back. These are padding characters, indicating the number of filler bits at the end of a Base 64 sequence. For e.g. BOWL encodes to Qk9XTA==, because BOWL is 2 characters away from being a multiple of 3.


Article continues after the advertisement:


Why is Base 64 used?

In the early days of networking, Base 64 encoding is often used to ensure that data is transmitted properly, because all of the characters it uses have character codes that are byte-safe. This ensures that data transmitted over networks will not lose bytes that are misinterpreted as something else.

Today, Base 64 is often used in front-end web development to represent binary files in text format. For example, the following Base 64 string (highlighted below) can be used to represent an image in HTML:

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAsLCwsMCw0ODg0SExETEhoYFhYYGiccHhweHCc8JSslJSslPDVANDA0QDVfSkJCSl9tXFdcbYR2doSnnqfa2v8BCwsLCwwLDQ4ODRITERMSGhgWFhgaJxweHB4cJzwlKyUlKyU8NUA0MDRANV9KQkJKX21cV1xthHZ2hKeep9ra///CABEIABAAEAMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAHAP/aAAgBAQAAAAAibIT/AP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIQAAAAf//EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMQAAAAf//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEAAT8AH//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Af//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Af//Z"/>  &larr; This image is represented in Base 64
← This image is represented in Base 64

Converting to Base 64

As a developer, if you’re looking to convert your strings into Base 64, you have a couple of options.

  • If you’re looking to encode text strings into Base 64, you can use an online Base64 converter. Do note, however, that Base 64 is not an encryption algorithm, so it does not keep your data safe!
  • If you’re looking to convert your files into Base 64 strings that can be used in HTML and CSS, you can have a look at our in-house Base 64 converter, which is specifically designed to generate Base 64 strings that can be immediately put into your web files.

Conclusion

In the next part of the series, we will be going through the conversion process of Base 64 strings in a more in-depth manner, and delving into the padding system that Base 64 uses. We will also be exploring how you can convert your strings into Base 64 in various languages.


Article continues after the advertisement:


Leave a Reply

Your email address will not be published. Required fields are marked *

Note: You can use Markdown to format your comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.