Image → Base64

How to convert: step by step

1. 1
   Drag and drop your image
   Drop a PNG, JPG, GIF, WebP, SVG, or any other image format onto the upload area. Or click to open a file picker.
2. 2
   Wait for instant encoding
   The browser reads the image using FileReader and encodes it to Base64. No server round-trip: it completes in milliseconds.
3. 3
   Preview the image
   A thumbnail preview confirms you uploaded the right file, along with the file name, size, type, and Base64 string length.
4. 4
   Choose your output format
   Pick from: full data URI, raw Base64 only, an HTML img tag, or a CSS background-image declaration.
5. 5
   Copy and embed
   Click Copy next to any output field. Paste the result directly into your HTML, CSS, JSON, or code wherever an inline image is needed.

Frequently Asked Questions

What is a Base64 data URI?

A data URI is a URL that embeds file content directly in the string rather than pointing to an external resource. For images it looks like data:image/png;base64,iVBORw0KGgo.... It lets you inline images in HTML, CSS, or JSON without a separate HTTP request.

Is my image uploaded to a server?

No. The image is read by the browser's FileReader API and encoded in JavaScript on your device. Nothing is transmitted over the network.

What image formats are supported?

Any format the browser can render: PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF, and more. The MIME type from the file is preserved in the data URI prefix.

Why is the Base64 string so much larger than the original file?

Base64 encoding uses 4 characters to represent every 3 bytes of binary data, increasing size by approximately 33%. This is the standard trade-off for embedding binary data in text contexts.

When should I use a data URI instead of a regular image URL?

Data URIs are useful for small icons or images that should load without a separate HTTP request, for single-file HTML documents, for email templates, and for images embedded in JSON payloads or configuration files.

How do I use the output in a CSS file?

Copy the CSS background-image output: it looks like background-image: url('data:image/png;base64,...'): and paste it into your stylesheet. No additional changes are needed.

Can I use Base64 images in React or Vue components?

Yes. Set the src attribute of an img element to the full data URI string. In React: <img src={dataUri} alt='...' />. The browser renders it as a normal image.

Is there a file size limit?

There is no hard limit enforced by the tool. Very large images (multi-megabyte) will produce very large Base64 strings. Embedding large images inline is generally not recommended for performance reasons.

How do I decode a Base64 string back to an image?

Construct a data URI with the correct MIME type prefix (e.g., data:image/png;base64, followed by your Base64 string) and set it as an image src, or use the browser's atob() function to decode the binary data.