Data URI Size: When to Inline vs External Files

Data URI Size Trade-offs

The central question with data URIs is: when does eliminating an HTTP request save more time than the extra bytes added by Base64 encoding? The answer depends on file size, network conditions, and caching behavior.

The 33% Rule

Base64 encoding always increases data size by approximately 33%. This is inherent to the encoding algorithm: 3 bytes of binary produce 4 characters of Base64 output. Additionally, the data URI prefix adds a constant overhead:

data:image/png;base64,    →  22 characters
data:image/svg+xml,...     →  20 characters
data:application/json,...  →  25 characters

Break-Even Analysis

For HTTP/1.1 connections:

• Average HTTP overhead per request: 500-2000 bytes (headers, DNS, TCP, TLS)
• Break-even point: Files where the 33% Base64 overhead exceeds the HTTP overhead
• Typically: files under 4-6 KB benefit from inlining

For HTTP/2 connections:

• Reduced per-request overhead due to multiplexing and header compression
• Break-even point shifts lower: files under 2-4 KB benefit from inlining

Size Thresholds and Recommendations

Original Size	Action	Reason
Under 1 KB	Always inline	HTTP overhead dominates
1-4 KB	Usually inline	Net performance gain on most networks
4-10 KB	Consider context	Inline for critical render path only
10-32 KB	Avoid inlining	Base64 overhead too significant
Over 32 KB	Never inline	Use external files with caching

Impact on Compression

Data URIs affect gzip/Brotli compression differently depending on content:

• Base64 text compresses poorly — The encoding produces high-entropy output that gzip cannot compress effectively
• Percent-encoded text compresses well — Repetitive patterns in SVG/HTML still compress
• A separate binary file — Compressed with specialized algorithms (PNG has its own compression, JPEG too)

This means the true overhead of Base64 data URIs in a gzipped document can be higher than 33%, because the gzip algorithm is less effective on Base64 strings than on the structured text surrounding them.

Measuring Real Impact

Use the browser DevTools Network panel to measure:

1. Load time with external files (including all requests)
2. Load time with data URIs (single larger file)
3. Compare Time to First Byte and total load time