</> DevDrillsSupport

Encoding Drill

How Base64 encoding works in JavaScript.

Base64 is everywhere in frontend development: JWT tokens, APIs, images, file uploads, authentication, and browser APIs. Understanding how Base64 works helps you debug frontend applications more effectively.

6 min read

Base64 is encoding, not encryption

One of the most common mistakes is thinking Base64 protects data.

Encoding

Transforms data into another format for transport or storage.

Encryption

Protects data using a secret key.

Anyone can decode Base64 instantly. It does not secure sensitive data.

Why Base64 exists

Some systems historically handled only plain text safely. Binary data like images or files could break transmission.

Base64 converts binary data into a text-safe format using:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789+/

That gives Base64 its name: 64 possible characters.

How encoding works

JavaScript provides two browser functions:

btoa

Converts text into Base64.

atob

Decodes Base64 back into text.

const encoded = btoa("Hello");
console.log(encoded);

// SGVsbG8=

const decoded = atob(encoded);
console.log(decoded);

// Hello

JWT tokens use Base64

JWT tokens are split into three parts:

header.payload.signature

The header and payload are Base64URL encoded. That allows JWT data to travel safely through HTTP requests and browser storage.

This is why JWT decoders are basically Base64 tools with extra parsing logic.

Unicode problems

A common frontend issue happens when encoding Unicode characters.

btoa("Привіт");

// may fail

Browser Base64 functions were originally designed for ASCII text.

Safer encoding usually looks like this:

btoa(
  unescape(
    encodeURIComponent(text)
  )
)

Base64 increases size

Base64 is convenient, but it increases payload size by roughly 33%.

Images

Large images become significantly larger in Base64.

APIs

Large payloads increase request size.

Performance

Huge Base64 strings can affect rendering and memory.

Common frontend use cases

  • JWT authentication tokens
  • Inline images
  • API payloads
  • File uploads
  • Browser storage
  • Email attachments

Try the tool

Encode and decode Base64 instantly

Use the DevDrills Base64 Encoder Decoder to convert text, inspect JWT payloads, and preview Base64 images directly in your browser.

Open Base64 Tool