Developer hub

Base64 for your stack

Reference patterns and copy-ready snippets for working with Base64 and data URIs in HTML, CSS, and JavaScript — without a single byte leaving the browser.

Data URIs

Inline assets without a request

A data URI packs a file directly into a URL. It’s ideal for tiny, frequently used assets where an extra HTTP round trip costs more than the added bytes.

Best for small assets

Icons, spinners, and UI sprites under a few KB benefit most.

Mind the size

Encoded data is ~33% larger, so large images are better served as files.

html

<img
  src="data:image/png;base64,iVBORw0KGgo..."
  alt="Inline logo" width="48" height="48">

css

.badge {
  background-image:
    url("data:image/svg+xml;base64,PHN2Zy...");
  background-size: 16px 16px;
}

CSS embedding

Background images, inline

Embed an encoded image straight into a stylesheet. SVG is especially efficient as a data URI because the markup compresses well.

Generate a snippet

Alphabets

Standard vs URL-safe

Two common Base64 alphabets exist. Pick the one that matches where the string is headed.

Standard

Uses + and /, with = padding. The default for most APIs, email, and file encoding.

URL-safe

Swaps + and / for - and _ so the string is safe in URLs and filenames.

Bring Base64 into your build

The interactive generators and validators are coming next. In the meantime, explore the categories and guides.

Browse tools Read the blog