🖇️ Image to Base64 Converter
Image in, data: URL out — ready to paste into CSS or HTML, with the 33% size overhead shown so you know when not to.
How the image to base64 converter works
The file's bytes are Base64-encoded into a data: URL (data:image/png;base64,…) that carries the entire image inside a string — usable anywhere a URL is: CSS background-image, <img src>, JSON payloads. Encoding happens in your browser; the output size readout includes Base64's inherent 4/3 overhead so the cost is visible before you embed.
When to embed and when not to: data URLs shine for small assets (icons, tiny logos under a few KB) where saving an HTTP request matters more than bytes. For anything larger they backfire — 33% bigger, excluded from image caching, and they bloat the document that contains them. If you're embedding a 500 KB photo, link it instead.
Frequently asked questions
What is a Base64 data URL?
A URL that contains the resource itself: data:image/png;base64, followed by the image bytes re-spelled as text. Browsers render it like any image URL — no separate file or request needed.
Why is the Base64 output bigger than my image?
Base64 spends 4 text characters per 3 bytes — a fixed 33% overhead. That's the price of representing binary as text; it's why embedding is best reserved for small assets.
Where would I use this?
Inlining small icons in CSS to cut HTTP requests, embedding images in self-contained HTML files or emails, and carrying images inside JSON APIs. Also handy for testing image handling without hosting a file.
Is there a size limit for data URLs?
Browsers handle multi-megabyte data URLs, but practical limits arrive sooner: some email clients and CSS processors choke on very long strings, and page weight suffers. Keep embedded images small — icons, not photos.
Is my image uploaded to convert it?
No — the encoding is a local byte transformation in your browser. The string appears in the output box and nowhere else.