Image to Base64

Embed images directly in HTML or CSS: pick a file to get its Data URI, or paste Base64 to preview it.

About this tool

A Base64 Data URI embeds an image directly inside your HTML or CSS — no extra request, no missing-icon errors, self-contained emails and single-file demos. Choose an image and the tool produces the full data:image/…;base64,… string plus a preview; paste Base64 and it renders the picture the other way.

How to use it

  1. Click Choose file and select an image — encoding happens instantly, in your browser.
  2. Copy the Data URI, or click Strip data: prefix if you only need the raw Base64.
  3. To go the other way, paste Base64 (with or without the prefix) and click Show preview.

Good to know

  • Base64 inflates data by about 33% — embed only small icons and sprites; link larger images normally.
  • Your image is read locally with the FileReader API and is never uploaded.
  • Generated data URIs work in <img src>, CSS url() and canvas sources.