Base64 Data URIs Explained

The data: URI scheme embeds file contents directly in a document as Base64-encoded text. This eliminates the HTTP request for a file — at the cost of embedding the data, which is ~33% larger than the original and can't be cached separately.

Syntax

data:[<mediatype>][;base64],<data>

Where:
  mediatype   = a MIME type like "image/png" or "text/html"
                Default is "text/plain;charset=US-ASCII" if omitted
  ;base64     = indicates the data is Base64-encoded
                If omitted, data is URL-encoded text
  data        = the Base64-encoded (or URL-encoded) content

Examples:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
data:image/svg+xml;base64,PHN2ZyB4bWxucz0...
data:text/html;base64,PCFET0NUWVBFIGh0bWw...
data:application/json;base64,eyJrZXkiOiJ2YWx1ZSJ9
data:text/plain;charset=utf-8,Hello%20World   (no base64, just URL-encoded)

Common MIME Types

Image types:
  data:image/png;base64,...       PNG image
  data:image/jpeg;base64,...      JPEG image
  data:image/gif;base64,...       GIF image
  data:image/webp;base64,...      WebP image
  data:image/svg+xml;base64,...   SVG image
  data:image/x-icon;base64,...    ICO favicon

Font types:
  data:font/woff;base64,...       WOFF font
  data:font/woff2;base64,...      WOFF2 font

Text/code types:
  data:text/html;base64,...       HTML fragment
  data:text/css;base64,...        CSS stylesheet
  data:text/javascript;base64,... JavaScript
  data:application/json;base64,...JSON data
  data:application/pdf;base64,... PDF file

Where Data URIs Work

<!-- HTML img tag -->
<img src="data:image/png;base64,..." alt="Embedded image">

<!-- HTML link tag (favicon) -->
<link rel="icon" href="data:image/svg+xml;base64,...">

<!-- CSS background-image -->
.element {
  background-image: url('data:image/png;base64,...');
}

<!-- CSS @font-face -->
@font-face {
  font-family: 'MyFont';
  src: url('data:font/woff2;base64,...') format('woff2');
}

<!-- JavaScript (creating object URLs from data) -->
const img = new Image();
img.src = 'data:image/png;base64,...';

<!-- Anchor download link -->
<a href="data:application/json;base64,..." download="data.json">Download</a>

Generating Data URIs

// JavaScript (browser) — from File object
const reader = new FileReader();
reader.onload = (e) => {
  const dataUri = e.target.result; // "data:image/png;base64,..."
  document.getElementById('preview').src = dataUri;
};
reader.readAsDataURL(file);

// JavaScript (browser) — from fetch
const response = await fetch('/image.png');
const blob = await response.blob();
const dataUri = await new Promise(resolve => {
  const reader = new FileReader();
  reader.onload = e => resolve(e.target.result);
  reader.readAsDataURL(blob);
});

// Node.js — from file
const fs = require('fs');
const mime = 'image/png';
const base64 = fs.readFileSync('image.png').toString('base64');
const dataUri = `data:${mime};base64,${base64}`;

Parsing a Data URI

function parseDataURI(uri) {
  const match = uri.match(/^data:([^;]+)?(?:;charset=([^;]+))?(?:;(base64))?,(.*)$/);
  if (!match) return null;
  return {
    mimeType: match[1] || 'text/plain',
    charset: match[2] || null,
    encoding: match[3] || 'url',
    data: match[4],
    // Decode:
    decoded: match[3] === 'base64' ? atob(match[4]) : decodeURIComponent(match[4]),
  };
}

const parsed = parseDataURI('data:image/png;base64,iVBOR...');
// { mimeType: 'image/png', encoding: 'base64', data: 'iVBOR...' }

Performance Considerations

• +33% size: Base64 inflates data by ~33%. A 10KB image becomes ~13.7KB as Base64.
• No separate caching: A data URI cannot be cached by the browser independently — it lives inside the HTML or CSS file and expires with it.
• Blocking CSS: Embedding large Base64 data URIs in CSS blocks render while the entire CSS file downloads.
• HTTP/2 parallel loading: With HTTP/2, multiple small requests cost less than one big file — weakening the "save an HTTP request" argument.

Good candidates for data URIs:

• Favicons and tiny icons (< 2KB)
• Loading spinners and placeholders
• Single-file HTML applications
• HTML emails (many clients block external images)

Size Limits

Browsers have different size limits for data URIs:

Chrome:   ~2GB (effectively unlimited)
Firefox:  ~2MB (per data URI)
Safari:   ~2MB (per data URI in some contexts)
IE 11:    32KB (severely limited)
Edge:     2MB

For practical use, keep data URIs under 1MB. For IE 11 support (legacy), keep them under 32KB.