This tool reads an image with FileReader and hands you a Data URI, so the picture can live directly inside your HTML, CSS or JSON instead of being a separate file behind a separate request. It is the one tool in this category that never touches a canvas: the bytes are turned into text exactly as they are, with no pixel recomputed.
How to use it
- Drop an image on the dashed panel or click to browse. Reading is immediate — there is no button to start the conversion.
- A 64 × 64 thumbnail appears at the top with the filename beside it and a line reading
MIME type · size in KB. That row exists so you can confirm you loaded the file you meant to. - Four cards follow: the complete Data URI, the Base64 payload on its own without the
data:prefix, a ready-made HTML<img>tag, and a CSSbackground-imagedeclaration. Pick whichever matches where you are pasting. - Press Copy on a card and the button reads "Copied" for about two seconds. The card shows only the first 80 characters followed by an ellipsis, but the clipboard receives the whole string.
- Drop a different image to replace all four outputs at once. There is no download button here; the clipboard is the only way out.
When it comes in handy
Inlining tiny icons into a stylesheet
For a few hundred bytes of arrow, checkmark or spinner, becoming a background-image saves a whole network round trip, and on a high-latency mobile connection that saving usually outweighs the extra third in size. Keep the boundary at a few kilobytes: real content images, photographs and large illustrations do not belong in a stylesheet.
Building a single HTML file that depends on nothing
Reports, offline instructions and results you email to a client all break the moment they are opened on a machine that cannot resolve the linked images. With every picture inlined into an <img> tag, the document becomes one self-contained .html that survives being mailed, copied to a USB stick, or dropped into an archive.
Getting an image into a config file that only accepts text
Some systems are configured purely through a text document — a dashboard definition, a plugin manifest, a theme file — with nowhere to upload an asset, yet a field that happily accepts a Data URI. Pasting the encoded logo is then the only route, with the side benefit that the whole configuration stays in version control as one file.
Fixing a test image into the test itself
When a unit test needs an image as input, the fiddliest part is always the relative path and which directory the runner happened to start in. A few kilobytes of picture stored as a constant in the test file removes the filesystem from the equation, and CI on a fresh machine cannot fail to find it.
Limits and behavior
- Base64 encodes every 3 bytes as 4 characters, so the output is inevitably about a third larger than the file, before the
data:image/png;base64,prefix is even counted. Fifty kilobytes of image becomes roughly 68 kilobytes of text — check that the request you save is worth that. - Since nothing is redrawn, EXIF survives the encoding completely: capture time, camera model, and on photographs straight off a phone, GPS coordinates. That is the exact opposite of the other three tools in this category, where a trip through the canvas strips metadata as a side effect. Think that through before inlining a personal photo into a public page.
- The line shown on each card is a truncated preview of the first 80 characters; the real content only exists in the clipboard. Copying uses
navigator.clipboard, and if the browser refuses clipboard permission the button never flips to "Copied" and no error is displayed — reach for devtools or another browser at that point. - The MIME type on display is parsed from the start of the Data URI, and its ultimate source is
file.type, which the operating system infers from the file extension rather than by inspecting the contents. A ZIP renamed to.pngpasses the check and encodes perfectly happily; only the thumbnail gives it away. - Sizes are always printed in kilobytes, so a larger file shows up as an awkward "8192.0 KB". The 64 × 64 thumbnail uses
object-fit: cover, meaning it is cropped rather than a faithful miniature — it is there to confirm that something loaded, not to judge the image by. - The output uses the standard Base64 alphabet, including
+,/and trailing=, and is emitted as one unbroken line. It is not the URL-safe variant, which matters the moment you try to put it in a query string. - This direction only. There is no way here to turn a Data URI back into an image file; to inspect one, paste the whole string into the browser address bar and press Enter.
- Inlining has a cost beyond size. A Data URI has no URL of its own, so it cannot be cached separately or lazy-loaded, and changing one image invalidates the entire CSS or HTML file that carries it.
- One image at a time, up to 10 MB — though a file anywhere near that ceiling produces over thirteen million characters of text, which mostly just makes editors and diffs miserable. Images of that size are not inlining candidates in the first place.
Frequently asked questions
Is my image uploaded anywhere?
No. FileReader.readAsDataURL does the encoding inside your browser, the result is written only into the four cards on screen, and it reaches your clipboard only when you press Copy. No request carries the file anywhere. (The page around the tool still loads third-party resources such as advertising, and none of those requests contain the file you picked.)
How small does an image have to be to be worth inlining?
The usual boundary is a few kilobytes — icons, rules, flat decorative fills. Above that the arithmetic turns against you: inlining saves one request but enlarges the file carrying it, forfeits separate caching, and re-downloads the picture for every page that includes it. An image reused across many pages is almost always better off as its own file.
Can I go the other way and turn Base64 back into a picture?
Not with this tool. To recover a file, paste the complete Data URI into the browser address bar, open it, and use "Save image as". If all you have is the bare payload with no prefix, prepend data:image/png;base64, yourself before pasting.
Can I put this string in a URL parameter?
Not as it stands. Standard Base64 contains +, / and =, all of which carry their own meaning in a query string and need percent-encoding first — a job for the URL encoder. Practical URL length limits make it a doomed idea for anything but the tiniest image anyway.
Will it work in HTML email?
Largely not. Gmail, Outlook and most other clients block data URIs in <img>, so recipients see a broken image. Email's own answer is a CID-referenced attachment, or a plain hosted image URL, and neither is something this tool produces.
My site has a Content Security Policy — will inline images be blocked?
Yes, unless img-src includes data:. This is the classic deployment surprise with Data URIs: everything looks right locally, then every inline image vanishes in production with a CSP violation logged in the console. Either add data: to the policy or go back to hosted files.
Does it handle SVG?
It does, and it is the only one of the four image tools that leaves an SVG intact, because it reads raw bytes rather than rasterising anything. That said, SVG is already text: minifying it first often beats Base64 outright, and CSS also accepts percent-encoded SVG source inline, which is shorter than the Base64 form — just not something produced here.