🍋
Menu
How-To Beginner 1 min read 185 words

How to Encode and Decode Base64 Data

Base64 converts binary data to ASCII text for safe transmission. Learn how Base64 encoding works and its common uses in web development.

Key Takeaways

  • Base64 encodes binary data using 64 ASCII characters (A-Z, a-z, 0-9, +, /).
  • Data URIs**: Embedding images directly in HTML/CSS as `data:image/png;base64,...`
  • Standard Base64 uses `+` and `/` which are special characters in URLs.
  • Decoding reverses the process, converting the ASCII text back to binary.

What Is Base64?

Base64 encodes binary data using 64 ASCII characters (A-Z, a-z, 0-9, +, /). It's used to embed binary data in text-based formats like JSON, XML, HTML, and email. The output is ~33% larger than the input.

Common Use Cases

  • Data URIs: Embedding images directly in HTML/CSS as data:image/png;base64,...
  • Email attachments: MIME encoding uses Base64 for binary attachments.
  • API payloads: Sending binary files in JSON API requests.
  • JWT tokens: Header and payload are Base64URL-encoded.

Base64 vs Base64URL

Standard Base64 uses + and / which are special characters in URLs. Base64URL replaces these with - and _, making encoded data safe for URLs and filenames. JWT tokens and URL parameters use Base64URL.

Performance Considerations

Base64 adds 33% overhead. A 1MB image becomes 1.33MB when Base64-encoded. For small inline images (under 10KB), the overhead is acceptable. For larger files, separate file uploads are more efficient.

Decoding

Decoding reverses the process, converting the ASCII text back to binary. If the Base64 string is corrupted (wrong length, invalid characters), decoding fails. Common issues include missing padding (=) characters.

Outils associés

Formats associés

Guides associés