Base64 Data URIs Explained: Embedding Images and Fonts in CSS/HTML

A data URI lets you embed a file's actual bytes directly inside an HTML or CSS document, as text, instead of pointing to a separate file with a normal URL. Base64 is what makes that possible for binary files like images and fonts.

The anatomy of a data URI

A data URI has the form data:[mime-type];base64,[encoded-data]. For example, a tiny red-dot PNG becomes:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB..." />

The browser decodes the Base64 portion back into raw image bytes and renders it exactly as if it had been loaded from a normal file — no network request required.

Using data URIs in CSS

The same technique works anywhere CSS accepts a URL:

.icon {
  background-image: url("data:image/svg+xml;base64,PASTE_BASE64_HERE");
}

@font-face {
  font-family: "MyIconFont";
  src: url("data:font/woff2;base64,PASTE_BASE64_HERE") format("woff2");
}

This is especially common for small SVG icons — see the SVG to Base64 tool to generate one, or the image to Base64 tool for raster images like PNG and JPEG.

The tradeoff: fewer requests, bigger payload

Inlining an asset removes a separate HTTP request, which can help for small, frequently-reused images (like a logo repeated across many pages) — especially over HTTP/1.1 where each request has overhead. But Base64 encoding adds about a 33% size overhead, and an inlined asset can no longer be cached independently of the document it lives in. For large images, or assets shared across many pages that benefit from long-term browser caching, a normal linked file is usually the better choice.

Try it

Use the Image to Base64 tool to generate a data URI from any image file, or the general Base64 converter for any other text or file content.