How to Use the Base64 Encoder & Decoder

What is the Base64 Encoder & Decoder?

The Base64 Encoder & Decoder converts text, files, and images to and from Base64 format — entirely in your browser. No data is sent to any server, making it safe for sensitive content like tokens, credentials, or private images. It supports three modes (Text, File, Image), multiple character sets, and the URL-safe Base64 variant.

What is Base64 and When Do You Need It?

Base64 is a binary-to-text encoding scheme that represents binary data as a string of 64 printable ASCII characters. Every 3 bytes of input become 4 characters of output, so the encoded result is about 33% larger than the original.

You will encounter Base64 whenever binary data needs to travel through a text-only channel:

• Embedding images in HTML or CSS — <img src="data:image/png;base64,..." />
• JSON APIs — transmitting file contents or binary payloads in a JSON body
• JWT tokens — the header and payload are Base64URL-encoded
• Email attachments — MIME uses Base64 to embed file data
• Environment variables — storing certificates or keys as a single string

Three Modes at a Glance

| Mode | What it does | |---|---| | Text | Encode/decode plain text strings, with charset support | | File | Upload any file and get its raw Base64 string | | Image | Upload an image and get a data-URI, with live preview |

Text Mode — Encode and Decode Strings

Encoding text to Base64

1. Open the Base64 tool. The tool opens in Text mode by default.
2. Paste your text into the Input area on the left.
3. Click Encode. The Base64 result appears immediately in the Output area.
4. Click Copy to copy the result to your clipboard.

Decoding a Base64 string

1. Paste your Base64 string into the Input area.
2. Click Decode (or use Auto — the tool detects Base64 input automatically).
3. The decoded text appears in the Output area.

Using Auto mode

Auto is the fastest option for ad-hoc work. When you click Auto, the tool inspects the input and decides: if it looks like Base64, it decodes it; otherwise it encodes it. The detection badge at the top right of the Input area shows what was detected (Plain Text or Base64) so you always know which operation ran.

File Mode — Convert Any File to Base64

1. Click the File tab at the top of the tool.
2. Drag and drop a file onto the drop zone, or click Choose File to open the file picker.
3. The tool reads the file in your browser and outputs the raw Base64 string.
4. Click Copy to copy the string, or Download to save it as a .txt file.

File mode works with any file type — .pdf, .zip, .csv, .json, .exe, and so on. The maximum supported size is 20 MB.

Image Mode — Convert Images with Live Preview

Image mode is purpose-built for working with image data URIs.

Image to Base64

1. Click the Image tab.
2. Drop an image file (PNG, JPEG, WebP, GIF, SVG, BMP, ICO) onto the drop zone.
3. The output shows the complete data:image/...;base64,... string ready to paste into HTML, CSS, or JSON.
4. A Preview card appears below the output showing the image alongside its type, resolution, and file size.

Base64 to image

1. Stay in Image mode and paste a Base64 data-URI (or bare Base64 bytes from an image) into the Input area.
2. Click Decode. The tool parses the image type from the magic bytes and renders a live preview.
3. Click Download Image in the preview card to save the recovered image to your device.

Advanced Options

Click Advanced to expand the settings panel.

Charset

The Charset selector controls how text is converted to bytes before encoding, and how bytes are interpreted when decoding. The default is UTF-8, which is correct for almost all modern text. Change the charset when:

• Decoding Base64 that was originally encoded in GBK or GB18030 (Simplified Chinese)
• Working with legacy files encoded in Shift_JIS (Japanese), EUC-KR (Korean), or Windows-1252 (Western European)
• Sharing data with systems that use non-Unicode encodings

If decoded text looks garbled or shows replacement characters (?) try switching the charset to match the original source.

Base64 Variant

| Variant | Characters | Padding | Use when | |---|---|---|---| | Standard (default) | +, /, = | Yes | General use — email, JSON, config files | | URL-Safe | -, _, no = | No | URLs, JWT tokens, filenames, query strings |

Standard Base64 uses + and /, which have special meaning in URLs and must be percent-encoded. URL-Safe Base64 replaces them with - and _ so the string is safe to use anywhere without additional encoding.

The Swap Button

Click Swap to move the Output text back into the Input field in one click. This is handy when you want to immediately re-encode something you just decoded, or chain multiple operations.

Common Use Cases

Embedding an image inline in HTML

Upload an icon or small image in Image mode, copy the data-URI output, and paste it directly into an <img> tag. The image loads from the HTML file itself — no external request needed.

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="icon" />

Storing a certificate in an environment variable

Certificates are binary files. Encoding them with the Base64 tool gives you a single-line string you can paste into a .env file or CI secret. To recover the original file, paste the string back into the tool and decode it using File mode.

Inspecting a JWT token

A JWT has three dot-separated parts. The first two are Base64URL-encoded. Paste any JWT segment into the tool in Text mode and click Decode — you will see the raw JSON header or payload immediately. The tool handles the URL-safe characters (- and _) automatically.

Sharing binary data in a JSON API

When a REST API needs to accept or return binary data (for example a generated PDF), the convention is to Base64-encode it inside a JSON string field. Use File mode to encode the file, then paste the output into your JSON payload.

Tips and Tricks

• Clear resets only the side it appears on. Input and Output have separate Clear buttons so you can wipe the input while keeping the output, or vice versa.
• Load Sample in Text mode pre-fills a short demo string so you can see encoding and decoding in action without preparing your own data.
• Paste from clipboard — the Paste button reads your clipboard directly, saving you the Ctrl/Cmd+V step.
• The output size is shown in the Output header so you can immediately see how much larger Base64 is than the original.

Related Tools

• JSON Formatter — Beautify and validate JSON, useful when inspecting the decoded payload of a JWT or API response.
• JSON Diff — Compare two JSON documents side-by-side with color-coded highlighting.