If you've ever pasted a small image straight into your HTML, you've used a Base64 data URI: data:image/png;base64,iVBORw0KGgo.... The browser decodes it as if it were a file — no extra HTTP request, no separate asset to deploy. It's a genuinely useful trick, but it's also easy to overuse. Here's a practical breakdown of when data URIs help, when they hurt, and how to spot the difference.
The math that matters: +33%
Base64 encodes 3 bytes of input into 4 text characters. That means a data URI is always about 33% larger than the original file. A 300 KB PNG becomes a ~400 KB string sitting inline in your HTML. On a slow mobile connection, that's real bytes the browser has to download before it can render anything above the fold.
So the first rule is: the bigger the asset, the worse the trade-off. Data URIs are great for things measured in kilobytes — a 1 KB logo, a 2 KB SVG icon, a few emoji. They're terrible for hero images and product photos.
When data URIs genuinely help
- Email signatures — the image is embedded in the message body, so it renders even when the recipient's mail client blocks remote images.
- Small icons and SVG backgrounds — no extra round trip, and SVGs scale at any resolution.
- Single-file demos and prototypes — one HTML file with everything inline is trivial to share, attach, or screenshot.
- Offline contexts — anything embedded travels with the document.
When they hurt
- Any image over ~10-20 KB — the 33% overhead plus the base64 decode cost rarely beats a regular request.
- HTTP/2+ sites — modern browsers multiplex requests cheaply; one more small request is not the penalty it was in 2012.
- Images reused on multiple pages — each page re-downloads the same encoded string. A cached file is fetched once.
- Caching and CDNs — you can't give a data URI cache headers, vary it, or serve it from a CDN edge.
The quick check
Before inlining, ask: would this file survive as a separate request? If it's tiny, static, and page-specific — inline it. If it's large, shared, or likely to change — keep it as a real file.
💡 Tip: When you do need Base64 — for a data URI, a JWT payload, or an API response — a free online Base64 encoder/decoder makes it a two-second job: paste, encode, copy. No installs, and everything happens in the browser.
Top comments (0)