Images
Convert an image to Base64
Inlining an image removes one HTTP request at the cost of roughly a third more bytes and no separate caching. It is a good trade for icons and a bad one for photographs.
Drop an image here, or click to browse.
How to use it
- Drop or choose an image.
- Copy the raw data URI, or use the CSS and HTML buttons.
- Watch the size ratio — near 1.33× is normal for Base64.
- Keep inlined images under about 10 KB to stay worthwhile.
The real cost of inlining
A data URI removes one HTTP request, but adds about a third to the payload, cannot be cached separately, and blocks rendering of the stylesheet that contains it. Under HTTP/2, where many small requests are cheap, the request saved is worth less than it was a decade ago. Inlining pays off for icons and placeholders of a few kilobytes; it costs you for anything photographic.
Where it genuinely helps
Single-file HTML exports, email templates that must survive being forwarded, and CSS that must render before any network round trip completes. In each case the constraint is portability rather than speed. Once the asset is served from a CDN with long cache headers, a separate file is almost always the better arrangement — the browser caches it once and never downloads it again.
The 2 KB rule, and why it still holds
Inlining is worth it only for small, reused assets: icons, a logo, a one-colour spinner. Base64 inflates bytes by about 33%, and gzip cannot recover that — the encoded text is high-entropy and barely compresses, whereas the original PNG had plenty of redundancy left. Above roughly 2 KB the extra bytes cost more than the saved request.
The other cost is caching. An inlined image is re-downloaded with every page that contains it and cannot be cached separately; a separate file is fetched once and reused across the whole site and every return visit.
Frequently asked questions
Why is the Base64 version larger?
Base64 maps every three bytes to four characters, so the payload grows by about 33%. Compression does not help, because the data is already encoded.
When is inlining a good idea?
For small icons, logos and loading placeholders where saving a round trip matters more than the extra bytes. For anything over roughly 10 KB, a separate file cached by the browser wins.
Can I use this in an email template?
Many email clients block data URIs, and Outlook in particular does not render them. Host the image and link to it instead.
Does the file get uploaded?
No. The conversion is done by FileReader inside this tab; the image is never transmitted.
Can I paste the result straight into CSS?
Yes: background:url(data:image/png;base64,...). Keep it under a couple of kilobytes or the stylesheet becomes the bottleneck.
Why is the string longer than the file?
Base64 maps three bytes to four characters, so the text is exactly 4/3 of the binary size, plus line breaks if the tool adds them.