Image to Base64 Converter Online — Free

This one runs the other way: a file goes in from disk and a text string comes out, ready to paste straight into code. The file is read locally through FileReader, never uploaded, and the result lands in the output box as a complete data URI. People do this when a separate image file is awkward to ship: a logo in an email template, an icon in CSS, a fixture image in an automated test, an avatar in a JSON API call. You lose one HTTP request and gain roughly a third in text size. See also: turning a Base64 string back into a picture, cutting the file size before you encode it, encoding any other file as Base64.

How to use it

Pick a file in the upload field — any raster matching the image/* mask works, including PNG, JPEG, WebP and GIF.
Wait for the «Output stream...» box to fill. The string arrives complete, prefix and MIME type included.
Press Copy Signal and the whole string goes to your clipboard; there is no need to select it by hand.
Paste it where you need it: an img src attribute, a background-image property, a JSON field or a test fixture.
Hit Clear before loading the next file, or you risk copying the previous picture's string by mistake.

FAQ

How much bigger is the string than the file?

About 33 percent, plus a short prefix. The encoding packs three bytes into four printable characters, so a 200-byte icon becomes roughly 270 characters and a 3 MB photo becomes about 4 MB of text. For small graphics that is a fair trade for one saved request; for photographs it almost never is.

How large an image is still worth inlining into CSS or HTML?

A few kilobytes in practice: logos, icons, tiled backgrounds, state sprites. A big picture inside a stylesheet delays rendering, because the browser paints nothing until the CSS is parsed, and it destroys caching — a separate file would be cached on its own, while an inlined string is re-downloaded with every new version of the stylesheet.

Copy Signal does not seem to copy anything. Why?

Browsers grant clipboard access only over a secure connection and only in response to a direct user action. If the page is opened from a local file:// path or in an old browser, the call can be blocked. The workaround is easy: click inside the output box, press Ctrl+A and then Ctrl+C for the same result.

Can I encode an SVG, and should I?

You can — the file is read like any other. But Base64 is usually the wrong choice for SVG: vector markup can go into CSS as-is via url("data:image/svg+xml,...") with percent-escaping, which stays shorter and readable. Base64 earns its place only where the surrounding syntax cannot survive quotes and angle brackets.

Does my file get uploaded to this site?

No. The browser's own FileReader API opens the file straight from your disk, and the page turns those bytes into text in place. The code never transmits the contents anywhere, and nothing survives in memory once the tab is closed. That makes it safe for internal mockups and scanned paperwork alike.

The string is enormous and my editor is choking on it.

That is a reliable sign the image should not have been inlined at all. Resize it in pixels and recompress before encoding, or leave it as an ordinary link to a static asset. If you truly need the string, keep it in its own constants file and import it so the editor is not asked to render it inline.

Examples

Status icon inlined into CSS

Before: check-16.png, 214 bytes

After: .ok::before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...)}

Avatar inside a POST body

Before: avatar.jpg, 24 KB

After: {"avatar":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..."}

Rate this tool

Your rating and feedback help decide what to improve next.

— No votes yet