Convert an image to Base64

How to convert an image to Base64

1. Drop a PNG, JPG, GIF, WebP, AVIF, SVG or ICO onto the panel above, or click to browse.
2. The file is read in 3 MB slices with a progress bar, so even a 40 MB scan encodes without freezing the tab.
3. Copy whichever form you need: raw Base64 for a JSON field, a data: URI for a stylesheet, or the pre-built <img>, CSS and Markdown snippets.

What Base64 does to an image

Base64 takes three bytes of binary and rewrites them as four printable characters. Nothing is lost — decode the string and you get a byte-identical file back — but the text is always about 33% longer than the original, plus a handful of padding characters and the data:image/png;base64, prefix.

When inlining an image is the right call

The classic reason to inline was to remove an HTTP request, back when browsers opened six connections per host and each round trip cost 100 ms. Over HTTP/2 and HTTP/3 that argument is much weaker. What survives is a narrower set of cases:

• Tiny above-the-fold assets — an icon in the header, a 1 px gradient tile.
• Single-file deliverables — an HTML email, a self-contained report, a bookmarklet.
• Assets that must not miss — a fallback image that has to render even when the CDN is unreachable.

Against that, weigh the real costs: an inlined image cannot be cached separately from the document, cannot be lazy-loaded, is re-downloaded whenever the CSS changes, and compresses worse than the raw binary because Base64 destroys byte alignment.

Using the output

In HTML

<img src="data:image/png;base64,iVBORw0KGgo…" alt="Company logo">

In CSS

.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgo…");
  background-size: 24px 24px;
}

In JSON, for an API

Send the raw Base64 without the data: prefix, and put the MIME type in a separate field. Most upload APIs — including the major cloud vision and document services — reject a payload that still carries the prefix.

The +33% is not negotiable

People often ask whether the overhead can be avoided. It cannot: six bits of information per character is the mathematical ceiling for a 64-symbol alphabet. If the payload has to travel as text, 4/3 is the price. The only way around it is to stop encoding — send the binary, or for SVG specifically, use percent-encoding instead, which is usually 20–30% smaller than Base64 for the same markup.

Nothing is uploaded

Encoding happens with the browser File API and btoa in this tab. That matters for the images people actually convert here: signatures, ID scans, internal screenshots, product photos under embargo. Open the Network panel and run the tool — there is nothing to see, because there is nowhere for the bytes to go.