Image to Base64

Drop an image, pick the output shape you actually need — a full Data URI, a bare string, a CSS rule, an HTML tag or a JSON value — and copy it.

The image is read locally with FileReader. Nothing is uploaded.

When you need this

  • Inline a small icon into a stylesheet or an HTML template to remove a network request.
  • Send an image through a JSON API that only accepts strings.
  • Embed a placeholder directly in a build artefact so it survives without its asset folder.

Why other Base64 converters fail here

Most give you one output shape and leave you to slice the prefix off by hand — a step that is easy to get wrong and impossible to spot.

Line wrapping is either always on or always off, so strings that need to satisfy a MIME-style consumer come out unusable.

The size cost is never shown, so people inline a 200 KB photograph and wonder why the page got slower.

Frequently asked questions

At what size does inlining stop being worth it?

Base64 costs about 33% more bytes than the binary, and it cannot be cached separately or compressed as well as a real file. As a rule, inline below roughly 4 KB — icons and tiny logos. Above about 10 KB the extra bytes and the lost caching usually cost more than the round trip you saved.

Which output format should I choose?

Use the complete Data URI for a src attribute or a fetch call. Use the plain string when the API expects only the payload and supplies the MIME separately. Use the CSS option when the value goes straight into a stylesheet, because it includes the wrapping declaration and the quoting.

Why 76-character line wrapping?

That is the line length mandated by the MIME specification for encoded content. Some parsers still enforce it and reject longer lines. If your consumer is a modern JSON parser or a browser, single-line output is fine and simpler; the wrapping option exists for the strict cases.

Is my image uploaded when I convert it?

No. The file is read with the FileReader API and encoded in memory. There is no upload path in the code at all, and you can verify it in the Network panel: converting a 5 MB image produces no requests.

Related tools