Your data is never sent to a server or stored anywhere. All processing happens in your browser.

Image to Base64 (Data URL Generator)

How to Use

Drag an image into the drop zone (or click to choose). The file is encoded into a Base64 string and a data URL. The data URL is ready to drop into a CSS `background-image` or an HTML `<img>` `src`; the raw Base64 string is also available separately if you need just the encoding.

Base64 and Data URLs

Base64 encodes arbitrary binary data as ASCII text. A data URL (`data:image/png;base64,...`) wraps Base64 with the MIME type so it can be embedded directly in HTML or CSS. Base64 inflates byte size by about 33%, so embedding large images bloats the surrounding HTML/CSS — keep this for icons and small assets.

Use Cases

  • Inlining small icons directly into CSS or HTML
  • Embedding images in email templates without external hosting
  • Building self-contained single-file HTML demos
  • Including icons in a browser extension manifest
  • Generating sample data when an API expects a base64 string

Privacy

Reading and encoding happen entirely in the browser via FileReader; the image never leaves your device. Internal or confidential images stay local.

FAQ

What is the difference between the data URL and the raw Base64 string?

The raw Base64 string is just the encoded bytes. A data URL wraps that string with a prefix like data:image/png;base64, so it can be dropped directly into a CSS background-image or an HTML <img> src. The tool gives you both.

Is my image uploaded when I encode it?

No. The file is read and encoded entirely in your browser using the FileReader API — it never leaves your device. Internal or confidential images stay local.

Should I inline large images as Base64?

It is best for small assets like icons. Base64 inflates byte size by roughly 33%, so embedding large images bloats the surrounding HTML or CSS and can hurt load performance — keep large images as separate linked files.

Is there a file size limit?

Yes — files larger than 10 MB are rejected with an error, and non-image files are rejected as well. This keeps the generated Base64 string at a workable size.

Which image formats can I encode?

Any image file the browser recognizes can be encoded; the resulting data URL carries the file's MIME type (e.g. image/png, image/jpeg, image/svg+xml), which the tool also displays so you can confirm it.