Base64 Makes Files a Third Bigger: When to Use Data URIs
The 4/3 overhead at four sizes, and when inlining images helps or hurts.
By the TurantTools Dev team · Updated October 27, 2026 · 2 min read
Base64 turns every 3 bytes into 4 characters, so encoded data is about a third larger. That's fine for a tiny icon in CSS, and a bad idea for photos.
| Original | Base64 | Overhead |
|---|---|---|
| 3 bytes | 4 characters | +33% |
| 1,000 bytes | 1,336 characters | +34% |
| 30,000 bytes | 40,000 characters | +33% |
| 200,000 bytes | 266,668 characters | +33% |
When to inline as a data URI
- Yes: very small images (under a few KB), such as a single icon used once, where saving a request matters.
- No: anything large or used on many pages: it can't be cached separately and it delays the HTML or CSS it sits in.
- SVG icons can often go inline as plain SVG instead of Base64, which is smaller and stylable.