Skip to main content

Base64 Encoder & Decoder

Encode text or files to Base64 and data URIs, or decode Base64 back to text, images, or downloadable files.

Runs 100% in your browser

Shortcuts
Copy the output
Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

How to use the Base64 Encoder / Decoder

  1. Choose Encode or Decode.

  2. Type text, drop a file, or paste a Base64 string or data URI.

  3. Copy the result, or download the decoded file.

Example: Encoding text with emoji

Input
DevBottle 🍺
Output
RGV2Qm90dGxlIPCfjbo=

The text is encoded as UTF-8 first, so characters outside ASCII survive the round trip. Switch to Decode and paste the result back to check.

Frequently Asked Questions

What is Base64 encoding?

Base64 represents binary data using 64 printable ASCII characters, so files can travel through channels built for text: JSON payloads, data URIs, email, and HTTP headers. It isn't encryption or compression, and it makes data about 33% larger.

When should I use a data URI instead of a file?

For small, always-needed assets such as an icon in CSS, where saving a request outweighs the size increase. Above a few kilobytes, a separate file wins: it can be cached on its own, while an inline data URI is re-downloaded with every page that embeds it.

Is Base64 secure?

No. Anyone can decode it in seconds, as with the payload of a JWT. It only makes binary data safe to transmit as text. Use TLS for confidentiality in transit and real encryption for data at rest.

What is Base64URL?

A variant that replaces + and / with - and _ and usually drops the = padding, so the result is safe inside a URL or filename. JSON Web Tokens use it for each of their three parts.

About Base64 Encoding

Base64 is a binary-to-text encoding scheme that converts arbitrary binary data into a string of ASCII characters. It's widely used in web development to embed binary assets (images, fonts, SVGs) directly inside text-based files like HTML, CSS, and JSON — eliminating the need for a separate HTTP request.

Base64 Encoding: What It Is and When Developers Use It covers when Base64 helps and when it only adds weight.

Use Cases

Inline images in CSS

Embed small icons and backgrounds directly in your stylesheet to eliminate render-blocking requests.

background: url(data:image/svg+xml;base64,...);

Inline fonts

Embed a font file in a @font-face declaration to ship it with your CSS, avoiding FOUT.

src: url(data:font/woff2;base64,...);

API payloads

JSON cannot carry binary data natively. Base64-encoding binary fields lets you send images or files inside a JSON request body.

HTML email

Email clients often block remote image requests. Embedding images as data URIs ensures they always display.

Data URI Format

data:[mime-type];base64,[encoded-data]

For example: data:image/png;base64,iVBORw0KGgo.... Toggle "Data URI" in the encoder to include the header automatically.

When NOT to use base64

Base64 increases file size by ~33%. For large assets (>5KB), serving them as separate files is usually faster — they can be cached independently by the browser, whereas an inline data URI re-downloads with every page load. Use base64 for small, frequently-used assets like icons and small decorative images.