Image to Base64

How to use

1. Drop in an image, or choose one. It is read on your device and never uploaded.
2. Copy the data URI, or the ready-made HTML, CSS or Markdown form.
3. Watch the size: base64 makes an image about a third larger.
4. To go the other way, paste a data URI and download the image it contains.

Features

• The media type read from the file's own bytes, not from its name.
• Ready-to-paste HTML, CSS and Markdown, not just the raw string.
• The encoded size shown next to the original, so the cost is visible.
• Decodes a data URI back to a downloadable image.
• Runs entirely in your browser.

Frequently asked questions

Why is the type detected instead of taken from the file name?

Because names lie. A screenshot renamed .png that is really a JPEG is common, and a data URI carrying the wrong media type simply does not render — with no error to explain it. The first bytes of an image file are fixed by the format, so they are what decides here. When they disagree with the extension, the tool says so.

Why is the base64 bigger than the file?

Base64 packs three bytes into four characters, so the result is about 33% larger, plus the data: prefix. That is the trade: you avoid an HTTP request and pay for it in bytes on every page that carries the image.

Should I embed images this way?

For small, always-needed images — an icon, a 1px gradient — often yes. For anything sizeable, usually not: an embedded image cannot be cached on its own, so it is re-downloaded with every page that contains it, and it delays the HTML or CSS it sits inside. Around 100 KB the request you avoided is cheaper than the bytes you added.

Is my image uploaded?

No. The file is read and encoded in the page, which is what makes this safe for a screenshot of something private.

Related tools