Private · No upload

Convert an image to Base64

Turn a small icon into a data URI you can paste into HTML or CSS. Check the size first - inlining a large photo will make the page heavier, not lighter.

Drop images here or choose files

JPEG, PNG, WebP, GIF, and BMP. Nothing is uploaded.

Image to Base64 data URI for HTML and CSS

A desk of files - photographs stay as files; only tiny icons belong inline

Use this page to convert an image to Base64 and copy a data URI for HTML or CSS. Inlining removes a request. It also prevents the browser from caching that image across pages, and it bloats HTML by roughly a third. That trade is excellent for a 600-byte icon. It is how a homepage quietly becomes 1.4 MB of encoded JPEG.

This tool shows both weights on purpose. If the data URI is "fine," you are looking at an icon. If it is a novel, put the file on a CDN and use a normal src. CSS backgrounds are the same rule. Email clients that block hosted images are the rare case for a slightly larger inline - still not a hero photo.

Compress or convert first if the source is sloppy. Then encode. For markup that needs many widths, you want files on disk and a picture tag, not a URI per breakpoint.

Base64 in HTML img tags and CSS backgrounds

HTML - tiny icon as a data URI
<img src="data:image/png;base64,iVBORw0KGgoAAA..." alt="" width="16" height="16">
CSS - background from a data URI
.icon-chevron {
  background-image: url("data:image/svg+xml;base64,PHN2Zy...");
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
}

Frequently asked questions

When should I convert an image to Base64?

Tiny, critical, cache-awkward assets: a 400-byte chevron, a 1 KB logo for a one-page email. Not a blog photograph. Not a 200 KB PNG icon.

Why is a Base64 data URI larger than the file?

Base64 expands bytes by about a third. That is the tax. If the URI is bigger than a separate request would have been, do not inline it.

Can I use Base64 in CSS background-image?

Yes, with url("data:..."). Same size rule. A 40 KB URI in every stylesheet is a bad trade.

Does a data URI cache across pages?

No. It lives in the HTML or CSS you pasted. A normal src can be cached and reused. That is why photographs should stay files.

Should I compress the image before Base64?

Yes, if the source is sloppy. Then encode. For many widths you want files on disk and a picture tag, not a URI per breakpoint.

Does image to Base64 upload the file?

No. Conversion is immediate in this tab. We never receive the file.