Base64 & Data URIs: Inlining Images and Webfonts for Page Speed

What is Base64 Encoding?

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format. By translating bytes into 64 safe, printable characters (A-Z, a-z, 0-9, +, /, and padding =), Base64 ensures that raw files can be transmitted over text-based networks (like HTML, CSS, JSON, or emails) without getting corrupted.

How the Base64 Algorithm works

Base64 works by taking groups of three 8-bit bytes (24 bits total) and splitting them into four 6-bit segments:

• Three bytes = 8 bits × 3 = 24 bits.
• Split into four segments = 6 bits × 4 = 24 bits.
• Each 6-bit segment represents a value between 0 and 63, which maps directly to one of the 64 characters in the Base64 index table.
• If the input has only one or two bytes at the end, padding characters (=) are added to make the string length a multiple of four.

What is a Data URI?

A Data URI is a uniform resource identifier scheme that allows content authors to embed files inline inside web documents. Instead of linking to a remote image file using a traditional URL, you write the mime-type and the Base64 string directly inside the code:

data:[mediatype];base64,[base64-encoded data]

When to Inline Files as Base64 (Pros)

Inlining files has highly specific performance advantages:

1. Fewer HTTP requests: Every remote image, font, or script requires a separate network handshake. By inlining small graphics (like icons, logos, or loading animations), you can bundle them directly with your CSS or HTML, reducing server round-trips.
2. Self-Contained email templates: Email clients are notoriously restrictive. Remotely hosted images are often blocked by default. Embedding images as Base64 Data URIs allows emails to render fully and immediately offline.
3. Widget Portability: If you are building third-party script integrations, embedding assets inline means your users only need to paste a single JS/CSS file.

How to use Base64 in HTML and CSS

Once you convert your file, here is exactly how to embed the output:

1. HTML Image Source

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="My Embedded Icon" />

2. CSS Background Image

.custom-bg {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWx...");
}

3. CSS Webfont Declaration

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

Convert Files Offline and Instantly

Avoid uploading your private files to suspicious server-side conversion websites! Use our free Base64 File to Data URI Converter. Drag and drop any image, font, SVG, or document to generate clean, copy-pasteable HTML image elements, raw strings, and CSS background rules. Everything runs locally in your browser using the HTML5 FileReader API—nothing is uploaded.