No upload, 100% local, no account

Image → Base64 Converter

Encode any image to a Base64 data URI, or paste a data URI to decode it back to an image. Copy the result or grab the CSS url() snippet. Nothing leaves your device.

How Image to Base64 works

Image to Base64 reads your image file and encodes it as a Base64 data URI that you can embed directly in HTML, CSS or JSON without needing a separate file request. The conversion uses the FileReader API in your browser; no bytes from your image are sent to a server. You can also paste a Base64 string back in to decode it and preview the image, all locally.

A Base64 data URI is about 33% larger than the binary original because each group of three bytes expands to four ASCII characters. This size increase is the expected trade-off for the convenience of inlining an image into a document or stylesheet. The tool shows you both the raw Base64 string and a ready-to-use HTML img tag snippet and a CSS background-image snippet for quick copy-paste into your project.

Written by Bastien Sulyan

How to use Image to Base64, step by step

  1. Drop an image file onto the upload area or click to browse. Accepted formats: JPEG, PNG, WebP, GIF, SVG.
  2. The Base64 data URI appears immediately in the output field.
  3. Copy the raw Base64 string, or use the pre-formatted HTML img tag or CSS background-image snippet.
  4. To decode, paste a Base64 string into the input field and switch to decode mode to preview the image.
  5. Click the copy button beside any snippet to copy it to the clipboard.

Common use cases

  • A front-end developer inlines a small icon as a data URI in a CSS file to eliminate an extra HTTP request.
  • A developer embeds a tiny loading spinner as a Base64 src attribute so the placeholder image is available before the JavaScript bundle loads.
  • A QA engineer copies the Base64 of a test image to paste directly into a JSON payload for an API test.
  • An email template builder inlines a signature logo as a Base64 data URI because some email clients block external image requests.

Frequently asked questions

Why is the Base64 output about a third larger than my original file?

Base64 encoding represents every three binary bytes as four ASCII characters (a 4/3 ratio). An image that is 100 KB in binary becomes approximately 133 KB as a Base64 string. This is inherent to the encoding scheme, not a tool limitation.

Is the image content transmitted to a server during encoding?

No. The FileReader API reads the binary file from your local disk and passes the result directly to the JavaScript encoding function inside your browser tab. The image data does not leave your device.

Can I use the data URI output in any HTML or CSS context?

Yes. A data URI starting with data:image/jpeg;base64, followed by the encoded string can be used as the src attribute of an img tag or as the url() value in a CSS background-image property. All modern browsers support data URIs. Very large data URIs can slow page rendering, so inlining is typically reserved for small images under a few kilobytes.

Does the tool support animated GIFs?

The tool encodes the full binary content of any file you provide, including animated GIFs. The resulting data URI, when used as the src of an img tag, will play the animation in browsers that support GIF animation.

How do I go the other way and decode a Base64 string back to an image?

Switch the tool to decode mode, paste your Base64 string (with or without the data: prefix), and the tool will decode it and offer the binary image as a download as well as showing a preview.