Loading Techie Utils…

Image to Base64

Turn an image into a Base64 data URI for CSS, HTML or Markdown. Free, and runs entirely in your browser — nothing you enter is uploaded or stored.

About Image Base64 Converter

Turns an image into a data URI you can paste straight into CSS, HTML or Markdown, and takes one apart again. The whole point of a data URI is that the image travels inside the document instead of being fetched separately — one fewer request, at the cost of carrying the bytes everywhere the document goes.

Whether that trade is worth it depends entirely on size, and the result says which side you are on rather than assuming. Base64 is four characters for every three bytes, so a third again is the floor. Against that, a data URI cannot be cached on its own, cannot be fetched in parallel with anything else, and is re-downloaded with every copy of the page or stylesheet carrying it. Under a few kilobytes — an icon, a spinner, a 1×1 tracking pixel — embedding wins comfortably. For a photograph it loses badly.

The type is read from the file's own bytes, never from its name. A .png that is really a JPEG is common enough — anything that has been through a rename, a download or a chat app — and a data URI that declares the wrong type is one no browser will draw. The same check runs in reverse: decoding a URI that claims one type and carries another reports the mismatch rather than quietly correcting it, because the browser believes the declaration and you will need to fix it.

For SVG, Base64 is the wrong encoding entirely. SVG is text, so encoding it into an alphabet of 64 characters inflates something that was already readable. Percent-encoding leaves most of the markup as it was, stays a valid data URI, and comes out shorter nearly every time — so both forms are produced with their sizes, and the CSS and HTML wrappers use the smaller one. It is the single easiest saving in this tool and the one people most often miss.

Where it helps

  • Reads the format from the file's own bytes, so a mislabelled image still produces a data URI that works.
  • Gives the URI already wrapped in the CSS rule, the <img> tag or the Markdown you were going to paste it into.
  • Reports what the encoding actually cost against the original, and says whether embedding is worth it at that size.
  • Produces the percent-encoded form for SVG as well, which is usually the smaller one, and uses it in the CSS and HTML output.
  • Decodes a bare Base64 string, a full data URI, or the CSS or HTML line you copied it out of.
  • Flags a data URI whose declared type does not match its bytes — the reason an embedded image sometimes refuses to render.
  • Runs entirely in your browser: nothing is uploaded, which matters when the image is a screenshot of something private.

Limits

  • Base64 always adds about a third, and a data URI adds a little more on top. It never makes an image smaller.
  • An embedded image cannot be cached separately, so every page or stylesheet carrying it re-sends the bytes.
  • A large data URI in a stylesheet blocks rendering until the whole sheet has arrived, which is the opposite of what a separate image does.
  • It encodes what you give it and does not resize or re-compress first — run the image through the converter or the compressor if it is bigger than it needs to be.
  • Some older mail clients and a few CMS editors strip data URIs entirely.
  • For SVG the percent-encoded form is offered because it is usually smaller, but a tool consuming the URI has to accept a non-Base64 data URI — nearly all do, and it is worth knowing.

Frequently asked questions

Does Base64 make my image smaller?

No — it always makes it bigger, by about a third. Base64 exists to carry binary through something that only handles text, not to compress. What you save is the round trip to fetch the file, which for a small icon is worth more than the extra bytes and for a photograph is not.

When should I embed an image instead of linking it?

As a rough line: under about 4 KB embedding usually wins, over about 32 KB it usually loses, and in between it depends on how often the image appears and whether the page is cached. The result gives you the sizes so you can judge it against your own case rather than a rule of thumb.

My data URI will not display. Why?

The most common cause is the declared type not matching the bytes — a file renamed to .png that is really a JPEG, for instance. The browser trusts the data:image/png part and fails when the content does not match. Decode it here and the mismatch is reported explicitly. The other frequent cause is whitespace or a line break inserted by whatever carried the string.

Why is the SVG version not Base64?

Because SVG is text and Base64 is for binary. Encoding readable markup into 64 characters makes it a third longer for no benefit, whereas percent-encoding only escapes the handful of characters that would break the URI — so the result is smaller and still legible. Both are produced here; the percent-encoded one is normally the one to use.

Is my image uploaded anywhere?

No. The file is read in your browser and the encoding happens there. Nothing is sent to a server, which is the point for anything that is a screenshot of something you would rather not hand to a website.

Related tools

More Images & Files tools