Base64 Image Encoder
Turn an image into a base64 data URI with ready-made HTML, CSS and Markdown snippets — or paste one back and download the image.
Or paste a data URI to decode it
Related tools
All Image tools →This tool runs entirely in your browser. Nothing you enter is sent to our servers, so there is nothing for us to store or see.
About the Base64 Image Encoder
Turn an image into a base64 data URI you can paste straight into HTML, CSS or Markdown — and paste one back the other way to recover the file.
The tool tells you whether you should. Base64 makes data about a third larger, and an inlined image cannot be cached separately from the document that carries it, so every visit downloads it again inside the page. Under about 2 KB that trade is usually worth one fewer request. Past 10 KB it usually is not. Past 100 KB it makes the page slower, not faster, and the tool says so rather than quietly handing over a megabyte of text.
Four snippets are produced: the raw data URI, an <img> tag, a CSS background-image declaration and Markdown. The HTML alt text is escaped, so a description containing a quotation mark produces valid markup rather than a broken tag.
Everything runs in your browser. The image is read as bytes on your device and encoded there, so nothing is uploaded — which matters when the thing being inlined is an unreleased logo or a screenshot of something internal.
How to use the Base64 Image Encoder
-
Add an image
Drop it onto the box or click to choose. Anything the browser can read works, including SVG.
-
Check the verdict
The encoded size is shown next to the original, with a plain judgement about whether inlining is a good idea at that size.
-
Copy the snippet you need
The data URI on its own, or ready-made HTML, CSS or Markdown. Add alt text and it goes into the HTML and Markdown versions.
-
Or go the other way
Paste a data URI into the decode box to see what it is and download the original file.
Frequently asked questions
When should I inline an image as base64?
When it is small, used once, and needed immediately — a tiny icon in a stylesheet, a placeholder, an image in an email template where external files are blocked. Under about 2 KB the saved request generally beats the extra third of a kilobyte. Above 10 KB the arithmetic turns against it, and above 100 KB it is clearly the wrong tool.
Why is the base64 bigger than the file?
Because base64 encodes three bytes as four characters, so everything grows by a third. It exists to carry binary data through channels that only accept text — HTML, CSS, JSON, email — and the size increase is the price of that. Compression on the wire recovers some of it, but not all.
Does inlining an image make my page faster?
Sometimes, for small images. It removes a request, which used to matter a great deal and matters less over HTTP/2 and HTTP/3 where requests are cheap. Against that, an inlined image cannot be cached on its own, so it is re-downloaded with the page every time, and a large one delays the parsing of the CSS or HTML it sits inside.
Can I use this for an SVG?
Yes, and SVG is often the best case for inlining — it is text, it is usually small, and it is frequently an icon used once. Worth knowing: for SVG specifically, percent-encoding rather than base64 produces a smaller result, because the content is mostly ASCII already.
Is my image uploaded anywhere?
No. The file is read as bytes in your browser and encoded there. Nothing is transmitted or stored, and the tool works offline once the page has loaded.