Convert an image to Base64

How it works

1. Drop an image file.
2. Copy the raw Base64 string or the full data URI for your language of choice.
3. Check the size math: Base64 adds about 33% over raw bytes; the exact numbers are shown.

Common requirements

• CSS data URI — url("data:image/png;base64,…") for icons and sprites.
• HTML data URI — img src="data:image/…;base64,…" for single-file documents.
• Raw Base64 — For JSON payloads, config files and API requests.
• Size check — See the ~33% overhead before committing to inlining.
• Private files — Local-only encoding for anything that must not be uploaded.
• Email signatures — Inline images that survive without attachments.

How to convert an image to Base64 (and when a data URI is a bad idea)

Base64 turns binary bytes into text so an image can live inside HTML, CSS, JSON or an email — no separate file, no extra request. This is a local image to base64 converter: choose a file, copy the raw string or a ready-to-paste data URI, and the byte math appears next to it.

Expect about 33% growth. Base64 maps every 3 bytes into 4 characters, so a 30 KB PNG becomes roughly 40 KB of text — worth knowing before pasting a data uri generator output into a page that has to stay small.

The rule of thumb: inline icons, logos and tiny UI sprites; keep everything else as a file so the browser can cache it. The snippet section shows the exact HTML and CSS syntax, so nothing has to be remembered or looked up twice.

Because encoding happens in the tab, it also works for private files: convert image to base64 without sending anything to a server. If you searched for png to base64, the flow is simply drop, copy, paste.

Supported formats

Any image the browser can read: JPEG, PNG, WebP, AVIF, GIF, BMP.

Keep data URIs under roughly 2 MB of source image for sane HTML output.

Privacy

Everything happens in your browser: the image is decoded, transformed and encoded locally. Nothing is uploaded, and no filename, pixel data or metadata is sent anywhere. Read more on the privacy page.

Technical methodology

• Encoding is done with the FileReader Base64 pipeline locally; the output string is byte-exact with standard Base64 (no line breaks in the copied value).
• Data URI format: data:[mime];base64,[payload] — the MIME type is detected from file content, not the extension.
• Size overhead note: Base64 encodes 3 bytes into 4 characters, hence ~33% growth (plus the data URI header).

Known limitations

• Huge images inlined as data URIs make HTML/CSS heavy; prefer files + caching for production assets.
• Some environments cap string length; browsers handle multi-megabyte strings but editors may not.