Image Image to Base64
Convert an image to a Base64 data URI, ready to paste into CSS or HTML, with guidance on whether inlining is worth it.
Drag a file here, or
Encoded in your browser. The image is never uploaded.
Ready. Runs locally on your device.
Your files stay on your device. The tool works directly in your browser, using your device to process your files. Nothing is sent to our servers, and we never receive, store, or see your files or figures.
Share result
Cite
Cite this page
Reembun. (2026, July 28). Image to Base64. https://reembun.com/image-to-base64
How to use it
Choose an image
It is encoded inside your browser, so the picture is never uploaded anywhere.
Pick the output format
Data URI to drop into a src attribute, CSS for a background rule, HTML for a complete img tag, or raw Base64 for everything else.
Watch the overhead
Base64 adds about a third to the file size, which is why this suits small icons and inline logos rather than photographs.
Copy the string
Copy takes it in the format you selected, ready to paste into a stylesheet, a template or an email.
What a data URI is
A complete file embedded in a URL:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...Three parts: the MIME type, the encoding, and the encoded bytes. Anywhere a URL is accepted, whether src, background-image or href, a data URI can take its place, and no network request is made.
The size trade-off
Base64 represents three bytes as four characters, a fixed inflation of about 33%.
| Original | Encoded | Verdict |
|---|---|---|
| 1 KB icon | 1.4 KB | Inline it |
| 5 KB logo | 6.7 KB | Probably inline it |
| 20 KB image | 27 KB | Borderline |
| 200 KB photo | 267 KB | Do not |
The threshold is where the encoded size costs less than the HTTP request it saves. With HTTP/2 and HTTP/3 multiplexing, the cost of an extra request is far lower than it was under HTTP/1.1, which has pushed the sensible threshold down over the years, not up.
What you give up
Independent caching. An inlined image is part of the stylesheet. Change one icon and every visitor re-downloads the entire CSS file.
Lazy loading. A data URI in CSS loads when the CSS loads. There is no loading="lazy".
Responsive images. No srcset, no <picture>, no format negotiation. Every device gets the same bytes.
Parse blocking. A large data URI in a stylesheet is bytes the browser must read before it can finish parsing CSS, and CSS blocks rendering.
Where inlining genuinely helps
Tiny icons in CSS. A 500-byte chevron or checkmark, used in several places.
Email templates. Some clients block external images by default; inlined ones sometimes survive. Support is inconsistent enough that it is a hedge rather than a solution.
Single-file deliverables. A self-contained HTML report or dashboard that must work without any accompanying assets.
Critical above-the-fold assets. A logo that must appear in the first paint, where one saved round trip is measurable.
SVG is the exception
For SVG, do not Base64 encode. Inline the markup:
<svg viewBox="0 0 24 24"><path d="..."/></svg>Direct inlining is smaller than the Base64 form, keeps the SVG styleable with CSS, including responding to currentColor and to dark mode, and compresses far better, since gzip works well on markup and poorly on Base64.
If you must use a data URI for an SVG in CSS, percent-encode it rather than Base64-encoding it. Percent-encoded SVG is typically 20-30% smaller than the Base64 equivalent because most SVG characters do not need escaping at all.
Common questions
When is inlining an image worth it?
Below roughly 2 to 10 KB. At that size the Base64 overhead costs less than the HTTP request it saves. Above it, the inflated bytes sit in a stylesheet or HTML file that cannot be cached separately, cannot be lazy-loaded, and blocks rendering while it parses.
Why does Base64 make the file bigger?
Because it represents every three bytes as four characters, restricting itself to 64 safe ones. That is a fixed 33% inflation, plus padding. It is unavoidable and it is the price of moving binary data through a text-only channel.
Should I inline SVG as Base64?
No. Inline the SVG markup directly instead. It is smaller than the Base64 form, it stays styleable with CSS, and it compresses far better over the wire. Base64-encoding an SVG throws away all three advantages.
Do data URIs hurt performance?
Large ones do. They cannot be cached independently of the file containing them, so a change to one image invalidates the whole stylesheet. They also block CSS parsing while they are read, and they cannot be lazy-loaded or served responsively.
Last reviewed
