Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PC×
Skip to content
World desk2 min

Base64 Decoding in JavaScript: Padding, UTF-8, and the atob() Trap

JavaScript’s atob() decodes Base64 into byte-valued characters, not UTF-8 text. Convert the bytes and use TextDecoder for text—or keep them as bytes for binary data.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

atob() decodes Base64 into bytes, but returns those bytes in a JavaScript string rather than decoding them as UTF-8 text. To get text, convert the result to a byte array and pass it to TextDecoder. If the Base64 represents an image or other binary data, keep it as bytes instead.

What atob() actually returns

The browser’s atob() method reverses Base64 encoding, but its output is a so-called binary string: each character, in the range U+0000 through U+00FF, represents one decoded byte. That is not the same as interpreting those bytes as Unicode text. The HTML Living Standard’s Base64 utility methods define the browser behavior, and MDN’s atob() reference explains the byte-string result.

This distinction causes the familiar “garbled text” problem. A character outside the ASCII range is often encoded in UTF-8 using multiple bytes. Displaying those individual byte values as characters does not reconstruct the original Unicode character; UTF-8 decoding is a separate step.

Decode Base64 to UTF-8 text

Convert each character returned by atob() into its byte value, then decode those bytes as UTF-8:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
function base64ToBytes(base64) {
  const binary = atob(base64);
  return Uint8Array.from(binary, (character) => character.codePointAt(0));
}

function base64ToUtf8(base64) {
  return new TextDecoder("utf-8").decode(base64ToBytes(base64));
}

Use base64ToUtf8(encoded) when the decoded bytes are valid UTF-8 text. The WHATWG Encoding Standard describes UTF-8, while MDN’s Encoding API reference documents decoding bytes to text with TextDecoder.

Keep binary payloads as bytes

Not every Base64 value represents text. If the decoded content is an image, compressed file, or another binary format, do not run it through a text decoder. Use the resulting Uint8Array with the API or file-handling code that expects bytes. Decoding arbitrary binary as UTF-8 can produce replacement characters or text that has no useful meaning.

Padding and invalid input

Base64 uses = as its conventional padding character, but it is inaccurate to say that padding is always required or never required across all decoders. Browser atob() follows the HTML Standard’s forgiving-Base64 decoding algorithm; it can still throw InvalidCharacterError when the input fails that algorithm. Other libraries may enforce different validation rules, so check the behavior of the specific decoder rather than assuming browser and server-side policies match.

Byte-array alternative

Where the target browser supports it, Uint8Array.fromBase64() returns decoded bytes directly, avoiding the intermediate binary string:

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const bytes = Uint8Array.fromBase64(base64);
const text = new TextDecoder("utf-8").decode(bytes);

MDN recommends considering this byte-oriented alternative. Check compatibility for the browsers and runtimes you support before relying on it; the cited documentation does not establish a complete browser-version matrix.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

The inverse pitfall with btoa()

btoa() is not a general-purpose encoder for arbitrary Unicode strings. It treats each input character as one byte and throws when a character exceeds U+00FF. To Base64-encode Unicode text, first encode the text as UTF-8 bytes, then encode those bytes. See MDN’s btoa() reference for the Unicode limitation and byte-conversion guidance.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.