Image to Base64 Converter

When an image belongs in a data URI

Base64 turns binary bytes into ASCII. Wrapped as a data URI (data:image/png;base64,…) it can be inlined in HTML, CSS or JSON so a tiny icon does not need a second HTTP request. The cost is size: Base64 expands data by about a third, so it is a bad idea for large photographs.

Use it for favicons, CSS background ticks, email signatures with a small logo, or embedding a test fixture in a unit test. Do not use it as encryption — anyone can decode it — and do not dump a 4 MB photo into a stylesheet.

This page reads the original file (not a re-encoded canvas) so SVG and GIF bytes stay intact. The reverse box accepts a data URI or raw Base64 and downloads a PNG preview of whatever the browser can decode.

If you need to hash the same file, use the Hash Generator. If you need to shrink it first, compress or resize, then convert.

Everything stays in the browser. Very large strings can freeze the page while they are copied — that is a clipboard/DOM limit, not an upload.

Both directions

Drop an image to get its Base64 text — as a full data URI (data:image/png;base64,…) ready for HTML or CSS, or as raw Base64 without the prefix for JSON APIs and config files. The file is read byte for byte, so the original format and quality are preserved; nothing is re-encoded. In the other direction, paste a data URI or raw Base64 to preview the image and download it as a file.

Using the output

<img src="data:image/png;base64,iVBORw0KGgo…" alt="Logo" width="32" height="32">

.icon { background-image: url("data:image/svg+xml;base64,PHN2Zy…"); }

{ "avatar": "iVBORw0KGgo…" }   // raw Base64 in JSON

Base64 turns every 3 bytes into 4 characters, so a 30 KB image becomes about 40 KB of text — and inlined data cannot be cached separately from the page that contains it.

When inlining helps, and when it hurts

• Good fits: tiny icons and UI images under a few kilobytes, CSS backgrounds that must appear instantly, single-file HTML reports, test fixtures, and APIs that only accept text.
• Poor fits: photos and large images. They bloat the HTML or CSS, delay rendering of everything after them, and are downloaded again every time the page changes.
• Email: many email clients block or strip data URIs in images, so hosted images or attachments are more reliable in newsletters.
• For SVG in CSS, URL-encoding the SVG text is often smaller than Base64.

Troubleshooting pasted Base64

• Remove line breaks or spaces that were added when the text was copied from an email or log.
• URL-safe Base64 uses - and _ instead of + and /; convert them back before decoding as a standard image.
• If the preview fails, the text may be cut off — Base64 length is always a multiple of 4, padded with =.
• Base64 is an encoding, not encryption. Anyone can decode it, so never use it to hide private images.

How small is “small enough” to inline?

Build tools give a useful benchmark: Vite inlines assets under 4 KB by default, and webpack’s classic url-loader setups commonly used 8 KB. Above that, a separate cached file is usually faster, especially for images repeated across pages. Browsers handle data URIs of several megabytes, but very long strings make HTML and CSS slow to parse and awkward to edit, and large pastes can stall this page while it decodes.