Image to Base64

Inline images as data URIs

Drag & drop an image here

or

Encodes any image as a base64 data URI — nothing leaves your browser

Examples

CSS background

Input
icon.png
Output
background-image: url("data:image/png;base64,iVBOR…");

HTML img tag

Input
photo.jpg
Output
<img src="data:image/jpeg;base64,/9j/4AAQ…" />

Frequently asked questions

Is my image sent to a server?

No. The file is read locally with the browser's FileReader and encoded on your device — it never leaves your machine.

When should I inline an image as base64?

Data URIs avoid an extra network request, which suits small icons and above-the-fold images. Avoid it for large images, since base64 is about 33% bigger than the raw file and isn't cached separately.

Which snippet formats are available?

The raw data URI plus ready-to-paste CSS (background-image), HTML (<img>) and Markdown variants — copy any of them with one click.

Does it work with SVG?

Yes. SVGs are encoded as data URIs too, though for SVG a URL-encoded (rather than base64) variant is often smaller in production.

Related tools