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:

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:

Letter	B	O	W
Decimal	66	79	87
Binary	01000010	01001111	01010111

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

Chunk	1	2	3	4
Binary	010000	101000	111101	010111
Decimal	16	36	49	5
Base 64 Character	Q	k	9	X

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.

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

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.