Image to Base64
Turn an image into a data URI you can paste inline.
Drop an image to encode
PNG, JPG, SVG, WebP or GIF · up to 10 MB · drag & drop, paste, or click to browse
Runs entirely in your browser — nothing you enter is uploaded or sent to a server.
Base64 makes a file roughly a third larger, and an inlined image can't be cached separately from the page or stylesheet holding it — so past a few kilobytes you're usually making the page slower, not faster. We flag the size as you go, but the judgement is yours. Read our full disclaimer.
About this tool
A data URI is an entire file written out as text, so a small image can live inside your HTML or stylesheet instead of sitting in a separate file the browser has to fetch. That's genuinely useful for icons, tiny logos and email signatures — one less request, and nothing to go missing. It's a poor trade for anything bigger, because the text version is about a third larger than the file and can't be cached on its own. This tool does the conversion, picks the correct MIME type even when your browser doesn't report one, wraps the result for wherever you're pasting it, and tells you honestly when the file is too big for this to be a good idea.
Example
A 3 KB SVG icon becomes about 4 KB of text — worth inlining, since you save a whole network request. A 400 KB photo becomes roughly 533 KB embedded in your stylesheet, downloaded again on every change to that file: use a normal <img> tag instead.
How to use
- 1Drop in an image — PNG, JPG, SVG, WebP and GIF all work.
- 2Check the size note: green means inlining is a clear win, red means don't.
- 3Pick the form you need — raw data URI, an HTML img tag, a CSS background, Markdown or JSON.
- 4Copy it and paste it into your code.
Features
- Output shaped for HTML, CSS, Markdown or JSON, not just a raw blob of characters.
- Works out the MIME type from the file when the browser reports none — a common problem with SVGs.
- Shows the encoded size next to the original, so the ~33% growth isn't a surprise.
- A plain verdict on whether this particular file is worth inlining at all.
Frequently asked questions
Why did my file get bigger?
Base64 writes every three bytes as four text characters, so the encoded version is about 33% larger — that's inherent to the format, not something a tool can optimise away. It's the price of turning binary into something you can paste into a text file.
When is inlining actually a good idea?
For small, unchanging assets: icons, a tiny logo, a background texture, an image in an email signature. Under about 8 KB you're clearly ahead — you trade a whole network round trip for a few hundred extra bytes. Past 100 KB you're almost certainly making things worse.
Why is it worse for big images?
Two reasons. A data URI can't be cached on its own, so it's re-downloaded every time the HTML or CSS around it changes; and it has to arrive before that file finishes parsing, so it delays rendering rather than loading alongside the page like a normal image.
Does this work with SVG?
Yes, and it's one of the better uses. Note that browsers often report no MIME type for an SVG, which produces a data URI that silently won't render — we detect the format from the file itself to avoid that.
Can I go the other way, from Base64 back to an image?
Not in this tool — it's one-directional. Our Base64 Encoder / Decoder in the Developer section handles decoding text, and any data URI pasted into a browser's address bar will display the image it holds.
More image tools
View allFavicon Generator
Make a website favicon from your own image — a multi-size favicon.ico plus the PNGs modern browsers, Apple, and PWAs expect, with a ready-to-paste HTML snippet.
Open toolImage Converter
Change an image's format — JPG, PNG, or WebP — with a quality control for the lossy ones. Handy for shrinking with WebP or getting a universally-supported JPG.
Open toolImage Compressor
Cut the file size of a JPG, PNG, or WebP with a quality dial and an optional size cap — the picture stays sharp, the download stays small.
Open tool