A data URI embeds a file's contents directly inside a URL, like data:image/png;base64,AAAA.... Browsers decode it inline, so the image needs no separate network request.

When should I inline an image as base64?

Inlining suits very small, frequently used assets such as icons or 1x1 spacers, where avoiding an extra HTTP request outweighs the size cost. For larger images, a normal file reference is usually faster and more cacheable.

Why is the base64 bigger than the original file?

Base64 encodes 3 bytes as 4 ASCII characters, so the data URI is roughly 33% larger than the source image. The tool shows the exact overhead for your file.

Is my image uploaded?

No. The image is read entirely in your browser with FileReader. It is never sent to any server, which makes the tool safe for private or unreleased assets.

Can I embed SVGs this way?

Yes. SVG files encode to base64 just like raster images, though for SVGs a URL-encoded (non-base64) data URI is often smaller. This tool outputs the base64 form, which works everywhere.

Image to Base64 Encoder

A base64 data URI lets you embed an image directly inside your HTML, CSS, or a JSON payload, so the browser renders it without a separate file download. This free encoder converts an image to that inline form in your browser and shows the size overhead so you can decide whether inlining is worthwhile.

How it works

The tool reads your selected image with FileReader.readAsDataURL, which returns a string of the form data:image/png;base64,<payload>. The data: scheme tells the browser the bytes follow inline; the MIME type identifies the format; and ;base64 marks the payload encoding. Because base64 maps every 3 bytes to 4 ASCII characters, the resulting string is about a third larger than the original file — the tool computes and displays this overhead.

Tips and example

Inlining is a trade-off: you save one HTTP round-trip but lose the ability to cache the image separately and you bloat the document that references it. Reserve it for tiny, ubiquitous assets. A CSS example looks like:

.logo {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

For larger photos, keep them as standalone files. The HTML output format wraps the data URI in an <img> tag with the original file name as alt text — edit the alt text to something descriptive before shipping.