PDFFlare
7 min read

How to Encode or Decode Base64 Online (Images, Text, URLs)

Base64 shows up everywhere once you start looking for it — JWT tokens, data URIs inside CSS, image attachments in emails, basic auth headers, API keys in .env files. If you have ever seen a long string of letters, numbers, +, /, and = and wondered what it actually contained, Base64 is the answer.

In this guide you will learn what Base64 is, when it is used, and how to encode or decode Base64 online using PDFFlare's free Base64 Encode/Decode tool.

What Is Base64 (and What It Is Not)

Base64 is an encoding, not encryption. It converts binary data into a text format made up of 64 safe ASCII characters: A-Z, a-z, 0-9, plus +, /, and the padding character =. Anyone can decode Base64 — it provides zero security. It exists to make binary data travel safely across systems designed for text (email, URLs, JSON, HTTP headers).

A Base64-encoded string is about 33% larger than the original binary. That is the cost of representing 256 possible byte values using only 64 characters.

How to Encode and Decode Base64 (Step by Step)

  1. Open the tool: PDFFlare's Base64 Encode/Decode tool.
  2. Choose a direction:Encode (plain text → Base64) or Decode (Base64 → plain text).
  3. Paste your input: Any string works — passwords, JSON payloads, even emoji.
  4. Click Encode / Decode: The result appears instantly below the input.
  5. Copy the output: One click to clipboard.

Common Use Cases for Base64

Data URIs (Images Inside CSS or HTML)

Instead of linking to an image file, you can embed the image directly in your HTML or CSS as a data URI:

<img src="data:image/png;base64,iVBORw0KGgo..." />

This eliminates a network request (useful for tiny icons). The trade-off: larger CSS/HTML file sizes. Use for images under ~5 KB.

Basic Authentication Headers

HTTP Basic Auth sends credentials Base64-encoded:

Authorization: Basic YWxpY2U6c2VjcmV0

That string decodes to alice:secret. Which is why Basic Auth is only safe over HTTPS — over plain HTTP, anyone can decode the credentials.

JSON Web Tokens (JWTs)

JWTs have three Base64-encoded parts separated by dots: header.payload.signature. The header and payload are Base64-encoded JSON — meaning anyone can decode them to see what is inside. Only the signature is cryptographically protected.

Email Attachments (MIME)

Email protocols (SMTP) were designed for 7-bit ASCII. Every attachment — PDFs, images, spreadsheets — is Base64-encoded to survive the journey. That is why email attachments take about 33% more bandwidth than the raw file.

Storing Binary Data in JSON or Databases

JSON has no native binary type. To store binary data (file contents, encryption keys, hashes) in a JSON field, you Base64-encode it first, then decode on read.

Encoding API Keys and Secrets

Some services (e.g., Firebase, AWS) distribute credentials as Base64-encoded JSON blobs. You decode them to get your actual key material.

Base64 vs URL-Safe Base64

Standard Base64 uses + and / — both reserved characters in URLs. When embedding Base64 in a URL, use URL-safe Base64, which replaces them with - and _ and drops the = padding. JWTs, for example, use URL-safe Base64.

Encoding Images as Base64

Data URIs require Base64-encoded image data:

  1. Upload or read your image file as binary.
  2. Base64-encode the binary.
  3. Prefix with data:image/png;base64, (or the correct MIME type).
  4. Use as the src of an <img> tag or the url() value in CSS.

Only encode tiny images (under 5 KB) this way. For larger images, the size bloat and loss of caching make a regular <img src=...> tag a better choice. If you need to compress images first, use PDFFlare's image compressor.

Troubleshooting Base64

“Invalid Base64” Error

The most common cause: copy-paste artifacts. Newlines, trailing spaces, or pasted = padding being dropped. Before decoding, strip all whitespace from the input.

Decoded Output Looks Like Gibberish

The source data is probably binary (an image, a PDF, a compressed archive). Base64 decoders are designed for text — decoding a PNG into a text window will show control characters and gibberish. Save the decoded bytes to a file with the right extension instead.

Character Encoding Issues

Base64 operates on bytes, not characters. If your text contains non-ASCII characters (emoji, accented letters, CJK), the encoder first converts to UTF-8 bytes, then Base64-encodes. Decoding goes the other way. Mismatched encodings (Latin-1 vs UTF-8) cause garbled output.

Common Base64 Mistakes

  • URL-safe vs standard Base64 confusion. Standard Base64 uses +, /, and =. URL-safe Base64 (RFC 4648) substitutes -, _, and drops padding. Trying to decode URL-safe Base64 with a standard decoder fails. Always check which variant the source produced.
  • Forgetting padding in re-encoded output. Strict decoders require the trailing = padding characters. If you stripped them for URL inclusion, add them back before decoding (calculate based on input length mod 4).
  • Encoding binary data twice.Reading a file as text first then Base64-encoding the text yields garbage. Always read binary files as raw bytes (e.g. Node's readFileSync with no encoding) before encoding.
  • Using Base64 to “hide” data. Base64 is reversible by anyone — it's an encoding, not encryption. Never store passwords, API keys, or sensitive tokens in Base64-only form thinking it provides security.
  • Choking on whitespace in the input. Base64 strings sometimes wrap with newlines (PEM certificates do this). Some decoders strict-reject whitespace; others tolerate it. If decode fails, strip all whitespace and retry.
  • Confusing Base64 with Base32 or Base58. They're different alphabets (Base64 = 64 chars, Base32 = 32, Base58 = 58 — used in Bitcoin). They look similar but aren't interchangeable.

Where Base64 Shows Up in Real Systems

  • JWT tokens:Three Base64-URL-safe-encoded sections joined by dots: header, payload, signature. Decode the first two to inspect a JWT's claims.
  • HTTP Basic auth: Authorization: Basic dXNlcjpwYXNz— that's user:pass in Base64. Anyone watching the request can decode it (which is why Basic auth must always be paired with HTTPS).
  • data: URIs in HTML/CSS: data:image/png;base64,iVBORw0... — embeds an image directly in a stylesheet or HTML attribute, no separate file fetch.
  • Email attachments (MIME): Email transmits as 7-bit ASCII; binary attachments are Base64-encoded inside the email body.
  • X.509 certificates (PEM): The Base64-encoded block between -----BEGIN CERTIFICATE----- and -----END CERTIFICATE----- is the actual cert DER-encoded then Base64-wrapped.
  • Crypto signatures and hashes: Many APIs return signatures or hashes as Base64 strings — shorter than hex (66% the length).

Privacy Note

Base64 is not encryption. Never rely on Base64 to hide passwords, API keys, or personal information — anyone with a decoder (like the one you are reading about) can read the original data instantly. For genuine protection, use encryption (AES, RSA) and store secrets in dedicated secret managers. Use a hash generator for one-way fingerprints you do not need to reverse.

Workflow Notes Beyond the Basics

Base64 encoding is the format you reach for when you need to embed binary data in a context that only accepts text, and it comes up far more often than most engineers realize. The deeper point underneath all of this is that workflow tools earn their place not in the simple cases but in the cases where defaults fail. The simple cases are easy: drag, drop, click convert, done. The interesting cases are the ones where the defaults produce output that does not quite work, and the difference between a tool that survives a year of daily use and one that gets replaced is whether it gives you the knobs needed to handle those edge cases without leaving the tool. PDFFlare is built around that observation: every tool exposes the options that matter, the defaults work for ninety percent of cases, and the remaining ten percent have a clear path forward without requiring a different application or a complicated workflow. Try the tool on a real piece of work, identify where the defaults could be better for your specific use case, and adjust the relevant option. After a few iterations, you have a setting profile that matches your work better than any out-of-the-box default could, and the tool stops being a generic utility and starts being your tool, customized for what you actually do. That gradient — from generic utility to personalized tool — is the real value, and the time spent on the calibration pays back in every subsequent use of the tool over years of work.

One pattern worth internalizing about file workflows in general is that the cost of getting a setting wrong scales with how often you repeat the workflow. A one-off conversion where you accept the defaults loses you nothing if those defaults are slightly suboptimal. The same defaults applied to a recurring monthly process across hundreds of files accumulate into real time and quality losses over a year. The right discipline is to invest a few minutes calibrating a workflow the first time you set it up, document the settings somewhere you can find them later, and then run the calibrated workflow without further thought for the next six to twelve months. Re-evaluate when something changes, not on every individual run. This rhythm matches how most professionals work in practice — they have a few well-understood workflows that they execute on autopilot, and a much smaller number of new workflows that get the deliberate setup attention. The trick is to make sure your recurring workflows are the calibrated ones, not the default-accepting ones. PDFFlare's tools support this pattern by exposing the calibration knobs prominently and making them easy to discover, so the time you invest in setting up a workflow once compounds across every later execution. The end result is fewer surprises, more predictable output, and a noticeable reduction in the small frictions that interrupt focused work.

Wrapping Up

Base64 is one of those tools that feels magic until you understand it — then feels mundane. It is not encryption, it is not compression, it is not security. It is just a way to represent binary data in text. PDFFlare's Base64 tool handles both directions in your browser — no data leaves your device.

Related Tools

Back to all posts