What Is Base64 Encoding?

Base64 is a way to represent binary data (like an image file) as a text string using only ASCII characters. The encoded string can be embedded directly in HTML, CSS, or JSON without needing a separate file or URL.

A base64-encoded image looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEU...

This is called a data URI. When a browser encounters it in an <img> tag or CSS background-image, it decodes the string and renders the image directly — no HTTP request needed.

How to Convert

  1. Open Image to Base64
  2. Upload your image (drag & drop, browse, or paste)
  3. The tool instantly shows:
    • The complete data URI (data:image/png;base64,...)
    • The raw base64 string (without the data URI prefix)
    • File size comparison — original vs encoded size
  4. Click Copy to copy the result to your clipboard

Processing is instant because it happens entirely in your browser. No server upload, no waiting.

When to Use Base64 Images

  • Inline images in HTML emails — many email clients block external images by default. Base64-encoded images are embedded in the email itself and display without requiring the recipient to "load external images".
  • Small icons in CSS — embedding tiny icons (under 2KB) as base64 in your stylesheet eliminates HTTP requests, improving page load performance.
  • Single-file HTML documents — creating self-contained HTML files for reports, documentation, or offline viewing that include all images inline.
  • JSON API payloads — when an API needs to include image data in a JSON response, base64 encoding is the standard approach.
  • Markdown documents — some Markdown renderers support data URIs for embedding images without external files.

When NOT to Use Base64

Base64 encoding increases file size by approximately 33%. A 100KB image becomes ~133KB as base64 text. This means:

  • Don't use it for large images — anything over 10KB is better served as a regular image file from a CDN
  • Don't use it for frequently changing content — the browser can't cache inline images separately from the HTML/CSS
  • Don't use it in HTML pages with many images — the HTML file itself becomes bloated and slow to parse

The sweet spot for base64 images is small, static assets under 2-5KB: icons, logos, simple graphics, and UI elements that appear on every page.

Open Base64 Converter →