How to Convert an Image to a Base64 Data URI

Converting an image to Base64 turns the file into a long text string you can paste directly into your HTML or CSS. That data URI embeds the image inline, so the browser does not make a separate network request to fetch it. Here is how it works and when it is worth doing.

What a Base64 data URI is

A data URI packs the whole image into a single string that starts with a prefix telling the browser what it is. For a PNG it looks like this:

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

The data:image/png part is the MIME type, base64 is the encoding, and everything after the comma is the encoded image. Drop that string into an <img src="..."> or a CSS background-image: url(...) and the image renders with no extra file to download.

When inlining helps

The main win is removing an HTTP request. Every separate file your page loads costs a round trip, so folding a tiny asset into the markup can speed up the first paint. Base64 is a good fit for:

Small icons and UI sprites
Inline SVGs used as backgrounds
A single hero placeholder you want available instantly
Email templates and self-contained HTML files

The tradeoff to watch

Base64 is not free. The encoding makes the data roughly 33 percent larger than the original binary, so a 100 KB image becomes about 133 KB of text in your file. Worse, an inlined image cannot be cached on its own. A normal image file is downloaded once and reused across pages, but a data URI is re-parsed every time the HTML or CSS that contains it loads.

The rule of thumb: inline tiny assets, link large ones. If an image is more than a few kilobytes or appears on many pages, keep it as a separate cached file.

Convert an image to Base64

Open the Image to Base64 tool and drop in your image.
Let it read the file and generate the data URI.
Copy the full data:image/...;base64,... string.
Paste it into your <img> tag or CSS rule.

The Image to Base64 tool runs entirely in your browser, so your image is never uploaded anywhere.

Image Compressor: shrink the file first so the Base64 string stays small.
PNG to WebP Converter: switch to a lighter format before encoding.
Image Resizer: cut the dimensions down so inlining actually makes sense.

Compress, resize if needed, then encode. Inline the small stuff and link everything else.