Logics Guru

Image to Base64

Turn an image into a Base64 data URL, ready for CSS, HTML or JSON.

Runs entirely in your browser. Your data never leaves this device and is never sent to our servers.
Drop an image to encode or click to choose a file · processed on your device

Preview

Output

A data URL embeds the image directly in your markup, so the browser needs no second request to fetch it. That is a real win for a tiny icon on a critical path, and a real loss for anything larger.

Base64 inflates the payload by about a third and the result cannot be cached separately from the file it sits in. As a rule of thumb, embed under 2 KB and link to anything bigger.

How to use it

  1. Drop in an image.
  2. Pick the output you need — a raw string, a CSS background, an img tag or JSON.
  3. Copy it, or download it as a text file.

Not working as you expect? Report a problem with this tool.

Frequently asked questions

When should I use a data URL?
For very small images on a critical rendering path — an inline icon or a 1px gradient. Under about 2 KB the saved request usually beats the added bytes.
When should I avoid it?
For anything sizeable. Base64 adds roughly 33% to the size, the bytes are re-downloaded with every copy of the page, and the image can no longer be cached or lazy-loaded on its own.
Is my image uploaded?
No. It is read on a canvas in your browser. That is deliberate — signatures, ID scans and unreleased artwork routinely go through tools like this.
Does it work in email?
Partially. Data URLs are blocked by Outlook and several webmail clients, so a hosted image is safer for email signatures.