How it works
Base64
The text is first turned into UTF-8 bytes. Every three bytes (24 bits) are cut into four groups of six bits, and each six-bit number from 0 to 63 picks a letter from A–Z, a–z, 0–9, + and /. When the last group is short, zero bits fill it and = signs pad the output to a multiple of four. The picture draws exactly this regrouping for the first groups.
The URL-safe alphabet swaps + and / for - and _ and drops the padding, so the result fits in a URL or file name. Decoding accepts either alphabet, spaces and line breaks, and missing padding.
output length = 4 × ⌈bytes ÷ 3⌉
URL escapes
URL mode works like JavaScript’s encodeURIComponent: letters, digits and - _ . ! ~ * ' ( ) stay as they are, and every other character becomes a % followed by two hex digits for each of its UTF-8 bytes. A space becomes %20 and é becomes %C3%A9. Decoding reverses it and stops with an error at a % that does not start a valid escape.
Hashes
A hash turns any input into a fixed-size fingerprint: 128 bits for MD5, 160 for SHA-1, 256 for SHA-256 and 512 for SHA-512. SHA hashes come from the browser’s Web Crypto; MD5 is computed by a small built-in implementation of RFC 1321, because Web Crypto does not offer it.
Change one letter and about half the bits change. The figure under the grid counts how many bits flipped since your last edit, so you can watch that avalanche happen.
