Back to Learning Center

Embedding Base64 using Data URIs in HTML & CSS

A practical tutorial on how to embed images, fonts, and SVG files directly into your frontend code using the data: URI scheme.

Typically, when a web browser loads a website, it has to make a separate HTTP request to the server for every single image, font, and stylesheet referenced in the HTML. If you have 50 small icons on your page, that's 50 individual requests. This can slow down the initial page load significantly.

Data URIs provide a clever solution to this problem. Instead of linking to an external file, you can convert the file into a Base64 string and embed it directly into your HTML or CSS. The browser reads the Base64 string and renders the image instantly, entirely bypassing the need for a network request.

The Data URI Syntax

Every Data URI follows this exact strict format:

data:[mime-type];base64,[base64-encoded-data]

1. Embedding Images in HTML

To embed an image directly into an HTML document, you use the standard <img> tag, but instead of putting a URL in the src attribute, you paste the entire Data URI.

html
<!-- A standard image loading via HTTP request -->
<img src="/images/logo.png" alt="Company Logo" />

<!-- The exact same image, embedded directly using Base64 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="Company Logo" />

Note: The Base64 string above is a real, perfectly valid 1x1 black pixel. Try copying it into your browser's URL bar!

2. Embedding Images in CSS (Backgrounds)

One of the most common and powerful use cases for Data URIs is placing small icons, spinners, or repeating textures directly inside a CSS file. This ensures the CSS and the icons load simultaneously, preventing the "pop-in" effect where the page layout shifts as images load later.

css
/* Standard CSS Background */
.loading-spinner {
  background-image: url('../assets/spinner.gif');
}

/* Base64 Embedded CSS Background */
.loading-spinner {
  background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpCQkCH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MvdSyvMA4BRiF0PZJj1yY4V5OQABOwwF20t6F1oJ3DwykIg8Rj4QAAIfkECQoAAAAsAAAAABAAEAAAAzYIujz+8PNJyyNZ19W17sHWAUJhxOEIxG0d4MIIwTCT6m0t/C3oXWhfaOeYMBKPh2MhAAAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MvdSyvMA4BRiF0PZJj1yY4V5OQABOwwF20t6F1oJ3DwykIg8Rj4QAAIfkECQoAAAAsAAAAABAAEAAAAzYIujz+8PNJyyNZ19W17sHWAUJhxOEIxG0d4MIIwTCT6m0t/C3oXWhfaOeYMBKPh2MhAAAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MvdSyvMA4BRiF0PZJj1yY4V5OQABOwwF20t6F1oJ3DwykIg8Rj4QAAIfkECQoAAAAsAAAAABAAEAAAAzYIujz+8PNJyyNZ19W17sHWAUJhxOEIxG0d4MIIwTCT6m0t/C3oXWhfaOeYMBKPh2MhAAAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MvdSyvMA4BRiF0PZJj1yY4V5OQABOwwF20t6F1oJ3DwykIg8Rj4QAAIfkECQoAAAAsAAAAABAAEAAAAzYIujz+8PNJyyNZ19W17sHWAUJhxOEIxG0d4MIIwTCT6m0t/C3oXWhfaOeYMBKPh2MhAAA7');
}

3. Embedding Custom Web Fonts

Custom fonts can cause "Flash of Unstyled Text" (FOUT). If you convert a WOFF2 font file to Base64, you can embed it directly inside your @font-face declaration, ensuring the font is available the exact millisecond the CSS is parsed.

css
@font-face {
  font-family: 'MyCustomFont';
  /* The MIME type for woff2 is font/woff2 */
  src: url('data:font/woff2;base64,d09GMgABAAAAAAQwAA4AAAAABWAAAA...[rest of the massive string]...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

4. Embedding SVGs (Without Base64!)

Did you know that you don't actually need to Base64 encode SVG files to use them as Data URIs? Because SVGs are just XML text, you can actually pass them directly using URL encoding. This is often vastly more efficient than Base64 for SVGs!

css
/* BAD: Base64 Encoded SVG (Unnecessary overhead) */
.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==');
}

/* GOOD: URL Encoded plain-text SVG (Smaller, readable, compressible) */
.icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="red"/></svg>');
}

Best Practices and Warnings

When to use them

  • • Very small images (under 5KB)
  • • Critical CSS background images
  • • HTML email templates (to bypass image blockers)
  • • Tiny placeholder images (blurhash)

When to AVOID them

  • • Large images (Adds 33% extra weight)
  • • Images that change frequently (Breaks caching)
  • • Repeated images across multiple pages
  • • Mobile applications (Parses slowly)

The Golden Rule: Never Base64 encode an image larger than 10KB. While you save one HTTP request, you severely bloat your HTML/CSS payload, which blocks the browser's main thread while it parses the massive string, resulting in much worse performance overall.

Convert your images now!

Use our free Image to Base64 tool to instantly generate valid HTML and CSS Data URIs for your projects.

Image to Base64 Converter