Why is the base64 bigger than my file?

Base64 stores three bytes in four characters, so it is always about 33% larger, plus a little for the data:image/jpeg;base64, prefix. That overhead is the price of putting binary inside a text format; the tool reports the exact figure for your file.

Should I inline my images this way?

For small ones, sometimes — an icon or a 1 KB placeholder saves a request and cannot flash in late. For photographs, almost never: an inlined image cannot be cached separately, cannot be lazy-loaded, blocks the stylesheet or the HTML it lives in, and costs 33% more bytes every single time the page loads. The status line warns past 100 KB.

Does encoding change the image?

No. Base64 is a way of writing the same bytes, not a re-encode. The file that comes back out of the decoder is byte-identical to the one that went in, EXIF and all. Nothing is drawn to a canvas.

The data URI says image/jpeg but the file is a PNG. Which is right?

The bytes. The label in a data URI is just text and is frequently wrong — the decoder here reads the magic number instead and names the file accordingly, and says so when the two disagree.

Are my files uploaded?

No. Encoding and decoding both happen in your browser. Nothing leaves your device.

JPG to Base64

data URI · CSS · <img> · Markdown · JSON · shell · and back again

Turning the file into base64 is the easy half. The half that wastes an afternoon is what to wrap it in — a data URI, a CSS url(), an <img>, a JSON field, a here-doc that writes the file back — because the wrong wrapper gives you a broken image and no error message anywhere. So pick the wrapper and copy the whole thing.

Direction Wrap as Line length

Drop JPG files here

PNG / WebP / GIF also encode · multiple allowed

Paste base64, a data URI, an <img> tag or a CSS url()

no files

Ready.

The seven wrappers

data URI — data:image/jpeg;base64,…. The one you want most of the time; it goes anywhere a URL goes.
raw base64 — the payload with no prefix, for an API field that adds its own.
<img> tag — with the real width and height filled in from the file, so the page does not shift as it loads.
CSS background — a complete rule with the URL quoted, which is the part people leave out.
Markdown image — works in most renderers and not in all of them; GitHub, notably, strips it.
JSON object — name, dimensions and data, properly escaped, ready to paste into a fixture or a request body.
shell command — a base64 -d here-doc that writes the original file back out. Useful for getting a file onto a machine you only have a terminal on.

Line length only affects the raw and data-URI forms. 0 gives one long line, which is what a browser wants; 76 is the classic MIME width and what you need if the text is going into an email header or a PEM-style block.

Decoding

Paste anything that contains base64 and it is pulled out of its wrapper — a data URI, an <img> tag, a CSS url(), a JSON string, a line-wrapped block with newlines in it, or URL-safe base64 with - and _. Then the bytes decide the file type, not the label: a data URI announcing image/jpeg around PNG data is common enough to be worth handling, and saving that as .jpg gives you a file nothing opens. When the label and the magic number disagree, the tool names the file after the bytes and tells you.

When inlining is a good idea, and when it is not

A base64 image costs 33% more bytes than the file, every time the page loads, and cannot be cached separately from the document it is embedded in. That trade is worth it for something tiny and critical — a logo in an email, a blur placeholder, an icon in a single-file HTML export — and it is a bad trade for a photograph. The status line reports the encoded size and says so past 100 KB.

Two places where it is nearly always right: a single-file HTML page that has to work with no network, and an email, where remote images are blocked by default and an inline one is not. Two places where it is nearly always wrong: a hero image, and anything the browser could have lazy-loaded.

Related tools

Compress JPG — make it smaller before you inline it, since the 33% is charged on whatever you start with.
Resize JPG — the other lever, and usually the bigger one.
EXIF viewer — see what is riding along inside the bytes you are about to paste into a page.
JPG to WebP — a smaller file to encode in the first place.