Image to Base64
Turn a small image into a data URI and copy it as HTML, CSS or Markdown. Nothing is uploaded.
Embed small images directly in your code
Every external file on a page is another HTTP request. For a 400-byte arrow icon or a one-pixel placeholder the request costs far more than the file. Embedding such images as data: URIs in your CSS or HTML removes the request. It is also the usual way to include an image in an email template, a single-file HTML report or a Markdown document that must be self-contained.
Drop an image (or any small file) onto the box or choose it from your device. The tool reads it in your browser and gives you the data URI with ready-to-paste snippets: an HTML <img> tag, a CSS background-image, Markdown image syntax and the plain URI. It shows the original size, the encoded size and the overhead, and warns when a file is too large to be worth inlining.
Things to keep in mind
- Inlined data is part of the document or stylesheet, so it is downloaded again with every page that includes it and cannot be cached on its own. Keep inlined files tiny.
- Base64 adds about a third to the size. Gzip and Brotli recover some of that for text-like data, little for PNG or JPEG.
- SVG is already text. A URL-encoded SVG data URI is often smaller than Base64, and inline
<svg>can be styled with CSS. - Some email clients block data URIs; check your target clients before relying on them.
Preview below is created locally from the file you choose; it is never uploaded. Files up to a few megabytes work, but anything over 10 KB gets a warning.
Frequently asked questions
What is a data URI?
A URL that contains the file itself: data:image/png;base64,iVBORw0.... Browsers can use it anywhere a normal image URL is accepted, with no extra request, so tiny icons can be embedded in HTML or CSS.
Why is the Base64 text bigger than the image?
Base64 represents every 3 bytes as 4 characters, so the encoded data is about 33% larger than the original, and it cannot be cached separately from the page that contains it.
When should I inline an image?
For very small files (roughly under 10 KB) such as icons, tiny logos and placeholders, where saving a network request matters. Larger images are better served as separate files that the browser can cache and load lazily.
Is my image uploaded?
No. The file is read by your browser (FileReader) and converted on your device. Nothing is sent to a server.