🖼 Image & Media

Image ⇄ Base64

Convert an image to Base64 (Data URI) to embed in CSS or HTML, or rebuild an image from a Base64 string. Everything runs in your browser, so your images are never sent to a server.

Examples (click to try)

Pick an image and it converts to a Data URI right away. Images stay on your device.

(Pick an image and the Data URI appears here)

How to Use the Image ⇄ Base64 Tool

Use the segment control to switch between "Image to Base64" and "Base64 to Image". Both directions run entirely in your browser, so your images never leave your device.

  • Image to Base64: Choose an image file and it is converted to a Data URI (data:image/png;base64,…). Pick the output format — Data URI, HTML <img>, or CSS background-image — and see the character count and approximate size.
  • Base64 to Image: Paste a Data URI or a raw Base64 string to see a preview and download it as an image file.
  • Copy: Copy the result to your clipboard with one click.

Worked example: embedding an icon in CSS

Pick a small 20×20 PNG icon, for instance, and you get a Data URI that starts with data:image/png;base64, (e.g. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…). Switch the output format to "CSS background", copy it, and paste it straight into your stylesheet:

.icon {
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…");
  background-size: contain;
}

If you want it inline in HTML instead, choose "HTML <img>" to copy it as <img src="data:image/png;base64,…" alt=""> — the image shows up with no separate file to host.

When This Comes in Handy

  • Embedding a small icon or logo in CSS (background-image: url("data:…")) to cut HTTP requests
  • Including images directly in HTML emails or Markdown
  • Inspecting a Base64 image that arrived in an API response or JSON payload
  • Quickly testing a favicon or SVG as a Data URI

Frequently Asked Questions

Are my images sent to a server?
No. Both the conversion to Base64 and the rebuild back to an image happen entirely in your browser. Your images are never transmitted to or stored on any server, so confidential images are safe to use here.
When would I use a Data URI?
It is handy when you want to embed a small icon or logo directly into CSS or HTML to cut down on HTTP requests, or include an image inside an HTML email. You can output the raw Data URI, an HTML img tag, or a CSS background-image declaration.
Can I turn a Base64 string back into an image?
Yes. Switch to the "Base64 to Image" mode and paste either a Data URI (data:image/png;base64,…) or a raw Base64 string. A preview appears and you can download the result as an image file. Raw Base64 is rebuilt as PNG.