🖼️ Image to Base64 Converter — Generate Data URIs

Complete Guide: Image to Base64 Converter

The Image to Base64 Converter transforms image files into Base64-encoded data URIs that you can embed directly in HTML, CSS, or JavaScript — eliminating the need for a separate HTTP request to load the image. It supports JPEG, PNG, GIF, WebP, SVG, and ICO formats.

Understanding the Data URI Format

A data URI follows this structure:

data:[mimetype];base64,[base64-encoded-data]

For a PNG image, that looks like:

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

The browser treats this string exactly like a URL pointing to an external file, but the entire image data is embedded inline. No network request is made.

Embedding in HTML

Replace a normal src attribute value with the data URI:

<img
  src="data:image/png;base64,iVBORw0KGgo..."
  alt="Company logo"
  width="120"
  height="40"
>

This is particularly useful in email HTML, where external images are often blocked by default by email clients. Inline data URIs bypass that restriction, though some older email clients have size limits on inline data.

Embedding in CSS

Data URIs work as values for background-image:

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...");
  background-size: contain;
  background-repeat: no-repeat;
}

This technique is common for small decorative icons in UI component libraries where every HTTP request saved improves perceived performance on low-latency connections.

Size Overhead: The ~33% Rule

Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, which increases the encoded size by approximately 33%. A 10 KB PNG becomes roughly 13.3 KB as a Base64 string. When served over HTTP with gzip or Brotli compression, much of this overhead is recovered because Base64 output is highly compressible. However, the decoded in-memory size is still larger, and browsers cannot cache inline data URIs separately from the HTML or CSS document they are embedded in.

When to Use Data URIs vs External URLs

• Good candidates: Small icons under 2–3 KB, logos used on a single page, images inside email templates, favicons, inline SVG fallbacks.
• Poor candidates: Hero images, product photos, anything above 10 KB, images shared across multiple pages (external URLs benefit from browser cache and CDN edge caching).

The single-page trade-off is important: a data URI eliminates one HTTP request but increases HTML/CSS payload size, which affects time-to-first-byte parsing. For pages with many large inline images, this degrades initial load performance.

SVG: The Special Case

SVG files can be embedded without Base64 encoding, because SVG is XML text. You can use URL-encoded SVG directly:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");

URL-encoded SVG is slightly smaller than Base64-encoded SVG and is more readable during debugging. It also allows you to modify the SVG inline — for example, changing a fill colour via CSS custom properties — which is impossible once the SVG is Base64-encoded as an opaque blob.

Embedding in Email HTML

Most email clients — including Gmail and Outlook — block externally loaded images by default. Embedding small images as Base64 data URIs guarantees they display without requiring the recipient to click "load images". Keep total email size under 100 KB including all inline images to avoid deliverability issues with spam filters.

Related Tools

For general text and string encoding tasks, see the Base64 Encoder. Before embedding large images, reduce their file size with the Image Compressor to keep the Base64 output manageable.