Convert Image to Base64 Online

Turn an image into a base64 string or a data URL that you can paste into code, emails, or markup. Copy the output with one click or download it as a .txt file. Nothing is uploaded.

Upload an image

Drop an image here, or click to browse

JPG, PNG, WebP · Max 50 MB per file

Your image stays on your device. This tool runs entirely in your browser. Your file is never uploaded to our server.

Upload an image

How do you convert an image to base64?

Converting an image to base64 here is a four-step loop: drop the file, pick the output, copy the text, and paste it where you need it. The page accepts JPG, PNG, and WebP images up to 50 MB and encodes them with the Canvas API inside your browser, so nothing is uploaded. You can copy a raw base64 string or a full data URL, and you can download the result as a .txt file when you need to hand it to a colleague or drop it into a config later.

1Drop or select a JPG, PNG, or WebP image. It is read locally and never leaves your device.
2Choose raw base64 or a data URL. The data URL includes the MIME type, so the receiver knows the format.
3Copy the output to your clipboard, or download it as a .txt file for later.
4Paste the string into HTML, CSS, JSON, or an API payload where a binary file cannot go.

Data URL or raw base64: which do you need?

A data URL carries everything the decoder needs in one string. It starts with data:image/jpeg;base64, or the matching png or webp type, then the encoded text, so pasting it into an img src or a CSS background just works. A raw base64 string is the same text without the prefix, so it is about 20 characters shorter, but the receiving side has to know the format separately. The page offers both, so you can copy whichever your workflow expects.

Common use cases for image to base64

Inlining icons into HTML emails

Email clients often block remote images but always render data URLs. A 3 KB PNG icon encodes to roughly 4 KB of base64 and can sit inside the email itself, so it displays without a second request. Keep inlined assets small: icons, logos, and thumbnails under 10 KB are the sweet spot.

CSS backgrounds and single-file prototypes

A repeating texture tile of 1.5 KB becomes about 2 KB of text inside a stylesheet, removing one HTTP round trip on first paint. For a single-file HTML prototype that must work offline, embedding a 30 KB screenshot as a 40 KB data URL keeps the whole demo in one file you can email.

Storing thumbnails in a JSON API response

When an API returns a record with a tiny preview image, embedding the base64 in a JSON field means the client gets everything in one response. A 12 KB thumbnail becomes about 16 KB of text, a fair trade for avoiding a second image request per record.

Shipping an image through a text-only channel

Some systems accept only text, so a base64 string is the only way to pass an image through them. A 20 KB signature graphic becomes about 27 KB of text that you can paste straight into a config file or a script constant.

Why is base64 about 33% larger than the file?

Base64 encodes every 3 bytes of binary as 4 text characters, which is where the extra third comes from. A 100 KB image becomes roughly 133 KB of base64, and a 1 MB photo becomes about 1.33 MB. That overhead is only worth it when the text can replace an HTTP request or fit somewhere a binary file cannot go, which is why the format is aimed at small assets rather than full-resolution photos.

When should you avoid inlining base64?

Large images: a 2 MB photo becomes about 2.7 MB of text and adds that weight to every page load, where a cached binary file would load once.
Images used on many pages: a data URL is cached only with the document it sits in, so each page re-sends the same encoded bytes.
Files you might edit later: base64 is a delivery convenience, not a working format, so keep the original binary for editing.

Why convert to base64 in the browser?

The encode runs with the Canvas API inside your browser, so the image never leaves your device. That matters when the file is a screenshot of an internal system, a client logo, or a personal photo you would not want to send through a third-party server. There is no account, no upload, and no queue, and the base64 text is usually ready to copy in under a second.

Frequently asked questions

How do I turn an image into a data URL?

Drop the image on the page and pick the data URL option. The page prepends the correct MIME type, such as data:image/png;base64, so you can paste the result straight into an img src or a CSS background.

What is the difference between base64 and a data URL?

A raw base64 string is just the encoded text. A data URL is the same text with a data:image/jpeg;base64 prefix that tells the receiver the format, so it is slightly longer but self-describing.

Is base64 bigger than the original image?

Yes, roughly 33% bigger, because every 3 bytes of binary become 4 text characters. A 100 KB image encodes to about 133 KB, which is the price of turning binary into text you can paste.

Can I convert base64 back into an image?

Yes. Paste the string into the base64 to image tool on this site and it decodes it back into a viewable, downloadable file. A data URL is detected automatically, while a raw string needs the format selected.

What image formats can I convert to base64?

JPG, PNG, and WebP, up to 50 MB per file. The output matches the source format, so a PNG stays a PNG and keeps its transparency.

When should I not use base64?

Skip it for large photos and for images that appear on many pages, since the 33% overhead and the lack of standalone caching outweigh the benefit. Reserve it for small assets such as icons, thumbnails, and one-off test images.

Does this tool upload my image?

No. The conversion runs entirely in your browser with the Canvas API, so the file never leaves your device and no copy is sent anywhere.