Image to Data URI
Turn a small image into a Base64 data URI, with the CSS and HTML forms ready to paste and an honest size warning.
Processed on your device — no upload
The file is read by your browser and encoded here — nothing is uploaded, which matters because the images people inline are usually logos and unreleased assets.
How to use it
- Choose an image.
- Check the size warning.
- Copy the CSS or HTML form.
How it works
A data URI puts the file itself into the address. Instead of url("logo.png") pointing at a file the browser must fetch, the bytes are written inline as Base64 and the browser has them already. One fewer request, and the image can never arrive late or 404.
Base64 costs about a third. Three bytes become four characters, so a 9 KB icon becomes roughly 12 KB of text. That is the trade: you spend bytes to save a round trip.
The trade is only worth it while the file is small. Under about ten kilobytes, the request you avoid — DNS, connection, headers, latency — costs more than the extra bytes. Above it, the arithmetic reverses and keeps getting worse.
And there is a second cost that is easy to miss. An inlined image is part of your CSS or HTML file. It cannot be cached separately, so changing one line of CSS makes every visitor re-download the image with it. It cannot be lazy-loaded, so it competes with the content people are waiting for. And it blocks rendering if it is in a stylesheet in the head.
A worked example
What this is genuinely good for. A 2 KB SVG icon used in a background-image. A small texture that repeats. A placeholder that has to appear instantly. A logo inside an HTML email, where external images are blocked by default and an inlined one is the only thing the recipient will see.
What it is not for. Photographs, hero images, anything over a few kilobytes, and anything used on more than a couple of pages. The warning appears above 10 KB and it is worth believing — a 200 KB inlined header image is a page that renders noticeably later than it needs to.
SVG has a better option than Base64. Percent-encode the markup instead and paste it into url() directly. It stays human-readable, compresses far better than Base64 (which is nearly incompressible, being already dense), and is typically 20–30% smaller. Base64 is the right answer for binary formats, not for XML.
The preview is rendered from the data URI itself rather than from the file you chose. If it displays, the string works. That is the only test worth running, and it catches the truncation that occurs when a very long URI is copied out of a terminal.
If the image is larger than it needs to be, the image compressor and the resizer are the step before this one — inlining an oversized file only makes the cost worse.
Questions
How do I embed an image directly in CSS?
A data URI puts the bytes into the stylesheet, so the browser needs no second request. Worth it under about ten kilobytes and a mistake above it.
When should I inline an image?
Under about ten kilobytes, used on a page that needs it immediately — small icons, textures, placeholders and images in HTML email. Above that, a normal request is faster.
Why is the data URI bigger than my file?
Base64 turns every three bytes into four characters, so expect about 33% more. That is inherent to representing binary data as text.
Does inlining make my page faster?
For a small image on a critical path, yes — one fewer request. For anything larger it makes it slower, because the bytes are in the render path and cannot be cached separately.
What is the size limit?
Browsers accept very large data URIs, so nothing stops you technically. The practical limit is when the cost of the bytes exceeds the request you saved — around ten kilobytes.
What about SVG?
Percent-encode the markup and put it straight in url() instead. It stays readable, compresses much better, and is usually smaller than the Base64 form.
Do data URIs work in email?
In some clients. Gmail strips them; Apple Mail generally allows them. For email, a hosted image with a good alt attribute is still the safer default.
Can I decode a data URI back to a file?
Not on this page. Pasting one into the address bar shows the image, and the browser can save it from there.
Is my image uploaded?
No. It is read and encoded by your browser, which matters because the images people inline are usually logos and unreleased assets.
Is a data URI the same as image to Base64?
Nearly. Image to Base64 gives you the encoded bytes; a data URI is those bytes with a prefix that tells the browser what they are. PNG to Base64 and JPG to Base64 both work here, and what you get is the complete URI — ready to paste into a src or a CSS url() without assembling anything by hand.
Which formats can become a data URI?
Any image your browser can read. JPG to data URI, JPEG to data URI, PNG to data URI, and WebP all work, as do SVG and GIF. Photos and pictures alike — though the encoding adds about a third to the size, so this is worth doing for icons and not for photographs.
Related Web tools
Color Converter
HEX, RGB, HSL, HSV, CMYK
open$termiva contrast --wcagColor Contrast Checker
WCAG AA and AAA, with a fix
open$termiva palette --triadicColor Palette Generator
Harmonies and a full tint scale
open$termiva gradient --linearCSS Gradient Generator
Linear, radial and conic
open