An image embedded in a page as a long run of letters, an address where spaces become %20, a login token made of three blocks separated by dots: Base64, URL encoding and JWTs cross paths every day in web development. They look alike, are easily confused, and none of them is encryption. Here is what they really do and how to decode them safely.
Base64: making bytes printable
Base64 represents binary data (an image, a PDF) using only 64 safe characters: A-Z, a-z, 0-9, + and /. It is used wherever a channel accepts only text: email attachments, images embedded in CSS or HTML (data: prefix), tokens, some configuration files.
The principle: 3 bytes (24 bits) are cut into 4 groups of 6 bits, each represented by a character. For example “Man” becomes “TWFu” and “Hello” becomes “SGVsbG8=” (the = sign completes the last incomplete block). The numerical consequence: Base64 always turns 3 bytes into 4 characters, which is +33% in volume. A 1 MB image embedded as data: weighs about 1.33 MB.
Let us repeat it: Base64 is not encryption. Anyone decodes it in an instant. Never use it to “hide” a password.
Encoding and decoding with Base64 Encoder and Decoder
- Choose Encode or Decode, then paste text or drop a file (24 MB maximum: Base64 adds a third and beyond that the tab would slow down).
- Text is converted to UTF-8 before encoding: accents, Arabic and emoji round-trip without corruption, unlike a bare btoa in JavaScript.
- When decoding, both alphabets (standard and “URL-safe” with - and _ in place of + and /), the presence or absence of =, line breaks and a data:… prefix are accepted automatically.
- If the decoded bytes are not text, the tool detects the type (PNG, JPEG, PDF, ZIP…), previews images and offers the file for download.
- Output options: URL-safe variant, no padding (=), MIME line breaks, data: prefix.
URL (percent) encoding
A web address can contain only certain characters. The others are replaced by a “%” followed by two hexadecimal digits representing the UTF-8 bytes. The letter “é” becomes %C3%A9, the Arabic letter “م” becomes %D9%85 and the emoji “😀” becomes %F0%9F%98%80 (four bytes). A space becomes %20, or + in a classic HTML form.
| Type | Encodes | Use it for |
|---|---|---|
| Component | Everything except safe characters | A parameter's value (?name=value). |
| Whole URL | Keeps / ? # & = | A complete, already structured address. |
| Form | Space as + | The body of an HTML form. |
When decoding, an error (“100%” or “%ZZ”) is located and explained; tolerant mode decodes what is valid and leaves the rest. If the result still holds %XX sequences, the tool flags double encoding and offers to decode again. The “Analyse a URL” card splits an address into scheme, username, host, path and parameters.
Common mistakes
- Taking Base64 for encryption and “hiding” a password in it.
- Encoding a value twice and getting %2520 instead of %20.
- Using whole-URL encoding on a parameter value, which then keeps an unencoded & or = and breaks the request.
- Trusting a JWT's content without verifying its signature.
- Losing accents by encoding with a function that does not go through UTF-8.
Honest limits
- The display of a very long result is truncated, but copy and download are complete.
- Verifying a JWT requires the key: without it, only reading is possible.
- None of these three mechanisms protects sensitive data: for that you need real encryption.
Frequently asked questions
Why does Base64 make data bigger?
Because it represents 3 bytes with 4 characters: volume grows by a third (33%), plus any final padding.
Is Base64 safe for hiding information?
No. It has no key and decodes instantly. It is not encryption.
Is my JWT sent to a server?
No. The token, secret and key stay in your browser.
What does %20 mean in an address?
It is an encoded space: the character with code 0x20 is written with a % followed by its hexadecimal value.
How do I decode a Base64 image?
Paste the string (with or without the data: prefix) into the tool: it detects the file type, shows the preview and offers the download.