Is my image uploaded to a server?

No. The entire conversion happens in your browser using the FileReader API. Your image never leaves your device.

Which image formats are supported?

PNG, JPG/JPEG, GIF, WebP, and SVG are all supported. Any format your browser can read via FileReader.readAsDataURL will work.

Why does base64 encoding make the file larger?

Base64 represents binary data using only 64 printable ASCII characters, which requires roughly 33% more bytes than the original binary. Use it for small assets where eliminating an HTTP request outweighs the size cost.

What is the difference between a Data URI and Base64 only?

A Data URI includes the scheme and MIME type prefix (data:image/png;base64,) so browsers can render it directly. "Base64 only" strips that prefix and returns just the encoded string, which is useful when the MIME type is stored separately.

Image to Base64

Name: Image to Base64
Availability: InStock
Author: Nham Vu

Upload an image, pick a format (Data URI, Base64 only, CSS, HTML, Markdown, or JSON), then copy the output with one click.

Mode:

Upload Image

Click or drag image here

PNG, JPG, GIF, WebP, SVG

Encoded Output

Summary

Upload an image, pick a format (Data URI, Base64 only, CSS, HTML, Markdown, or JSON), then copy the output with one click.

How it works

Click the upload area or drag and drop an image file onto the drop zone.
Wait for the preview to appear along with the image dimensions and file size.
Select the output format that matches your use case using the format buttons.
Click the Copy button next to the output field to copy the encoded string.
To reverse the process, toggle "Decode (Base64 to Image)", paste a data URI, and click Decode.

Use cases

Embed small icons or logos directly in CSS to eliminate HTTP requests.
Inline images in HTML email templates where external image hosting is unreliable.
Store image assets in a JSON configuration file or database column.

Frequently Asked Questions

Last updated: 2026-06-10 · Reviewed by Nham Vu