aardwulf.com: Welcome! Free help and web tutor

header pic goes here

Tutor Section: How to translate into base64 and back

Return to base64 Javascript tutorial
Return to tutor home

We will now tackle translating from base64 characters back into normal bytes. We will use the same mapping of values (0 through 63) to base64 characters (A-Z, a-z, 0-9, '+', and '/').

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

The reverse process is relatively simple now that we know how to perform the forward operation. Lets start with the base64 string "YmFzZTY0IGlzIGZ1biEh". Right now, that makes no sense. We begin the same way, by looking up the value for each base64 character.

Character:	Y	m	F	z
base64 Value:	24	38	5	51
Binary Value:	011000	100110	000101	110011
Character:	Z	T	Y	0
base64 Value:	25	19	24	52
Binary Value:	011001	010011	011000	110100
Character:	I	G	l	z
base64 Value:	8	6	37	51
Binary Value:	001000	000110	100101	110011
Character:	I	G	Z	1
base64 Value:	8	6	25	53
Binary Value:	001000	000110	011000	110101
Character:	b	i	E	h
base64 Value:	27	34	4	33
Binary Value:	011011	100010	000100	100001

It is very important to remember that when you are encoding, you use 8 bits for each character, and when you are decoding you use 6 bits for each character!

Once again, we start by chopping it into smaller pieces and work on each piece. When we are decoding a base64 string into normal bytes, we use 4 characters at a time instead of the 3 we used when encoding. So our base64 string is broken up from "YmFzZTY0IGlzIGZ1biEh" into "YmFz", "ZTY0", "IGlz", "IGZ1", and "biEh".

Lets start with our first group, "YmFz".

Convert the base64 characters to binary. (Remember to use 6 bit binary!)
"YmFz" is 011000 100110 000101 110011 in binary.
Convert the 24 bits from four 6 bit groups to three 8 bit groups.
011000 100110 000101 110011 becomes 01100010 01100001 01110011.
Convert each of the three 8 bit groups into decimal.
01100010 = 98
01100001 = 97
01110011 = 115
Use each of the three decimals to look up the ASCII character for that value.
98 = 'b'
97 = 'a'
115 = 's'
You now have your first four base64 characters ("YmFz") decoded as ASCII ("bas").

Follow these steps for the next 16 base64 characters and you get the following results: "ZTY0" = "e64"
"IGlz" = " is"
"IGZ1" = " fu"
"biEh" = "n!!"
The encoded base64 string "YmFzZTY0IGlzIGZ1biEh" has been decoded to "base64 is fun!!".

Now we know how to encode bytes when we don't have exact groups of three to work with. But how do you decode base64 that has our special symbol, "="? It is very similar, you just have to remember the rules that caused us to use the "=". One thing before we get started: base64 encoded text will always be in groups of 4 base64 characters; if the number of base64 characters is not divisible by 4 with no remainder, then you have corrupted data.

Let's try decoding a base64 string that contains the "=" symbol. Our string this time will be "Li4ub3IgbWF5YmUgbm90Lg==". The first thing we do, is divide this up into groups of four characters. "Li4ub3IgbWF5YmUgbm90Lg==" becomes "Li4u", "b3Ig", "bWF5", "YmUg", bm90", and "Lg==". The first five quartets are decoded in the exact same manner. We just need to learn what to do for the last quartet, "Lg==".

Remember what the "="s mean: one "=" means that we were missing one whole byte when we encoded the data, two "="s means that we were missing two whole bytes when we encoded the data. We begin in the same way as before.

Begin by converting the base64 characters to their base64 values.
'L' = 11
'g' = 32
'=' = nothing
'=' = nothing
Convert the values to binary.
11 = 001011
32 = 100000
nothing = xxxxxx (just to call it something)
nothing = xxxxxx (just to call it something)
Convert the four 6 bit groups into three 8 bit groups.
001011 100000 xxxxxx xxxxxx becomes 00101110 0000xxxx xxxxxxxx.

We know that because we had two "="s at the end, that we were missing two complete bytes in the original data. Remember where we had to add zeros when we encoded into base64? Those are the zeros you see in the second 8 bit group ("0000xxxx"). Because each of these 8 bit groups represents one byte from the original data, and we know that we are missing two whole bytes, we discard the last two 8 bit groups, "0000xxxx" and "xxxxxxx". So the only data we now need to worry about is the first byte, 00101110. We convert this value to decimal.
00101110 = 46
We convert the 46 to ASCII and we get the character '.' and add this to the other data that we have decoded.
"Li4u" = "..."
"b3Ig" = "or "
"bWF5" = "may"
"YmUg" = "be "
"bm90" = "not"
"Lg==" = "."
Our final decoded string is "...or maybe not."

Continue on to encode and decode your own base64.