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, or CSS background), and copy the result.
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:
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.