What the converter does
This image to Base64 converter reads an image you choose or drop onto the page and turns it into a
data URI, the data:image/png;base64,... form that can sit directly inside HTML, CSS, Markdown or a
JSON payload. It also works in reverse: paste a data URI or a bare Base64 string and you get the
decoded image as a preview and a file to download. Nothing is uploaded, because the file is read by
your own browser.
Pick the output you need: the full data URI, the Base64 alone, a CSS background-image rule, an HTML
<img> tag or Markdown. The image type in every one of them comes from the file's bytes — the PNG,
JPEG, GIF and WebP signatures, the AVIF box, the BMP, ICO and TIFF headers, or an <svg> element —
so a file with the wrong extension still gets the right type.
Base64 image size: the 33% rule
Base64 turns every 3 bytes into 4 characters, so the encoded text is always about 33% larger than the
file. A 6 KB icon becomes roughly 8 KB of text, and the data:image/png;base64, header adds a few
bytes more. The tool shows the file size, the data URI size and the difference next to the result, so
you can decide with the real numbers rather than the rule of thumb.
The size is not the only cost. An inlined image is part of the document that contains it, so it cannot be cached on its own, it delays the parsing of the HTML or CSS around it, and it is downloaded again on every page that repeats it. That is why the tool adds a note once the file passes 10 KB. HTTP/2 and HTTP/3 made separate requests cheap, which moved the break-even point lower than the old advice suggested; a sprite or an inline SVG element is often the better answer for icons that appear on many pages.
Base64 to image
Paste any data URI, with or without the header, and the page decodes it, checks the bytes against
the known image signatures and shows the result. If the header claims image/jpeg but the bytes are
a PNG, you are told, and the preview and download use the type the bytes prove. SVG data URIs written
with percent-encoding instead of Base64 are accepted as well.
A data URI generator for the cases that fit
Inlining shines for favicons in a single-file HTML report, images in an email template that must not load remote content, a tiny loading placeholder, or a test fixture that should not depend on a file path. For anything bigger or reused, keep the file and let the browser cache it. To encode text rather than an image, use the Base64 encoder and decoder, and to check the right media type for a file extension, the MIME type lookup.