Base64 Images: When to Use Data URIs in CSS & HTML

What is Base64 Encoding?

Base64 represents binary data using 64 ASCII characters (A-Z, a-z, 0-9, +, /). Each 3 bytes of binary becomes 4 Base64 characters, meaning Base64 output is approximately 33% larger than the original binary. An image encoded as Base64 is inlined as text in your HTML or CSS.

Data URI Syntax

data:[mediatype][;base64],

/* Examples: */
/* PNG: */
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

/* SVG (can be URL-encoded instead of Base64): */
data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E

/* In CSS: */
.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov...');
}

/* In HTML: */

SVG: URL Encoding vs Base64

For inline SVG, URL encoding (percent-encoding) produces smaller output than Base64 and is still text-searchable. Prefer URL-encoded SVG over Base64 SVG.

/* Base64 SVG — 33% larger than necessary */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...");

/* URL-encoded SVG — smaller, readable */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3C/svg%3E");

/* Even better: inline SVG in HTML (no encoding overhead at all) */

When to Use Base64 vs External File

Generate Base64 in JavaScript

// Browser: File to Base64
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsDataURL(file); // returns "data:image/png;base64,..."
  });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async e => {
  const dataUri = await fileToBase64(e.target.files[0]);
  document.querySelector('img').src = dataUri;
});

// Node.js: image file to Base64 string
const fs = require('fs');
const base64 = fs.readFileSync('icon.png').toString('base64');
const dataUri = `data:image/png;base64,${base64}`;

Base64 Pitfalls to Avoid

• Base64-encoding large images — a 100KB photo becomes 133KB as Base64, is embedded in every page load, and is not cached by the browser. Always use external files for images over 2KB.
• Not using browser cache — external image files are cached by the browser across pages. Base64-inlined images are not — they're downloaded with every HTML/CSS file.
• Base64 in JavaScript bundles — webpack and other bundlers can inline images as Base64. Check your bundle size; a few images can add significant kilobytes to your JS bundle.
• Using Base64 in JSON APIs for image transfer — sending images as Base64 in JSON APIs bloats payload by 33% and prevents streaming. Use multipart/form-data or pre-signed URLs instead.

Frequently Asked Questions

How do I convert an image to Base64 in a browser?

Use StudioLimb's Image Compressor or Squoosh to export as Base64, or use the browser's FileReader API (see code example above). For SVG, copy the SVG source code and URL-encode it manually or with an online tool.

Can search engines index Base64 images?

Google can index the content of external image files but cannot index Base64-embedded images (they're opaque text strings to the crawler). If image SEO matters for your content, always serve images as external files with descriptive filenames and alt text.

Is Base64 a form of compression?

No — Base64 is encoding, not compression. It makes the data larger (by ~33%). Gzip/Brotli HTTP compression can partially offset this, but Base64-encoded images in CSS files will still be larger than external image files even after compression.

When does Base64 actually improve performance?

Only for very small images (< 2KB) where the HTTP request round-trip cost (typically 50–100ms) is greater than the size overhead cost. For most images in 2026 with HTTP/2 multiplexing, external files are faster because they're individually cacheable and don't add to HTML/CSS parse time.