Skip to content
SocialTools

Image to Base64

Pick an image and get the full data:image/...;base64 string, plus its MIME type and length, ready to paste into code.

Image ToolsDev

Images never leave your browser.

Runs in your browser. Nothing you enter is uploaded.

What it does

This encoder reads one image file with the browser's FileReader and returns it as a complete data URI, prefix included, so you can drop it straight into an img src, a CSS url(), or a JSON field. Next to the string it shows the original file size, the detected MIME type, and the exact character count of the result.

Developers use it for small icons, email signatures, placeholder images in prototypes, and API payloads that expect inline image data. The character count matters because Base64 is roughly a third larger than the file it encodes, so you can see the cost before pasting it anywhere.

How to use it

  1. 1

    Click Choose an image and select a file. Only image types are accepted.

  2. 2

    Check the stats row: File size, MIME type, Base64 length, and Encoding.

  3. 3

    Look at the preview to confirm the right image was encoded.

  4. 4

    Press Copy data URI to put the full string on your clipboard.

What you get

A single text string in the form data:<mime>;base64,<data>, shown in a scrollable box with a preview, plus four stats: file size in KB, MIME type, Base64 string length, and encoding type.

When to use it

Inline icons in CSS
Encode a small SVG or PNG icon and paste the data URI into background-image: url(...) so the stylesheet needs no extra request.
Images in HTML email
Some email builders accept inline data URIs for tiny logos. The length readout tells you whether the string is small enough to be sensible.
Test an image upload API
Copy the data URI into a JSON request body when an endpoint expects Base64 image content, then strip the prefix if the API wants raw Base64 only.
Self-contained HTML prototypes
Embed placeholder images directly in a single HTML file you plan to share, so nothing breaks when it is opened offline.

Example

Input

logo-mark.png, 2,458 bytes

Output

File size: 2.4 KB
MIME type: image/png
Base64 length: 3,302
Output: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

The 22-character prefix plus 3,280 Base64 characters shows the usual one-third size increase over the original bytes.

Tips

  • Keep inline images small. Anything over a few kilobytes is usually better served as a normal file the browser can cache.
  • If an API asks for "raw Base64", delete everything up to and including the comma after base64.
  • Compress or resize the image first; the Base64 string grows with every byte of the source file.
  • SVG icons often encode smaller than PNG versions of the same shape, so try both.

Questions

Why is the Base64 string longer than my file size?

Base64 represents every 3 bytes as 4 text characters, so the encoded data is about 33% larger than the file. The data:image/...;base64, prefix adds a few more characters on top.

Does the copied text include the data:image prefix?

Yes. Copy data URI copies the full string including the MIME prefix, which is what HTML and CSS expect. Remove the part before the comma if you need raw Base64.

Can I decode a Base64 string back into an image here?

No. This page only encodes from a file. To view a data URI as an image, paste it into your browser's address bar.

Is there a file size limit for encoding?

There is no hard limit in the tool, but very large images produce multi-megabyte strings that are slow to display and copy. It is meant for small assets.

Related tools