Image to Base64 Converter: Encode Any Image

Convert Any Image to Base64

Base64 encoding transforms binary image data into a text string that can be embedded directly in HTML, CSS, JavaScript, JSON, or any text based format. Drop an image above, pick your output format (Plain Base64, Data URI, HTML Embed, HTML Object, HTML Link, JSON, or CSS Background), and copy the result. For all Base64 tools and reference material, visit the Base64 Hub.

How Image to Base64 Conversion Works

When a browser reads an image file, it processes a stream of bytes: JPEG compression blocks, PNG chunks, SVG XML nodes. These bytes include values outside the printable ASCII range, which makes them unsafe to embed in text documents.

Base64 encoding solves this by mapping every 3 bytes of binary data to 4 characters from a 64-character alphabet (A-Z, a-z, 0-9, +, /). The result is a pure ASCII string that any text based protocol can carry without corruption.

The FileReader approach

This tool uses the browser’s FileReader API:

const reader = new FileReader();
reader.onload = () => {
  const dataUri = reader.result;
  // dataUri = "data:image/png;base64,iVBORw0KGgo..."
};
reader.readAsDataURL(file);

The readAsDataURL method returns a complete data URI including the MIME type prefix. From there, you can extract the raw Base64 string or use the data URI directly.

Output Format Options

Plain Base64

The raw encoded string without any prefix. Use this when you need to store the image in a database, send it in an API payload, or pass it to a function that expects pure Base64 input.

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ...

Data URI

A complete data URI with MIME type. Use this in HTML <img> tags, CSS url() functions, or anywhere a URL is expected:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSU..." alt="Inline image" />

CSS Background

A ready to paste CSS declaration:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);

When to Inline Images vs. Serve Them Separately

Inline (Base64 data URI)

Best for images under 10 KB. Inlining eliminates one HTTP request, which matters on high latency connections or when you have many small images. Common use cases: favicons, tiny icons, email templates (where external images are often blocked), single file HTML exports, and SVG sprites.

Separate files

Better for images over 10 KB. Separate files benefit from browser caching (the image is fetched once and reused), CDN distribution, lazy loading, responsive srcset with multiple resolutions, and WebP/AVIF format negotiation. The 33% size penalty of Base64 also becomes significant for larger files.

The critical size threshold

Google’s Lighthouse and most web performance guides recommend 10 KB as the cutoff. Below that, the HTTP request overhead (DNS + TCP + TLS + headers) often costs more than the Base64 size increase. Above that, caching and compression advantages of separate files win.

Base64 Images in Different Contexts

HTML email

Email clients block external images by default. Base64 data URIs bypass this for small images like logos and icons. However, many email clients have total email size limits (Gmail: 102 KB before clipping), so keep Base64 usage minimal.

Single page applications

SPAs sometimes Base64 encode critical above the fold images to avoid layout shift during loading. The image data arrives with the HTML, so there is no flash of missing content.

Markdown and documentation

Some Markdown renderers support data URIs in image syntax. This lets you create self contained documents without external image dependencies:

![Logo](data:image/png;base64,iVBORw0KGgo...)

Canvas and WebGL

The Canvas API’s toDataURL() method returns Base64 data URIs. Going the other direction, you can load Base64 images into canvas for manipulation, pixel reading, or WebGL texture uploads.

Supported Image Formats

This tool handles any image format your browser supports: JPEG, PNG, GIF, WebP, SVG, BMP, ICO, and AVIF. The MIME type is automatically detected from the file, so the generated data URI always has the correct type prefix. For format specific pages, see the JPG to Base64, PNG to Base64, SVG to Base64, and WebP to Base64 converters.

To decode a Base64 string back to a downloadable image, use the Base64 to Image converter. For text only Base64 encoding and decoding, the main Base64 Encoder handles that.