What Is Base64 Encoding? Examples, Uses, and JavaScript

Base64 groups input into sets of three bytes (24 bits), then represents each group as four 6-bit values from a 64-character alphabet. If the final group has fewer than three bytes, = padding may be used. The encoding is specified in RFC 4648.

Four output characters represent three input bytes, so the encoded representation is approximately 33% larger before accounting for padding and surrounding format. Base64 can carry bytes through text-only interfaces, but it is not compression and does not make data private.

For ASCII-only input, the browser's built-in btoa() and atob() methods provide a short example: btoa("Hello") returns SGVsbG8=, and atob("SGVsbG8=") returns Hello. These functions operate on byte-like strings; they do not directly encode arbitrary Unicode text as UTF-8.

For UTF-8 text, convert to bytes before Base64 encoding and decode the bytes with TextDecoder. This browser example handles general Unicode strings:

function encodeBase64Utf8(text) {
  const bytes = new TextEncoder().encode(text);
  let binary = "";
  for (const byte of bytes) binary += String.fromCharCode(byte);
  return btoa(binary);
}

function decodeBase64Utf8(base64) {
  const binary = atob(base64);
  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
  return new TextDecoder("utf-8", { fatal: true }).decode(bytes);
}

encodeBase64Utf8("Hello 👋");

Node.js Buffer can encode and decode UTF-8 text directly: Buffer.from("Hello 👋", "utf8").toString("base64") produces a Base64 string, and Buffer.from(encoded, "base64").toString("utf8") decodes it. Validate data according to the protocol using it; a decoder accepting a string does not guarantee that the input was valid canonical Base64.

A Data URI includes a media type and data, for example data:text/plain;base64,SGVsbG8=. Image data URIs can place small image bytes directly into HTML or CSS. The Image to Base64 tool creates a data URI from an image file.

Other uses include representing binary data in JSON fields or text-based transport formats that explicitly expect Base64. Use the encoding required by the receiving protocol; standard Base64 and URL-safe Base64 use different characters.

Base64 is reversible and should not be used to hide passwords, API keys, personal data, or other secrets. Use encryption and access controls when confidentiality is required. Encoding also adds size, so for large images or files, normal binary delivery with appropriate caching is usually more efficient.

When decoding, handle invalid characters and invalid UTF-8 according to the application needs. Never assume that successful Base64 decoding proves a payload is trustworthy or authentic.