Data URI Generator

What is a Data URI?

A Data URI (data URL) embeds file content directly in a URL string, eliminating the need for a separate HTTP request. The format is:

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

For example, a 1×1 transparent PNG as a Data URI:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==

When to use Data URIs

• Small icons and images in CSS background-image to eliminate HTTP requests.
• Inline images in HTML email (some clients don't load external images).
• Embedding fonts or SVG sprites directly in a stylesheet.

When NOT to use Data URIs

• Large files: base64 encoding increases size by ~33% and cannot be cached by the browser separately.
• Files that are reused across many pages: a cached external file is more efficient.

Size overhead

Base64 encoding increases file size by ~33%. A 10 KB image becomes ~13.3 KB as a data URI. Reasons:

• Base64 encodes 3 bytes as 4 ASCII characters (6 bits per char instead of 8).
• Added MIME type prefix: data:image/png;base64, (~25 bytes overhead).

Trade-off: Data URIs save an HTTP request but increase HTML/CSS size and prevent browser caching. Use for small assets (<5 KB) that rarely change.

Browser limits

Recommended max: 100 KB per data URI. Larger files should be served as separate resources with caching headers.

Common MIME types

Inline SVG alternative

For SVG images, consider inline <svg> tags instead of data URIs. Benefits:

• No Base64 encoding: No 33% size penalty.
• CSS styling: You can apply CSS to inline SVG paths and shapes.
• Accessibility: Add <title> and <desc> elements for screen readers.
• JavaScript interaction: Animate or modify SVG DOM directly.