Why is the Base64 output larger than the original file?

Base64 encoding represents every 3 bytes of binary data as 4 ASCII characters, resulting in approximately 33% size overhead. An image that is 100 KB will become approximately 133 KB as a Base64 string. This is a trade-off for the ability to embed binary data in text-based formats.

What image formats are supported?

This tool supports PNG, JPEG, GIF, WebP, SVG, ICO, BMP, and AVIF — any format your browser can load as an image. The MIME type is detected from the file and included in the data URI prefix automatically.

Image to Base64 Converter

Drag-drop or select an image. Instantly get a data URI, raw Base64, or CSS background snippet. 100% client-side.

🖼

Drag & drop an image here, or

PNG, JPEG, GIF, WebP, SVG, ICO supported

File name—

MIME type—

Dimensions—

Original size—

Base64 size—

Size overhead

Select or drop an image to convert it to Base64.

How to Use the Image to Base64 Converter

Drop your image — drag it onto the drop zone, or click "Choose Image" to browse.
Select output format — choose between Data URI, Base64 only, CSS background-image, or HTML img tag.
Copy the result — click Copy to grab the output and paste it into your code.

What Is Base64 Image Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data using only 64 printable ASCII characters (A–Z, a–z, 0–9, +, /). When you encode an image as Base64, the raw bytes of the image file are translated into this text representation. The result can be embedded anywhere that accepts text — HTML, CSS, JSON, XML, email, or even JavaScript source code.

The Four Output Formats

Data URI is the complete embeddable string: data:image/png;base64,iVBORw0KGgo.... You can use this directly in an HTML src attribute, CSS url(), or anywhere a URL is expected.

Base64 only strips the prefix and gives you just the raw encoded string. Use this when you need the raw data for API payloads, JSON fields, or storage systems that manage the prefix themselves.

CSS background-image generates a ready-to-paste CSS snippet: background-image: url('data:image/png;base64,...');. Copy this into your stylesheet to set an element's background without a separate image request.

HTML img tag generates a complete <img src="data:..." alt=""> tag. Useful for embedding images in HTML emails or self-contained HTML exports.

Size Overhead and When to Use Base64

Base64 encoding inflates file size by approximately 33%. Every 3 bytes of binary data become 4 ASCII characters. A 100 KB PNG becomes about 133 KB as a Base64 string. For small images — favicons, icons, small logos, inline decorative images — this overhead is worthwhile because it eliminates an HTTP request. Browsers need a separate TCP round-trip for each external resource. For images under 10 KB, the 33% overhead is smaller than the network round-trip cost, making inline Base64 a net win for performance.

Supported Formats

This tool supports any image format your browser can decode: PNG (lossless, transparency), JPEG (photos), GIF (animations), WebP (modern efficient format), SVG (vector graphics), ICO (icons), BMP, and AVIF. SVG images are particularly interesting for Base64 encoding because they are already text-based — encoding them as Base64 actually makes them larger. For SVG, it can sometimes be more efficient to use URL-encoded SVG directly in CSS: url("data:image/svg+xml,%3Csvg..."); instead of Base64.

Use Cases for Embedded Images

Base64 images are used in HTML email templates (many email clients block external images), React and Vue component libraries that bundle assets, CSS frameworks that embed sprite icons, PDF generation tools, canvas and WebGL applications that need images without CORS issues, offline PWAs and single-file HTML exports, screenshot-to-HTML tools, and API responses that need to include image previews without file hosting. This tool makes it trivial to convert any image to the right embedded format for any of these use cases.

Privacy

Your image is never uploaded anywhere. The entire conversion is done using the browser's built-in FileReader API, which reads your local file directly into memory and encodes it as Base64. Nothing leaves your device.

Frequently Asked Questions

A Base64 data URI is a way to embed binary file data directly into a text document. It starts with "data:image/png;base64," followed by the Base64-encoded bytes. This allows images to be embedded in HTML, CSS, JSON, and XML without a separate HTTP request.

Base64 encoding represents every 3 bytes of binary data as 4 ASCII characters, resulting in approximately 33% size overhead. A 100 KB image becomes approximately 133 KB as Base64. This is the trade-off for being able to embed binary data in text-based formats.

Base64 images are best for small images under 10 KB where eliminating an HTTP round-trip improves performance, or when embedding images in email HTML, Markdown, JSON APIs, or environments where file serving is not practical. For large images, separate files with HTTP caching are far more efficient.

PNG, JPEG, GIF, WebP, SVG, ICO, BMP, and AVIF — any format your browser can load. The MIME type is detected from the file and included in the data URI prefix automatically.

No. The conversion happens entirely in your browser using the FileReader API. Your image never leaves your device. There is no server upload, no storage, and no data collection.