Image to Base64: Inline Images Into CSS, HTML and JSON (Free, In-Browser)
Single-file demos, email templates, userscript assets and JSON payloads all hit the same wall: an image that must travel inside the text itself.
Image to Base64 produces the data URI string with the correct MIME prefix, sized honestly so you know what inlining costs before you paste it.
What a data URI actually costs
Base64 expands binary by a third, so a 30 KB PNG becomes roughly 40 KB of text. Inside one HTML file that is often fine; repeated across pages it is a tax on every request.
The tool shows both numbers, original and encoded, so the trade is visible instead of surprising.
Step by step
- Open Image to Base64 and add the image.
- The MIME type is detected from the file and the prefix is built correctly.
- Copy the data URI with one click, or copy wrapped CSS or HTML snippets.
- Paste into your stylesheet, template or JSON; encoding happened locally.
Where inlining is the right call
Small icons, gradients and placeholders that must survive a copy-paste demo or an email client that strips external requests. Also userscripts and bookmarklets where no asset host exists.
- Keep inlined assets under a few kilobytes; beyond that, separate files cache and compress better.
Email templates benefit most because many clients block remote images by default.
For favicons in constrained builds, a data URI beats a missing file.
Where it is the wrong call
Photography, hero images and anything repeated site-wide. HTTP caching and Brotli compression both fail on inline text, so every page pays full price every time.
If the goal is simply fewer requests for real assets, prefer bundling or Image Compressor first, then inline the shrunken file.
Try it free: Image to Base64 | runs entirely in your browser, no uploads and no signup.