Image to Base64
β‘ Runs locallyπ No uploadsπ Free, no sign-up
A data URI is a URL that carries the file itself: data:[<MIME type>][;base64],<data>. Converting an image to Base64 means encoding its binary bytes as plain ASCII text β every 3 bytes become 4 printable characters β and prefixing the result with something like data:image/png;base64,. When a browser sees that src, it decodes the text back into pixels instead of firing another HTTP request. The cost is fixed and predictable: Base64 inflates the payload by about 33%, plus a few dozen bytes of prefix. Because the output is plain text, it can live anywhere text lives: stylesheets, markup, JSON payloads, even source code comments.
The classic use case is front-end performance. Every small icon, logo, or placeholder loaded the normal way costs an HTTP request; inlined as a data URI, those pixels ride along with the HTML or CSS that is already being downloaded, so first paint gets faster and tiny files skip CDN round-trips entirely. The second big use case is single-file delivery: HTML demos, email templates, and offline docs become one self-contained file you can copy-paste and share without an image host. Many email clients block remote images by default, yet render embedded data URIs just fine. Designers also use them for favicons and Open Graph fallbacks β anywhere a tiny graphic must survive without a server round-trip.
It is also handy for debugging and integration work: stuffing a test image into a JSON API payload, building fixtures for automated tests, or pasting a screenshot into a ticket is easier as text than as a file upload. But bigger is not better. Unlike regular images, data URIs cannot be cached by the browser, and a 1MB photo becomes roughly 1.37MB of text inside your HTML, slowing down parsing. Rule of thumb: inline freely under ~10KB, decide case by case in the tens of KB, think twice past ~100KB β this tool warns you about anything over 1MB. Compress first or use a CDN for large images.
A few gotchas: data URIs must not contain line breaks β some older parsers choke if your copy picked up newlines; SVGs are usually smaller URL-encoded than Base64-encoded; non-ASCII filenames do not affect conversion, and the generated alt text is sanitized. Most important: a data URI decodes back to the original image, so never paste one made from a sensitive photo into a public chat or document. And everything here runs locally in your browser via FileReader β close the tab and the data is gone; nothing is uploaded anywhere.
How to use
- Drag images into the dashed box, or click to pick files (multi-select; JPG, PNG, GIF, WebP and SVG all work)
- Pick an output format: full data URI, CSS background-image, or an HTML <img> tag
- Each image shows a thumbnail, its dimensions, and the original β Base64 size change; the text box holds the ready-to-use result
- Copy it into your code or download as .txt; images over 1MB trigger a confirmation warning
FAQ
What is the difference between a data URI and a normal image URL?
A normal <img src="https://β¦"> is just a reference β the browser still fires an HTTP request to fetch it. A data URI carries the pixels inline: zero extra requests. The trade-offs: a fixed ~33% size inflation, and the browser cannot cache it the way it caches regular images. Small icons win inline; large photos belong on a CDN.
Why did my file get bigger after conversion?
That is Base64 itself, not a bug: every 3 bytes of binary become 4 ASCII characters β a fixed ~33% overhead β plus the data:image/png;base64, prefix. A 1MB image comes out around 1.37MB. Completely expected.
How large an image is safe to inline?
Rule of thumb: under ~10KB, inline freely; tens of KB, decide case by case (icons and critical above-the-fold graphics first); past ~100KB, weigh the trade-off; past 1MB, don't β this tool warns you about those. Compress large images or serve them from a CDN.
How do I use the output in CSS and HTML?
CSS: background-image: url("data:image/png;base64,...."); HTML: <img src="data:image/png;base64,...." alt="description">. Three things to watch: don't drop the quotes inside url(); never break the data URI across lines; and don't confuse its double quotes with the attribute quotes β the "HTML <img> tag" format this tool generates is already assembled, just copy it.
Is my image uploaded to a server?
No. Conversion uses the browser's FileReader.readAsDataURL and runs entirely locally; close the tab and the data is gone. Try it offline β it still works, which is the proof.