Embedding images directly into HTML / CSS / JSON — Base64 has been the front-end engineer's image-bundling tool for 15 years. But when does inlining actually help, and when does it hurt? What exactly is a Data URI? Why must email images be inline? This guide uses our `image-base64` tool as the worked example to clarify Base64's real use cases and avoid three classic misuses.
What is a Data URI, and why not just use a URL?
A Data URI is the contents of a file base64-encoded directly into a URL: data:image/png;base64,iVBORw0....
The upside is zero HTTP requests — the browser doesn't fetch a separate .png. Great for tiny icons, email signatures, loading placeholders.
The downside: ~33% larger bundle (base64 overhead) and uncacheable (every HTML document re-transmits the image). So inlining only suits images that are tiny and non-repeating.
When to inline, when not to
Inline when:
- < 2 KB icons / logos / placeholders
- Email signatures (most email clients block external image links)
- Dynamically generated SVG / QR (used once per session)
- Background patterns in critical CSS (avoid blocking first paint)
Don't inline when:
10 KB — URL + HTTP cache is faster
- Image appears on multiple pages — CDN cache saves requests
- You need lazy loading — Base64 in HTML can't defer
Rule of thumb: when in doubt, use a URL. Inlining is a last-mile optimization, not a first move.
Data URI vs raw Base64 vs HTML img vs CSS background
Same image, four common output forms:
- Data URI:
data:image/png;base64,xxx— for<img src>or<a href> - Raw Base64:
xxx(nodata:image/png;base64,prefix) — for backend APIs, JSON payloads - HTML img tag:
<img src="data:image/png;base64,xxx" alt="">— paste straight into HTML - CSS background:
background-image: url("data:image/png;base64,xxx");— for stylesheets
The tool gives you all four; copy whichever fits. The most confused pair is raw vs Data URI — the former for JSON, the latter for browser rendering.
Reverse: paste base64 → preview + download
Another common need is reverse: you get a base64 blob from a Slack message, GitHub Issue, or API response and want to see what it is.
Manually: write <img src="data:image/png;base64,YOUR_BLOB"> and reload — fiddly, easy to get the prefix wrong.
The tool's reverse mode: paste the blob directly. Auto-detects format (JPEG / PNG / GIF / WebP / SVG), handles the data: prefix, renders a preview, gives you a download button. Hugely useful when debugging webhook payloads.
Why email images must be inline
Email clients (Gmail / Outlook / Apple Mail) block external images by default — clicking an image reveals your IP / email location to the sender, effectively becoming a tracking tool.
So marketing emails, event invites, signatures must inline images (Base64 into the HTML email body) for the recipient to see them. The cost: larger email body, higher spam-filter score.
Industry practice: inline logo / signature under 5 KB; use CDN URLs for hero / main visuals — but on your own domain, not a third-party host. Gmail at least trusts owned domains more.
Next time you write an email signature or tune critical CSS, use the Image → Base64 tool — get all 4 output forms in one click. The image never leaves the browser — it's base64-encoded locally, then copied.