Tools

Image to Base64

Turn an image into a data URL you can paste into CSS or HTML.

Runs in your browserImages and colour4.4K
Free
Drop an image here

Or choose a file. It is processed in this tab and never uploaded — which is also why it handles photos far larger than any upload limit.

Choose a file

Encodes an image as a data URL, which lets it live inside a stylesheet, an HTML document or a JSON payload with no separate request. Worth doing for a small icon that would otherwise cost a round trip; not worth doing for a photograph, because Base64 inflates the bytes by a third and the result cannot be cached separately from the document that contains it.

How it works

  • The file is read and encoded in your browser; nothing is uploaded.
  • The output is a complete data: URL by default, or the raw Base64 payload if you turn that off.
  • Base64 makes any file about 33% larger — that is the cost of using only text-safe characters.

Where your data goes

Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.

When a run costs points, a one-line summary is saved to your own history so you can find it again. The summary records the shape of the run — sizes, counts, the values you looked up — never the content you pasted.

What it costs

Free up to 512.0 KB per run without an account. Past that, a run costs 1 points and is saved to your history.

Points come from signing up, checking in daily, commenting and completing your profile.

See how points work

Common questions

When is inlining an image actually worth it?
Under roughly 2–4KB: an icon, a small logo, a background pattern. Below that the saved round trip outweighs the 33% inflation. Above it you are making the document bigger and uncacheable to save one request that HTTP/2 was going to multiplex anyway.
How do I use the result in CSS?
background-image: url("data:image/png;base64,…") — keep the whole data: URL including the prefix. In HTML it goes straight into an img tag's src.
Why is my data URL so long?
Because it is the entire file rendered as text, plus a third. A 40KB PNG becomes about 54KB of characters. That is normal, and it is the reason to inline only small images.

The open-source behind it

This tool is a self-contained implementation. dankogai/js-base64 (BSD-3-Clause) does the same job as a library — if you need this behaviour inside your own program, start there rather than calling a web page.

dankogai/js-base64

Also known as

  • image to base64
  • base64 image encoder
  • data url generator
  • png to base64
  • img base64