Image to Base64 Converter — Data URI, CSS, HTML

chain

▣

Image to Base64 encoded in your browser, never uploaded

Image to Base64 Online

Updated 2026-08-02

Convert an image into a Base64 data URI — or paste one back and see what it is. Choose the shape you need: a raw data URI, a CSS background-image, an HTML <img> tag, Markdown, or the bare Base64 string.

The part most converters leave out is whether you should be doing this at all. Base64 always costs about 33% more bytes than the file, so this tool shows the before and after sizes and says plainly when inlining is the wrong call — above roughly 10 KB the inlined bytes get re-sent with every page and cannot be cached separately, which usually costs more than the request you saved. For SVG it points you at percent-encoding instead, which is smaller than Base64 and stays readable.

Everything happens in your browser through the standard FileReader API. There is no API endpoint for this tool, because an API would have to receive the bytes this page promises not to send.

// how to use

1 Drop an image onto the panel, or click to choose one. It is read in your browser — nothing is uploaded.
2 Pick the output you need — a raw data URI, a CSS background, an HTML img tag, Markdown, or just the Base64 string.
3 Copy it. The size comparison underneath tells you whether inlining is actually a good idea here.

// examples

A small icon as a CSS background

Input

icon.png — 1.2 KB

Output

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…");
1.2 KB became 1.6 KB (+33%). At this size inlining is reasonable — it saves a request.

A photo, where inlining is the wrong call

Input

photo.jpg — 240 KB

Output

240 KB became 320 KB (+33%).
Over about 10 KB, inlining usually costs more than it saves: the bytes are re-sent
with every page and cannot be cached separately.

Going the other way

Input

data:image/png;base64,iVBORw0KGgo…

Output

image/png · 64×64 · about 1.6 KB decoded
(preview shown, with a download button)

// common uses

Inlining a small icon into CSS to save a request Embedding a logo in an HTML email, where external images are often blocked Working out what an unfamiliar data URI in a stylesheet actually is Getting an image into a JSON payload or a config file that only accepts text

// faq

Why is the Base64 bigger than my image?

Base64 encodes every 3 bytes as 4 printable characters, so the result is always about 33% larger than the file. That overhead is the trade you are making in exchange for not needing a separate HTTP request, which is why it only pays off for small images.

When should I actually inline an image?

For small, always-needed assets — icons, a tiny logo, a 1px gradient — where saving a request matters more than the extra bytes. Above roughly 10 KB it stops being worth it, because inlined bytes are re-sent with every page that includes them and cannot be cached on their own.

What about SVG?

Prefer percent-encoding over Base64 for SVG. Because SVG is text, percent-encoding it is usually smaller than Base64 and stays readable in the stylesheet, so you can still see what the image is. Base64 is only worth it for SVG if some tool in your pipeline insists on it.

Can it decode a data URI back into an image?

Yes — switch to "Base64 → image" and paste either a full data URI or a bare Base64 string. The type is detected from the data itself, so a raw paste still previews correctly and downloads with the right extension.

Is my image uploaded anywhere?

No. The file is read with the browser's own FileReader and encoded locally. There is no API endpoint for this tool at all, because an API would have to receive the bytes this page promises not to send.

// works with your data

Base64 Encoder Base64 Decoder URL Encoder cURL Converter URL Parser