Base64 explained: why it makes data bigger and how to decode it
Base64 writes binary data as plain text, using 64 characters: A to Z, a to z, 0 to 9, plus + and /. Every three bytes become four characters, so the text is about a third longer than the data it holds. People use it when a format accepts only text, such as a data URL in a web page, a JSON field or an email attachment.
Why text formats need it
Many formats were built for text only. An email body, a JSON file and a CSS file can hold letters and symbols safely, but a raw image or a zip file contains byte values that some systems would change, cut short or read as control codes. Base64 uses only characters that every text system passes through unchanged, so the data arrives intact. It is defined in RFC 4648.
Base64 is an encoding, not a secret. Anyone can decode it with no key, so it must never be used to hide a password or personal data.
How three bytes become four characters
Take the word Man, which is three bytes: 77, 97 and 110 in decimal. Together those three bytes make 24 bits. Cut the 24 bits into four groups of six bits, and each group is a number from 0 to 63, which points to one character in the alphabet. Man becomes TWFu.
Six bits can only name 64 values, so four characters carry three bytes. The output is therefore about one third larger than the input, before any line breaks are added.
When the data does not divide into three bytes, the encoder pads the end with = signs. Ma, which is two bytes, becomes TWE=, and M, which is one byte, becomes TQ==. The padding tells the decoder how many bytes the last group holds.
Text must be encoded as UTF-8 first
Base64 works on bytes, and text is made of characters. A character such as é or ✓ is stored as more than one byte in UTF-8, the encoding used across the web. The browser function btoa() takes a string and treats each character as one byte, so it fails on characters above the basic Latin range. Calling it on a tick mark throws an InvalidCharacterError.
The fix is to turn the text into UTF-8 bytes first, then encode those bytes. The phrase héllo ✓ is 10 bytes in UTF-8, and its Base64 is aMOpbGxvIOKckw==. The Base64 tool does this step for you. When it decodes, it reads the bytes back as UTF-8. If the bytes are not valid UTF-8 text, the tool treats them as a file and offers a download.
URL-safe Base64
The standard alphabet contains + and /. In a URL, + can stand for a space, and / separates the parts of a path, so a Base64 string can break a link. The URL-safe form (RFC 4648, section 5) uses - and _ instead, and usually drops the = padding. Use it when the string goes into a URL, a file name or a token. The decoder accepts both forms, with or without padding.
If the Base64 came out of a link, decode the URL first. A value that was percent-encoded in a link has to be decoded before its Base64 can be read.
Data URLs and images
A data URL puts the file inside the link itself. Its form is data:, then the media type, then ;base64, then a comma and the data. A small image becomes data:image/png;base64, followed by the encoded bytes. Web pages and stylesheets accept this form, which saves a request for a tiny icon.
The cost is size. The data is about a third bigger, and it travels inside the page or stylesheet rather than as a separate file that the browser can cache. Use data URLs for small pictures, not for large photos.
When you decode Base64 in the tool, it looks at the first bytes of the data. PNG, JPEG, GIF and WebP files each begin with a known signature, so the tool shows a preview and offers a download. A data URL with an image type is shown as a picture as well.
Common decoding errors
- A character is not allowed. The input contains a character outside the 64, such as a quotation mark from a copied sentence. Check where the text came from.
- The length is wrong. A character is missing or extra, which usually means the copy was cut short.
- Line breaks and spaces. Email (MIME) wraps Base64 every 76 characters. The decoder removes spaces and line breaks, so you can paste wrapped text as it is.
- Missing padding. Some systems drop the = signs. The decoder adds them back.
Edge cases
- The decoded result looks like nonsense. It may be a file rather than text. A zip file, a PDF or a program decodes to bytes that do not read as text. The tool offers those as a download.
- Very large inputs. The whole file is held in the browser while it is encoded or decoded, so a very large file can be slow, and on a phone it can fail.
Quick answers
Is Base64 the same as encryption?
No. It is a reversible encoding with no key, so anyone can decode it.
Why is my Base64 longer than the file?
Each set of three bytes becomes four characters, so the text is about one third larger.
Why does a copied Base64 string fail to decode?
Usually a character was lost or added during the copy, such as a line break in the wrong place or a missing final character. Copy it again from the source.
