For sure the easiest way to encode or decode Base64 text online
Base64 encoding is a convenient, portable way of representing data.
Base64-encoded copies of images, CSS, fonts, and JavaScript can be used in places where you would otherwise reference a URL. This can be useful for removing dependencies on external files, to reduce the number of network requests or to allow a document to exist on its own.
This uses the 'data URI' format. The URI is of the format data:${mediatype};base64,${data}
, where
${mediatype}
is a media type (also known as a 'MIME type'), documenting the type of file, probably one of image/jpeg
, image/png
, image/gif
, text/javascript
, text/css
, font/opentype;charset=utf-8
, application/font-woff;charset=utf-8
, application/font-ttf;charset=utf-8
; ;base64,
has been added after the media type to denote how your data has been encoded; and ${data}
is the Base64 encoded contents of the file you're embedding. ASCII is a standard for representing 128 different characters: capital and lowercase letters, numbers, common punctuation, spaces, and some control instructions used by computers to understand documents.
This means that each of these supported characters can also be represented as a number. For example, 'A' is always '65', and 'h' is always '150'. Any system that uses this standard knows how to make this translation, and so these characters can be encoded to numeric representations and processed by computers, and shared between systems that all understand this way of representing supported characters.
_0 | _1 | _2 | _3 | _4 | _5 | _6 | _7 | _8 | _9 | _A | _B | _C | _D | _E | _F | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
0_ | NUL0000 | SOH0001 | STX0002 | ETX0003 | EOT0004 | ENQ0005 | ACK0006 | BEL0007 | BS0008 | HT0009 | LF0010 | VT0011 | FF0012 | CR0013 | SO0014 | |
1_ | DLE0016 | DC10017 | DC20018 | DC30019 | DC40020 | NAK0021 | SYN0022 | ETB0023 | CAN0024 | EM0025 | SUB0026 | ESC0027 | FS0028 | GS0029 | RS0030 | US0031 |
2_ | SP0032 | !0033 | "0034 | #0035 | $0036 | %0037 | &0038 | '0039 | (0040 | )0041 | *0042 | +0043 | ,0044 | -0045 | .0046 | /0047 |
3_ | 00048 | 10049 | 20050 | 30051 | 40052 | 50053 | 60054 | 70055 | 80056 | 90057 | :0058 | ;0059 | <0060 | =0061 | >0062 | ?0063 |
4_ | @0064 | A0065 | B0066 | C0067 | D0068 | E0069 | F0070 | G0071 | H0072 | I0073 | J0074 | K0075 | L0076 | M0077 | N0078 | O0079 |
5_ | P0080 | Q0081 | R0082 | S0083 | T0084 | U0085 | V0086 | W0087 | X0088 | Y0089 | Z0090 | [0091 | \0092 | ]0093 | ^0094 | _0095 |
6_ | `0096 | a0097 | b0098 | c0099 | d0100 | e0101 | f0102 | g0103 | h0104 | i0105 | j0106 | k0107 | l0108 | m0109 | n0110 | o0111 |
7_ | p0112 | q0113 | r0114 | s0115 | t0116 | u0117 | v0118 | w0119 | x0120 | y0121 | z0122 | {0123 | |0124 | }0125 | ~0126 | DEL0127 |
Because computers today typically work in multiples of 8 bits at a time, there is room for 256 characters. This extra room gives space for more characters, and is referred to as EASCII, or 'Extended ASCII'
There are several distinct encoding patterns for EASCII, so systems encoding or decoding characters to numbers need to agree on which numbers represent which characters. The most prevalent system is called 'Latin-1'.
_0 | _1 | _2 | _3 | _4 | _5 | _6 | _7 | _8 | _9 | _A | _B | _C | _D | _E | _F | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
A_ | NBSP 160 | ¡ 161 | ¢ 162 | £ 163 | ¤ 164 | ¥ 165 | ¦ 166 | § 167 | ¨ 168 | © 169 | ª 170 | « 171 | ¬ 172 | SHY 173 | ® 174 | ¯ 175 |
B_ | ° 176 | ± 177 | ² 178 | ³ 179 | ´ 180 | µ 181 | ¶ 182 | · 183 | ¸ 184 | ¹ 185 | º 186 | » 187 | ¼ 188 | ½ 189 | ¾ 190 | ¿ 191 |
C_ | À 192 | Á 193 | Â 194 | Ã 195 | Ä 196 | Å 197 | Æ 198 | Ç 199 | È 200 | É 201 | Ê 202 | Ë 203 | Ì 204 | Í 205 | Î 206 | Ï 207 |
D_ | Ð 208 | Ñ 209 | Ò 210 | Ó 211 | Ô 212 | Õ 213 | Ö 214 | × 215 | Ø 216 | Ù 217 | Ú 218 | Û 219 | Ü 220 | Ý 221 | Þ 222 | ß 223 |
E_ | à 224 | á 225 | â 226 | ã 227 | ä 228 | å 229 | æ 230 | ç 231 | è 232 | é 233 | ê 234 | ë 235 | ì 236 | í 237 | î 238 | ï 239 |
F_ | ð 240 | ñ 241 | ò 242 | ó 243 | ô 244 | õ 245 | ö 246 | ÷ 247 | ø 248 | ù 249 | ú 250 | û 251 | ü 252 | ý 253 | þ 254 | ÿ 255 |
The ASCII standard most easily supports English words and punctuation. Extended ASCII encodings can add on support for characters of other languages, but 128 additional characters isn't enough to represent an alphabet in every language.
Consider the number of variations in writing systems with heavy diacritic use, like Vietnamese's tonal marks; or logographic characters in systems like Chinese; or the number of Emojis available on your phone. Consider also times when you want to include characters from multiple languages in a single document. Other standards, like Unicode, exist to more fully represent all characters. There are standard ways to represent these larger alphabets using ASCII characters.
Consider binary, decimal, and hexadecimal numbers. Binary is Base2 — each character can be either a '0' or a '1'. The word 'hello' represented in binary is '01101000 01100101 01101100 01101100 01101111', with eight characters representing one of 256 possible ASCII characters.
Decimal is Base10, the counting system you are most familiar with — it uses the numbers 0 through 9 to represent 10 possible values of each character. In Base10 'hello' is represented as '448378203247'.
Hexadecimal is Base16. Typically the numbers 0 through 9 and the letters A through F are used to represent 16 possible values. Even though there are letters used to represent this system they aren't they same as the encoded letters ('A' encoded to ASCII and displayed as a hexadecimal number is '41')
Base64 uses 64 different characters to represent this same content. These characters are most often the letters 'A–Z', 'a–z', '0–9', '+', and '/' (the symbol '=' is used as padding also), though different standards exist. These characters were picked because they exist in ASCII, and can easily be encoded and shared across systems with little risk of intermediaries inadvertently misconverting the data.
Index | Char | Index | Char | Index | Char | Index | Char | |||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
0 | A | 16 | Q | 32 | g | 48 | w | |||||
1 | B | 17 | R | 33 | h | 49 | x | |||||
2 | C | 18 | S | 34 | i | 50 | y | |||||
3 | D | 19 | T | 35 | j | 51 | z | |||||
4 | E | 20 | U | 36 | k | 52 | 0 | |||||
5 | F | 21 | V | 37 | l | 53 | 1 | |||||
6 | G | 22 | W | 38 | m | 54 | 2 | |||||
7 | H | 23 | X | 39 | n | 55 | 3 | |||||
8 | I | 24 | Y | 40 | o | 56 | 4 | |||||
9 | J | 25 | Z | 41 | p | 57 | 5 | |||||
10 | K | 26 | a | 42 | q | 58 | 6 | |||||
11 | L | 27 | b | 43 | r | 59 | 7 | |||||
12 | M | 28 | c | 44 | s | 60 | 8 | |||||
13 | N | 29 | d | 45 | t | 61 | 9 | |||||
14 | O | 30 | e | 46 | u | 62 | + | |||||
15 | P | 31 | f | 47 | v | 63 | / | (padding) | = |
Base64 will often be used to represent data meant for computers to read, like binary content of images, where if a system converted the raw contents the original data would become hard to interpret.
When using 64 characters of Base64 to represent EASCII, more than one digit must be used to record one of the 256 possible characters.
In Base2, 256 characters can be represented in 8 digits, or 8 'bits'. For example, the ASCII character 'A' in Base10 is '65', and 65 in Base2 is '01000001'. Base64 can represent 6 bits of information, so 2 digits are used to record more than that: 'A''s index 65 is encoded as 'QQ' in Base64, using 12 bits of information.
Since only 8 of 12 bits are used to represent a character, the remaining 4 can be used to represent part of another character. In total, 4 characters of Base64 are equal to 3 EASCII characters.
Format | text | h e l l o binary | 01101000 01100101 01101100 01101100 01101111 | v (split in to 6 bit chunks) | 011010 000110 010101 101100 011011 000110 1111(00) base10 | 26 6 21 44 27 6 60 base64 | a G V s b G 8 output | aGVsbG8=
Your support helps keep utilities like this one live and evolving. Thank you very much!
If you are able provide financial support it would mean very much. Recurring donations through Patreon are most appreciated. Patrons at any level unlock the ability to pick color themes, to show off your support while you use these tools.
If you'd like to sponsor a specific tool, please get in touch! I'd love for your brand to support specific tools, with your logo, message, and color theme shown prominently and proudly!
These tools are developed to be easily linked to; if you embed a link in your work I would be delighted to hear about it. Has a tool helped you build something neat or learn something interesting? If you share that with others I would enjoy hearing about it!
These utilities are built using modern web technologies I enjoy. They are deployed on ZEIT Now, compiled using Parcel JS, depend on Redux, and are authored in Typescript.
They are built to be usable offline, and installed as apps, using Service Workers, Web App Manifests, and other technologies piloted by the fine folks on the Google Chrome team (and shared back to the web community).
The default typeface is Overpass Mono. It is open-source, released in 2015. The Overpass series is based on Highway Gothic, a sans-serif series developed by the United States Highway Administration, originally specified in 1948, prepared with an eye towards keeping street signs legible at high speeds and in suboptimal lighting or atmospheric conditions.