What Is Base64 Image Encoding?

Base64 is an encoding scheme that converts binary data — like image bytes — into a string of printable ASCII characters. For images, the result is called a data URI (or data URL): a self-contained string that represents the entire image as text.

A Base64 image URI looks like this:

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

The format is always: data:[MIME type];base64,[encoded data]. The browser can use this string directly in an <img> src attribute or a CSS background-image value — no separate image file or HTTP request needed.

How to Convert an Image to Base64

The fastest way is to use our free Image to Base64 Converter. Upload your image and get the complete data URI string in one click. The conversion happens entirely in your browser — your file is never uploaded to any server.

If you prefer JavaScript, the browser FileReader API handles the conversion natively:

const reader = new FileReader();
reader.onload = (e) => console.log(e.target.result); // data URI
reader.readAsDataURL(file);

Using Base64 Images in HTML

Use the data URI as the src attribute of an img element:

<img src="data:image/png;base64,iVBORw0KGgoA..." alt="Embedded icon">

The image loads synchronously with the HTML — no separate request, no flash of missing content, no broken image if the CDN is slow.

Using Base64 Images in CSS

Use it as a background-image value:

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2Zy...");
  background-size: contain;
  width: 24px; height: 24px;
}

When to Use Base64 Encoding

Base64 encoding adds ~33% to the file size and prevents the browser from caching the image independently. Use it only when these conditions are true:

  • Small images under 5 KB — icons, bullets, small decorative elements where the size overhead is negligible
  • HTML emails — external images are often blocked; inline Base64 ensures images always display
  • Single-file documents — reports, invoices, or prototypes where all assets must be self-contained
  • API responses — APIs returning thumbnail images can embed them directly in JSON responses

When NOT to Use Base64

  • Large photos — a 500 KB photo becomes a ~667 KB Base64 string embedded in your HTML, massively inflating page size
  • Repeated images — browsers cache external image files; a Base64 image in CSS is re-decoded every page load
  • Images used on multiple pages — an external file is downloaded once and cached; a Base64 string is downloaded with every page it appears on

Decoding Base64 Back to an Image

If you have a Base64 string and need the actual image file, use our free Base64 to Image Decoder. Paste the string (with or without the data:image/ prefix) and download the image instantly.