Image to Base64

An image as text

Base64 encodes binary data using only printable characters, which lets an image be embedded directly in an HTML or CSS file instead of living in a separate file.

<img src="data:image/png;base64,iVBORw0KG...">

It gets bigger, by about a third

Base64 represents every three bytes as four characters, so the encoded version is roughly 33 % larger than the file, plus a little for line handling. That is the trade: one fewer network request, more bytes to transfer.

When it is worth doing

• Tiny icons and spacers where the HTTP request would cost more than the extra bytes.
• A single self-contained file — an HTML email, a report, a page that must work with no external files.
• Inline SVG or small background images in a stylesheet.
• Testing, where you want an image without hosting anything.

When it is a mistake

• Anything over a few kilobytes. The size penalty dominates.
• Images used on more than one page. A real file gets cached once; an embedded one is re-downloaded with every page that contains it.
• Photographs. Almost always the wrong choice.
• Anything you might want to change later without editing code.

A reasonable rule: under about 4 kB, embedding is defensible. Above that, use a file.

Common uses

• CSS background icons in a design system.
• HTML email, though many clients block data URLs as well as remote images.
• Single-file documents that must travel intact.
• Quick prototypes with no asset pipeline.

Questions people ask

What is a data URL?

A way of putting the file itself into the src attribute instead of a link to it, so no separate request is needed.

Why is the base64 bigger than the image?

Base64 uses four characters for every three bytes, so it is about 33 % larger.

When should I embed an image this way?

For very small images, roughly under 4 kB, or when a file has to be entirely self-contained.

Does it work in email?

Sometimes. Many email clients block data URLs just as they block remote images, so do not rely on it.

Your image is not uploaded

This is the part worth being precise about, because almost every other site offering these tools works differently.

When you choose a file here, your browser reads it from your disk into memory and draws it onto a canvas. The work happens on your own machine. No copy is transmitted, because this site is a set of static files with no server behind it capable of receiving one.

The practical consequences: it works with no internet connection once the page has loaded, there is no file size limit beyond your own memory, there is no queue, nothing is retained on anyone's disk afterwards, and your photographs are not passing through a third party's infrastructure.

You do not have to take that on trust. The about page lists every network request this site makes, read live from your own browser.