How to Convert Images to Base64: Complete Guide for Developers

Embedding an image directly in HTML, CSS, or an API payload sounds clever — until you remember the file size penalty. This guide explains how Base64 image encoding works, when it's the right call, and how to do it in every major language.

What Is Base64 Encoding?

Base64 is a way to represent binary data as ASCII text. It uses 64 safe characters — A-Z, a-z, 0-9, plus + and / — to ensure the data passes safely through systems that can't handle raw binary, like email or URL parameters.

Three bytes of binary input become four characters of Base64 output. The result is always larger than the input, but it's always text-safe.

Why Convert Images to Base64?

• Embed in HTML or CSS via data URI — no separate HTTP request.
• Attach to email templates so the image renders inline regardless of the recipient's client.
• Send in JSON payloads for APIs that can't accept multipart uploads.
• Bundle into offline apps where the image must travel with the document.
• Generate from canvas or webcam on the client and POST as a string.

When TO Use Base64 Images

• Tiny icons (under ~2 KB) where saving the HTTP round-trip matters.
• HTML email templates where attachments aren't available.
• Single-file documents — a self-contained HTML or Markdown export.
• Critical above-the-fold imagery where you want zero network dependency.
• Generated client-side from canvas, screenshots, or webcam frames.

When NOT to Use Base64

• Large images. The 33% size overhead and lack of caching kills performance.
• Anything you want cached separately. Browsers cache the containing file, not the embedded image.
• Hot paths with many images. HTTP/2 multiplexing makes separate image requests very cheap now.
• Storage. Storing Base64 images in a database wastes 33% of disk space and bandwidth on every read.

How to Convert Using ConvertDox

The ConvertDox Image to Base64 tool handles the conversion entirely in your browser — no upload, no privacy compromise:

1. Drop your image (PNG, JPG, GIF, SVG, WebP) onto the upload area.
2. The Base64 string and full data URI appear instantly.
3. Click Copy as Data URI to paste straight into HTML or CSS.

Because the file never leaves your machine, this is safe to use with confidential or work-related assets.

Using Base64 in HTML

An <img> tag accepts a data URI as the src attribute. The format is data:[mime-type];base64,[data].

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
  alt="1x1 transparent pixel"
  width="20"
  height="20"
/>

Using Base64 in CSS

Same idea, used as a CSS background-image:

.icon-check {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLi4uLjwvc3ZnPg==");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}

This is the technique most CSS-in-JS libraries use for inline SVG icons.

Base64 in JavaScript

Browsers expose btoa() to encode and atob() to decode. For files, use the FileReader API:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}

// usage
const input = document.querySelector('input[type=file]')
input.addEventListener('change', async e => {
  const dataUri = await fileToBase64(e.target.files[0])
  console.log(dataUri) // "data:image/png;base64,iVBORw0KG..."
})

Base64 in Python

Python's standard library has built-in Base64 support:

import base64

# Encode an image file
with open("logo.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("ascii")
    data_uri = f"data:image/png;base64,{encoded}"

# Decode back to bytes
raw = base64.b64decode(encoded)
with open("logo-copy.png", "wb") as f:
    f.write(raw)

Performance Considerations

• +33% file size. A 12 KB PNG becomes a 16 KB Base64 string. Multiplied across a page, this adds up fast.
• No separate caching. If the HTML changes, the image re-downloads.
• Parser blocks rendering. Inline Base64 in the HTML head delays first paint.
• Lazy loading isn't possible the way it is for <img loading="lazy">.
• Better alternatives for icons: a sprite sheet, an icon font, or a single SVG sprite served once.

Frequently Asked Questions