Base64 encoding converts binary image data into a plain-text string, letting you embed images directly inside HTML, CSS, JSON, or email without referencing a separate file. The tradeoff is a ~33% increase in size — a 100 KB image becomes roughly 133 KB as Base64. Use it strategically: great for small icons and email, wasteful for large photos.

What is Base64 encoding?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters: A–Z, a–z, 0–9, +, and /. Every 3 bytes of binary data become 4 Base64 characters, which is why the encoded output is always about 33% larger than the source.

For images, the Base64 string is typically prefixed with a data URI scheme so browsers know how to interpret it:

data:image/jpeg;base64,/9j/4AAQSkZJRgAB...

This self-contained string can be placed anywhere a URL is accepted — an <img> src, a CSS background, a JSON field, or an email HTML body.

When to use Base64 images

Small icons and inline SVGs (<5 KB) — Embedding tiny icons avoids extra HTTP requests. Saving one round-trip per icon adds up on icon-heavy pages.
Email HTML — Many email clients (Outlook, Gmail in certain modes) block externally linked images. Embedding images as Base64 data URIs ensures they always display.
CSS data URIs — Small background patterns or sprites can be inlined in stylesheets so they load with the CSS in a single request.
JSON API payloads — When you need to transmit an image over an API that only accepts JSON (e.g., sending a thumbnail to a machine-learning endpoint), Base64 lets you include binary data in a text field.
Single-file HTML documents — Presentations, reports, or offline tools that must be fully self-contained with no external assets.

When NOT to use Base64

Large images — The 33% size overhead compounds quickly. A 1 MB photograph becomes 1.33 MB of Base64 text, bloating your HTML or JSON payload substantially.
Images that need browser caching — Browsers cache image files independently. A Base64-embedded image is part of the HTML or CSS file and cannot be cached separately, so it re-downloads on every page load.
Images used across multiple pages — If the same image appears on ten pages and is Base64-encoded in each, you send the full encoded string ten times instead of the browser fetching one cached file.
Performance-critical pages — Large inline data URIs delay the HTML parse, increase Time to First Byte, and bloat JavaScript bundles if embedded in JS files.

How to convert online

If your image is in an uncommon format, first convert it to JPEG or PNG using Picovert's Image Converter, then paste the result into any Base64 encoder tool (search "base64 image encoder" — many free options exist). Most online tools accept JPG, PNG, GIF, WebP, and SVG and return the full data URI string ready to paste.

Convert using JavaScript

In a browser environment, the FileReader API reads a File or Blob object and returns a data URI string including the Base64 payload:

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

// Usage with a file input
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', async () => {
  const base64 = await toBase64(input.files[0])
  console.log(base64) // "data:image/jpeg;base64,..."
})

In Node.js (v18+), use the built-in fs module and Buffer:

import { readFileSync } from 'fs'

const buffer = readFileSync('image.jpg')
const base64 = buffer.toString('base64')
const dataUri = `data:image/jpeg;base64,${base64}`

Convert using Python

Python's standard library includes a base64 module — no extra packages needed:

import base64

with open("image.jpg", "rb") as f:
    data = base64.b64encode(f.read()).decode("utf-8")

# Build the full data URI
data_uri = f"data:image/jpeg;base64,{data}"
print(data_uri)

Change image/jpeg to match your format: image/png, image/webp, image/gif, etc.

Convert using the command line

macOS / Linux — The base64 command is built into the system:

base64 -i image.jpg -o image_base64.txt

Windows PowerShell:

[Convert]::ToBase64String([IO.File]::ReadAllBytes('image.jpg')) | Out-File image_base64.txt

Both commands write the raw Base64 string (without the data URI prefix) to a text file. Prepend data:image/jpeg;base64, manually when using the output in HTML or CSS.

Use in HTML

Replace the src attribute with the full data URI:

<img
  src="data:image/jpeg;base64,{YOUR_BASE64_STRING}"
  alt="Embedded image"
  width="200"
  height="150"
/>

Substitute {YOUR_BASE64_STRING} with the actual encoded value. The browser decodes and renders it exactly like a normal image URL.

Use in CSS

Data URIs work in any CSS property that accepts a URL, including background-image:

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

This is most effective for small icons and repeating patterns where the savings from eliminating an HTTP request outweigh the size increase.

Compress before encoding

Because Base64 adds ~33% to the file size, always compress your image first to keep the final encoded string as small as possible. Picovert's Image Compressor reduces JPEG, PNG, and WebP file sizes significantly without visible quality loss. A 200 KB image compressed to 60 KB produces a Base64 string of ~80 KB instead of ~267 KB — a meaningful difference when the string lives inside an HTML document or JSON payload.

In summary: Base64 is the right tool when you need a self-contained, server-independent image — particularly for email HTML, small icons, and API payloads. For everything else, stick with regular file URLs to keep page load times fast and leverage browser caching. And whenever you do use Base64, compress first.