Image to Base64

How to use Image to Base64

1. Choose an image to encode, or paste a data URI to decode.
2. Copy the data URI, or download the decoded image.
3. Paste it into an img src, a CSS background-image, or your template.
4. Encoded output is about 33% larger than the original file.
5. Keep the data:image/…;base64, prefix and make sure its media type matches the real format.
6. The file is read locally — nothing is uploaded.

What you gain and what you pay

You gain one fewer network request, an asset that cannot 404, and a file that travels inside the document. You pay about 33% in size, because Base64 encodes three bytes as four characters, and you lose separate caching — an inlined image is re-downloaded with every page that embeds it, where a normal file is fetched once and cached across the whole site. That trade is good for something small and bad for a photograph.

Where inlining is genuinely the right answer

Email templates, where externally hosted images are blocked by default in most clients. Single-file HTML documents meant to be archived or emailed. Tiny icons in a stylesheet. Low-quality image placeholders shown while the real photograph loads. Anything that must work with no network at all. The rough threshold is a few kilobytes: below it, inlining usually wins; above it, a normal cached file does.

Reading a data URI

The format is data:[media type];base64,[payload]. The media type must be right — an image/png prefix on JPEG bytes will not display, and this is the commonest reason a pasted data URI shows nothing. The payload is the file’s bytes, unchanged, so decoding gives you back a byte-identical image; Base64 is a re-encoding, never a lossy step.

SVG does not need this

An SVG is already text. Base64-encoding one makes it a third larger for no benefit — either inline the markup directly into your HTML, where CSS can then style it, or use a URL-encoded data URI, which is smaller than Base64 and still works in CSS. Reserve this tool for raster formats.