What a Base64 data URI is
Base64 (RFC 4648) writes binary data using 64 printable characters. Every 3 input bytes become 4 output characters, so the encoded length is ceil(bytes / 3) x 4, which is where the roughly 33 percent growth comes from. A data URI (RFC 2397) wraps that text as data:[mime];base64,[payload], so the browser can treat it as if it were a file at a URL. The tool reads your file with FileReader.readAsDataURL and shows four views of the same string.
| Option | What you copy |
|---|---|
| Data URI | The full data:image/png;base64,... string |
| Raw Base64 only | Just the payload after the comma |
| CSS background-image | background-image: url("data:..."); |
| HTML <img> tag | <img src="data:..." alt="file name" /> |
Worked example
A 30 KB icon is 30,720 bytes. Encoded, that is ceil(30720 / 3) x 4 = 40,960 characters, or 40 KB of text, before the 22-character data:image/png;base64, prefix. The preview line in the tool shows both figures, for example "30.0 KB to 40.0 KB as Base64". Pasting this into a stylesheet adds 40 KB to a file that must download before the page can render.
When inlining is worth it
Inlining saves one HTTP request, which matters most for tiny images such as a 1 KB icon on a page that has no HTTP/2 multiplexing. With HTTP/2 or HTTP/3 the saved request costs very little, so the 33 percent penalty usually outweighs it above a few kilobytes. Inlined images also cannot be cached separately: change one pixel and the whole stylesheet or HTML file is invalidated. Gzip or Brotli on the surrounding file recovers part of the overhead, but images that are already compressed gain little.
- Good fits: HTML email, where external images are often blocked (note that some mail clients also block data URIs, so test), single-file HTML exports, and tiny CSS sprites or placeholders.
- Poor fits: photos, hero banners and anything shown on many pages.
Limits of this tool
- Files over 5 MB are refused with a message; that is a hard stop, not a recommendation.
- Shrink big images first with the image compressor or the resizer; our guide to compressing images for the web explains the trade-offs.
- To decode a string back to bytes or encode arbitrary text, use Base64 Encode / Decode.
- The MIME type comes from the browser's idea of the file. If it can't identify the type, the info line shows
image/pngbut the data URI itself gets a generic type, so fix the prefix by hand.