What image formats are supported?

Any image format your browser can display is supported — including PNG, JPEG, GIF, WebP, SVG, AVIF, ICO, and BMP. The MIME type in the data URI is set automatically based on the file type.

Image to Base64 Converter

Q: What is a Base64 data URI?

A Base64 data URI is a way to embed binary files directly into text-based formats like HTML or CSS. The format is: data:[mimetype];base64,[base64-encoded-data]. For example, a small PNG embedded in an img src or CSS background-image.

upload_file

Drop an image here

PNG, JPG, GIF, WebP, SVG, AVIF and more

folder_open Browse files

File name—

File type—

File size—

Base64 size—

Dimensions—

Data URI (use in HTML src / CSS url)

Raw Base64 only

CSS background-image

Frequently Asked Questions

A Base64 data URI embeds binary files directly into text-based formats like HTML or CSS. The format is: data:[mimetype];base64,[base64-data]. This lets you use images inline without a separate file request, useful for icons and small graphics.

No. This tool uses the browser's FileReader API to convert the image to Base64 entirely on your device. Your image never leaves your browser — no upload, no server, complete privacy.

Base64 encoding increases file size by approximately 33% because it converts every 3 bytes of binary data into 4 ASCII characters. This is the trade-off for being able to embed binary data in text formats like HTML and CSS.

Any image format your browser can display is supported — PNG, JPEG, GIF, WebP, SVG, AVIF, ICO, and BMP. The MIME type in the data URI is set automatically from the file's type metadata.

Image to Base64 — Overview

The Image to Base64 converter encodes uploaded images into Base64 strings that can be embedded directly in HTML, CSS, or JSON without requiring a separate file or HTTP request. Base64 encoding represents binary data as a text string using 64 printable ASCII characters. When embedded as a data URI (e.g., data:image/png;base64,...), the image can be used directly in an img tag's src attribute or as a CSS background-image value — eliminating the need for an external image file and an extra network request. This technique is particularly useful for small icons and inline images in email templates (where external image hosting is unreliable), data URIs in CSS for icons, embedding images in single-file HTML documents, or passing image data through JSON APIs. The tool works entirely in the browser and supports all common image formats.

Common Use Cases

Embedding small icons and logos directly in CSS as data URIs

Including inline images in HTML email templates without external hosting

Passing image data through REST APIs or JSON payloads as encoded strings

Creating self-contained single-file HTML documents with embedded images

How to Use This Tool

Upload an image by dropping it onto the tool or clicking to browse your files. The Base64-encoded string is generated instantly and displayed in the output area. Copy the raw Base64 string or the complete data URI (with the data:image/... prefix) using the provided copy buttons.