How to Convert an Image to a Base64 Data URI

You can embed an image directly into HTML or CSS as a Base64 string — no separate file. It's a useful trick for tiny assets, with clear do's and don'ts.

What a data URI is

Converting an image to Base64 turns it into a long text string you drop straight into your code as data:image/png;base64,iVBORw0.... The browser decodes it back into the image — no separate request to the server.

When to use it (and not)

Good for: tiny icons, logos, or images embedded in CSS/email where saving an HTTP request matters. Bad for: large images — Base64 inflates size by ~33% and can't be cached separately, so it slows big pages down. Rule of thumb: only inline images under a few KB.

Convert instantly

Our free image to Base64 converter turns any image into a ready-to-paste data URI. To understand the encoding itself, see our Base64 explainer.

Bottom line

Base64 lets you inline small images to cut requests, but the ~33% size penalty makes it wrong for large files. Use it for tiny assets only — and keep big images as separate, cacheable files.