Scrawlspace › Image Tools

Image to Base64 Converter

Drop or paste an image to get its Base64 string or a ready-to-use data URI, plus copy-ready CSS, HTML and Markdown snippets. The image is read on your device and never uploaded.

How to use Image to Base64

  1. Drop an image here, choose a file, or paste one with Ctrl+V.
  2. Pick the Output: Data URI, Base64, CSS, <img> or Markdown.
  3. Check how much larger the encoded version is.
  4. Click Copy to put it on your clipboard.

Frequently asked questions

How do I convert an image to Base64?

Drop the image here and the Base64 text appears straight away. Choose Base64 for the raw string or Data URI for a value you can use in src or url().

When should I embed images as Base64?

It suits small icons in CSS and single-file HTML pages, because it saves a separate request. For anything over about 10 KB it's usually better to link the file: Base64 is about a third bigger and can't be cached separately.

Can I use Base64 images in email?

Not reliably. Gmail and many versions of Outlook don't display data-URI images in HTML email. Host the image and link it, or attach it, instead.

What does a data URI look like?

data:image/png;base64, followed by the Base64 text. The part before the comma names the image type, so browsers know how to show it.

How do I turn Base64 back into an image?

Use Base64 to Image. To encode or decode text rather than images, use Encode / Decode.

Is my image uploaded?

No. The image is read and encoded in your browser.

Output formats

OutputWhat you getUse it in
Data URIdata:image/…;base64,…An img src, a CSS url() or JSON
Base64The encoded bytes onlyAPIs and databases that store the type separately
CSSbackground-image: url(data:…)A stylesheet
<img>A complete img tagHTML pages
Markdown![](data:…)Markdown editors that allow data URIs

When not to inline an image