Data URIs Explained: When and How to Use Base64 Encoding [2026]

Published April 19, 2026  •  8 min read  •  Image to Base64 Converter

A data URI is one of those web technologies that every developer encounters eventually — usually while inspecting a bundle, debugging CSS, or opening DevTools on a page with inline images. The concept is simple: instead of pointing to an external file, you embed the file's contents directly in the URL. But the details — when this is a good idea, how Base64 encoding actually works, and what the real performance trade-offs are — are less commonly understood.

This guide explains data URIs from first principles, walks through the Base64 encoding algorithm, shows practical examples in HTML and CSS, and gives you a clear decision framework for when to embed versus when to link.

1. What Is a Data URI?

A data URI (also written as "data URL") is a Uniform Resource Identifier scheme defined in RFC 2397. Rather than pointing to an external resource using a file path or HTTP URL, a data URI embeds the resource's content directly inside the URI string itself.

The practical consequence: a browser that encounters a data URI does not make an HTTP request. The content is already present in the document. For small resources like icons, loading spinners, or pixel-tracking images, this eliminates a network round-trip entirely.

Data URIs are supported in all modern browsers and can appear wherever a URL is accepted: the src attribute of an <img>, the href of an <a> or <link>, CSS background-image values, and more.

2. Data URI Syntax

The format of a data URI is defined precisely in RFC 2397:

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

Breaking this down:

• data: — the scheme identifier, always literally "data:"
• <mediatype> — an optional MIME type such as image/png, image/svg+xml, or text/css. Defaults to text/plain;charset=US-ASCII if omitted.
• ;base64 — an optional token that signals the data is Base64-encoded. Omit this for plain text data.
• , — a literal comma separating the metadata from the data payload
• <data> — the actual content, either URL-encoded text or Base64-encoded binary

Some real-world examples:

<!-- A 1x1 transparent PNG embedded as a data URI -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="">

<!-- An SVG icon embedded inline in CSS -->
.icon-check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

<!-- Plain text data URI (no base64 needed) -->
<a href="data:text/plain,Hello%20World">Download text file</a>

Note that SVG images used in CSS are more commonly URL-encoded (percent-encoded) rather than Base64-encoded, because SVG is text and URL encoding produces a shorter result than Base64 for text content.

3. Base64 Encoding Explained

Base64 is a binary-to-text encoding scheme that represents arbitrary binary data using only 64 printable ASCII characters: A–Z, a–z, 0–9, +, and /, with = used as padding. The name "Base64" refers to the radix of the encoding — each character represents one of 64 possible values (6 bits).

Why Base64?

Binary data contains byte values across the full range 0–255. Many of these byte values map to non-printable control characters that break text-based protocols. HTTP headers, HTML attributes, and CSS values are all text contexts. Base64 converts arbitrary binary into a safe, universally printable string that can be embedded anywhere text is expected.

How the Encoding Works

Base64 processes input bytes in groups of three (24 bits). Each 24-bit group is split into four 6-bit values. Each 6-bit value is mapped to one of the 64 Base64 characters using a lookup table. This means every 3 bytes of input become exactly 4 characters of output.

# Example: encoding the 3 bytes for "Man"
M = 0x4D = 01001101
a = 0x61 = 01100001
n = 0x6E = 01101110

Combined 24 bits: 010011010110000101101110
Split into 4x6:   010011 | 010110 | 000101 | 101110
Decimal values:   19     | 22     | 5      | 46
Base64 chars:     T      | W      | F      | u

Result: TWFu

When the input length is not a multiple of 3, padding characters (=) are added to make the output length a multiple of 4. One padding character means 2 bytes were in the last group; two padding characters mean 1 byte was in the last group.

Size Overhead

Because every 3 bytes become 4 characters, Base64 encoding increases file size by exactly 4/3, or approximately 33%. A 10 KB PNG becomes roughly 13.3 KB when Base64-encoded. This overhead is a central consideration when deciding whether to use data URIs.

4. How to Convert an Image to Base64

There are several ways to generate a data URI from an image file:

Browser: FileReader API

function fileToDataURI(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Usage with a file input element
document.getElementById('fileInput').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const dataURI = await fileToDataURI(file);
  document.getElementById('preview').src = dataURI;
  console.log(dataURI); // data:image/png;base64,iVBOR...
});

Node.js

const fs = require('fs');
const path = require('path');

function imageToDataURI(filePath) {
  const ext = path.extname(filePath).slice(1).toLowerCase();
  const mimeTypes = {
    png: 'image/png',
    jpg: 'image/jpeg',
    jpeg: 'image/jpeg',
    gif: 'image/gif',
    svg: 'image/svg+xml',
    webp: 'image/webp',
  };
  const mime = mimeTypes[ext] || 'application/octet-stream';
  const data = fs.readFileSync(filePath);
  return `data:${mime};base64,${data.toString('base64')}`;
}

console.log(imageToDataURI('./logo.png'));
// data:image/png;base64,iVBORw0KGgo...

Python

import base64
import mimetypes

def image_to_data_uri(file_path):
    mime_type, _ = mimetypes.guess_type(file_path)
    with open(file_path, 'rb') as f:
        encoded = base64.b64encode(f.read()).decode('utf-8')
    return f"data:{mime_type};base64,{encoded}"

print(image_to_data_uri("logo.png"))
# data:image/png;base64,iVBORw0KGgo...

5. Data URI Use Cases

Data URIs are not universally good or bad — they are a tool suited to specific situations. Here are the cases where they genuinely help:

Small UI Icons in CSS

Tiny icons (under 1–2 KB) embedded as data URIs in a stylesheet avoid individual HTTP requests. When the stylesheet is cached, so are all its inline icons. This was a popular technique before HTTP/2, and still makes sense for very small, frequently-used icons.

Email HTML

Email clients often block externally-referenced images by default, requiring the recipient to click "Show images." Embedding images as data URIs ensures they appear immediately without user action. Be aware that Base64-encoded images inflate email size, which affects deliverability and rendering speed on mobile.

Canvas Snapshots

The HTML Canvas API's toDataURL() method returns a data URI, making it the natural way to capture and transmit canvas content as an image:

const canvas = document.getElementById('myCanvas');
const dataURI = canvas.toDataURL('image/png');
// Send to server or display in an <img> element
someImg.src = dataURI;

Self-Contained Single-File Applications

Offline tools, printable reports, and archived documents sometimes embed all assets as data URIs so the entire application or document works from a single HTML file with no external dependencies.

Loading Placeholders

Tiny Base64-encoded blurred placeholder images (often 10–20 bytes for a heavily-downsampled pixel art version) are used for progressive image loading — the placeholder appears immediately while the full image loads asynchronously.

6. Performance: Data URIs vs External Files

The performance story for data URIs is nuanced and has shifted significantly with HTTP/2.

The HTTP/1.1 era case for data URIs: Under HTTP/1.1, browsers limited concurrent connections per domain to 6. Each external resource consumed one of those connections. Embedding small images as data URIs reduced connection contention. Developers used CSS sprites and data URIs as standard optimization techniques.

The HTTP/2 reality: HTTP/2 multiplexes all requests over a single connection, so the "too many requests" penalty essentially disappears. The 33% size overhead of Base64 now rarely pays for itself. For most resources, an external file with proper Cache-Control headers outperforms a data URI on repeat visits because the external file is cached independently and shared across pages.

Practical guideline: Use data URIs for resources under approximately 1 KB that are used on every page and rarely change. For everything else, serve external files with long cache TTLs from a CDN.

7. Data URI Size Limits and Browser Support

RFC 2397 defines no maximum size for data URIs. The practical limits are imposed by browsers and the contexts in which data URIs appear:

• Internet Explorer 8: Limited data URIs to 32,768 bytes (32 KB). IE 9 and later removed this limit.
• Chrome, Firefox, Safari, Edge: No documented hard limit. Tested up to several MB in practice, though performance degrades significantly above a few hundred KB.
• URL length limits: When used in a CSS url() value or HTML attribute, the data URI is subject to any URL length limits the browser or framework enforces. Most modern browsers support URLs up to at least 2 MB.
• CSS file size: Embedding many large images in a CSS file can create a stylesheet several MB in size, which must be fully downloaded before the page renders. This is a blocking performance issue.

Browser support for data URIs is universal among browsers in active use. The data: scheme is supported by every browser that matters for production web development.

8. Security Considerations

Data URIs carry some security implications that are worth understanding:

Content Security Policy (CSP)

A strict Content Security Policy can block data URIs. The directive img-src 'self' does not allow data URIs for images — you must explicitly add data: to allow them: img-src 'self' data:. Allowing data: broadly can weaken CSP protections, so scope it to only the directives where data URIs are genuinely needed.

Data URI Navigation

Historically, data:text/html URIs could be used to execute arbitrary HTML and JavaScript in the context of the browser's address bar. Modern browsers (Chrome 60+, Firefox) block navigation to data: URLs in the address bar to prevent phishing attacks where attackers crafted data URIs that looked like legitimate login pages.

JavaScript in Data URIs

A data:text/html URI can contain a full HTML document including <script> tags. When rendered in an <iframe>, the script runs in a null origin. This is not a vector for cross-site attacks (the null origin is isolated), but it is worth knowing that data URIs are not inherently inert.

Exfiltration Risk

When accepting user-generated content, be cautious about allowing arbitrary data URIs in user-submitted HTML. An attacker could embed a tracking pixel or exfiltration URI disguised as an image. Sanitize user content with an allowlist that restricts which MIME types and URI schemes are permitted.

For more on working with image files and encoding, see our guides on PII masking in documents and our Hash Generator for verifying file integrity.

9. Frequently Asked Questions

What is a data URI?

A data URI is a URI scheme that embeds file contents directly inside a URL string rather than pointing to an external file. The format is data:[mediatype][;base64],<data>. When a browser encounters a data URI, it reads the content from the URI itself instead of making an HTTP request. Data URIs are defined in RFC 2397 and are widely used for embedding small images, SVG icons, and fonts directly in HTML or CSS files.

How do I convert an image to a data URI?

The simplest approach is the SnapUtils Image to Base64 converter — upload your file and get the complete data URI string immediately. In JavaScript, use the FileReader.readAsDataURL() method for browser-side conversion, or the Node.js Buffer.from(data).toString('base64') method on the server. In Python, use the base64.b64encode() function with the file's binary content.

Are data URIs bad for performance?

It depends on the size and usage pattern. Data URIs eliminate HTTP requests but increase file size by about 33% due to Base64 encoding overhead. They cannot be cached independently by the browser — every page load that includes the containing HTML or CSS file re-downloads the embedded image. For small icons under 1 KB used on every page, data URIs can improve performance. For larger images or resources that benefit from long-term browser caching, external files served from a CDN almost always perform better, especially under HTTP/2.

What is the maximum size for a data URI?

RFC 2397 defines no maximum size. Internet Explorer 8 imposed a 32 KB limit, but that restriction was removed in IE 9. Modern browsers (Chrome, Firefox, Safari, Edge) support data URIs up to several megabytes in practice. However, large data URIs degrade performance — a multi-megabyte Base64 string must be decoded on every render, inflates HTML or CSS file size, and prevents independent caching. Keep data URIs under 32 KB for practical performance, and consider external files for anything larger.