Image to Base64

Developer tools

Turn an image into a line of text

Drop an image to get its Base64 data URI as raw text, CSS or an <img> tag — or paste Base64 to turn it back into an image.

Drop an image or browseJPEG, PNG, WebP, AVIF, GIF, SVG or ICO — encoded in your browser

About this tool

Data URIs, both ways

A data URI puts an image directly inside HTML, CSS or JSON — useful for tiny icons, email templates and anywhere a separate request is not an option. This encodes any image to Base64 and gives you the formats you actually paste, shows the size cost (Base64 is a third larger than the file), and decodes the other way too: paste a data URI or raw Base64 and download the image it contains.

  • Free, no sign-up
  • Runs in your browser
  • Nothing uploaded

Every paste format

Raw Base64, a full data URI, a CSS background-image rule and an <img> tag with width and height filled in.

Honest about size

Base64 adds about 33%. The tool shows the original and encoded sizes, and warns when an image is too big to be worth inlining.

Decode too

Paste Base64 or a data URI and get the image back, with its real format detected.

Step by step

How to convert an image to Base64

  1. Add an image

    Drop any image, or switch to Decode and paste Base64.

  2. Pick the format

    Choose raw Base64, data URI, CSS or <img>.

  3. Copy it

    Copy the text into your code — or download the decoded image.

Get the most out of it

Tips for the best results

  • Only inline small imagesUnder about 4 KB a data URI saves a request; bigger ones bloat your HTML and cannot be cached separately.
  • Compress firstBase64 inherits the file size. Shrink the image before encoding it.
  • SVG is better as textFor SVG, URL-encoding is smaller than Base64 — use the SVG optimizer’s data URI output.
  • Email needs inlineMany email clients block external images; small inline logos show immediately.

Questions

Questions about this tool

Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.

What is a Base64 data URI?

A way of writing a file as text, prefixed with its type: data:image/png;base64,… Browsers treat it exactly like a URL to the image, so it can go in an <img> src or a CSS url().

Does Base64 make images bigger?

Yes — about 33% larger than the binary file, because every 3 bytes become 4 characters. That is why it only makes sense for small images.

How do I decode Base64 to an image?

Switch to Decode, paste the Base64 text or the whole data URI, and the image appears with a download button. The format is detected from the data itself.

Which image formats work?

Any image your browser can open — JPEG, PNG, WebP, AVIF, GIF, SVG and ICO.

Is my image uploaded?

No. Encoding and decoding happen in your browser.