Base64 Encoding: What It Is and When Developers Use It

Base64 isn’t encryption and it isn’t compression. It’s a way to represent binary data using only printable ASCII characters. The name comes from the 64 characters it uses: A-Z, a-z, 0-9, plus +, /, and = for padding.

The reason it exists: many systems were built to handle text and can get confused by raw binary data. Email servers, HTTP headers, certain APIs, XML documents, JSON fields — they’re all text-based formats that can’t reliably transmit arbitrary bytes. Base64 translates binary into something safe to put in those contexts.

Encode or decode base64, or generate a ready-to-paste data URI.

The overhead tradeoff

Every 3 bytes of input become 4 characters of base64 output. That’s a 33% size increase, and it’s not recoverable with compression.

Before inlining anything as base64, the original file size matters. A 1KB SVG icon gains 330 bytes as base64 — negligible. A 200KB JPEG gains 66KB and you lose all the browser caching benefits that come with a separate file request. The crossover point depends on how expensive the HTTP request would be relative to the size increase, but a rough rule: base64 makes sense for assets under about 5-10KB. Anything larger is usually better served as a separate file.

Data URIs in CSS

The main reason frontend developers use base64 is data URIs — embedding small assets directly into CSS instead of linking to separate files.

/* External file (one HTTP request) */
background-image: url('/images/dot.png');

/* Base64 data URI (no HTTP request, larger CSS file) */
background-image: url('data:image/png;base64,iVBORw0KGgo...');

A data URI eliminates one HTTP request and ensures the asset loads atomically with the stylesheet. For tiny repeating patterns, small icons, or loading spinners, this can be a net win. The asset is cached as part of the stylesheet rather than separately.

For fonts, it’s the same pattern:

@font-face {
  font-family: 'CustomFont';
  src: url('data:font/woff2;base64,d09GMg...') format('woff2');
}

In HTML attributes

<img src="data:image/svg+xml;base64,PHN2Zy...">

Less common than the CSS use case, but useful for dynamically generated content, email templates where external images might be blocked, or cases where you want a small image to be part of the HTML payload rather than a separate request.

API payloads and JSON

JSON doesn’t have a binary data type. When an API needs to send image data inside a JSON response, base64 is the standard approach:

{
  "filename": "avatar.jpg",
  "contentType": "image/jpeg",
  "data": "/9j/4AAQSkZJRgABAQA..."
}

This is common in APIs that return user-uploaded files, image generation responses, or document exports. On the receiving end, you decode the base64 string and handle the resulting binary data.

JWT tokens

JWT (JSON Web Tokens) use base64url encoding for their header and payload sections. Base64url is a slight variant that replaces + with - and / with _ to make the output URL-safe (so it can be used in query strings without encoding). If you’ve ever decoded a JWT in a debugger, you were base64-decoding those sections.

Worth knowing: decoding a JWT header or payload is trivial — anyone with the token string can read the claims. JWTs aren’t encrypted by default. The signature section verifies the token hasn’t been tampered with, but the claims are visible to anyone. Don’t put sensitive data in JWT payloads.

What base64 is not

Base64 encoding is completely reversible with no secret. Anyone who sees a base64 string can decode it immediately. It provides no security, no confidentiality, and no obfuscation worth the name. Don’t use it to hide sensitive data — use actual encryption for that.

In-browser encoding

For one-off tasks, JavaScript has btoa() for encoding and atob() for decoding. But these only handle strings. For binary files — dropping in an SVG, a font file, or an image and getting a ready-to-paste data URI — you need something that handles the file reading and wraps the correct MIME type prefix automatically.

Encode files to base64, decode base64 strings, and get data URIs with the correct content type header.