Image to Data URL

Turn an image into a data URL

This image to data URL converter reads an image file and gives you the full Base64 data URL, ready to paste into HTML, CSS, JSON or an email template. The file is read in your browser and is not uploaded.

How to use it

1. Drop an image onto the upload area, or click it to browse your files.
2. Check the preview, file name, dimensions and size shown in the upload area.
3. Click Copy to copy the complete data URL from the output box.

The tool handles one image at a time. Any image format your browser can open works, and the original file is encoded as-is, without resizing or recompression.

What a data URL looks like

A data URL has three parts: the prefix data:, the file’s MIME type with ;base64, and the Base64-encoded bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Base64 writes every 3 bytes of the file as 4 text characters, so the data URL is roughly one third larger than the original file. A 30 KB image becomes about 40 KB of text.

How to use the result

• HTML: <img src="data:image/png;base64,...">
• CSS: background-image: url("data:image/png;base64,...");
• JSON or JavaScript: store the string in a field or variable.

When to use data URLs

• Small icons, logos and placeholders where saving an extra HTTP request matters.
• Single-file HTML pages, demos and email templates that must not link to external files.
• Avoid them for large photos: they bloat your HTML or CSS and cannot be cached separately by the browser.

Frequently asked questions

Is my image uploaded to a server?

No. The browser reads the file locally and builds the data URL on your device.

Can I convert a data URL back to an image?

This tool only converts images to data URLs. Most browsers will display a data URL if you paste it into the address bar.