/01 What a Base64 data URI is
A data URI is a way of putting a whole file inside a single line of text. The image's bytes are encoded as Base64, given a small header saying what kind of image it is, and the result is a long string you can paste directly where a URL would normally go: an img src attribute, or a background-image declaration in CSS.
The point is that no separate file is needed. The HTML or CSS carries the image inside itself, and the browser renders it from the string without making another request. This converter takes any image file, does the encoding in your browser, and hands you both the raw Base64 string and the complete data URI ready to paste.
It supports multiple images at once, so a set of icons can be converted in one pass, with a copy button for each result. Nothing is uploaded: the file is read, encoded, and handed back locally.
/02 When embedding helps
The case for data URIs is strongest at small sizes and single uses. Every image on a page normally costs an extra network request: the browser asks for the file, waits, and receives it. For a large image that request is worth paying. For a tiny icon, the request can cost more than the image itself, and embedding removes it entirely.
The situations where this pays off are easy to recognise. Single-page sites that want one file and no assets folder. HTML emails, where linked images are often blocked by mail clients but embedded ones display. Self-contained documents, like a saved report or a code snippet, that must survive being emailed as one file. Prototypes and demos where a whole folder of images is more trouble than it is worth.
Background textures and small decorative flourishes are also good candidates: they appear once, they are small, and a separate request for each one is pure overhead.
/03 When embedding hurts
The costs are just as clear. Base64 inflates data by about a third: every three bytes become four characters, so a 30KB image becomes roughly 40KB of text. Worse, that text lands inside the CSS or HTML file, which has to be downloaded before anything renders, so a large embedded image delays the whole page rather than loading alongside it.
The bigger loss is caching. A normal image file is cached by the browser and reused on every page that needs it. An embedded image is part of the document, so it is re-downloaded with every page load, and it cannot be shared between pages at all. An icon used on fifty pages belongs in a cached file, not in fifty copies of the same string.
Also worth knowing: gzip recovers some of the inflation in transit but never all of it. And for icons specifically, SVG is often the better answer entirely — it stays sharp at every size, usually compresses smaller, and inlines into HTML natively without Base64 at all.
/04 How to use the output
The converter gives you two strings, and they go different places. The data URI form, starting with data:image/, is the one you paste into markup and styles. The raw Base64 form, without the header, is the one you want when a tool or API expects just the encoded bytes, such as uploading an image to some service or pasting into a JSON payload.
In HTML, the data URI drops into the src attribute of an img tag in place of a filename. In CSS, it goes inside the url() of a background-image, wrapped in quotes. In both cases the string is long, and both are fine with that — long lines are expected.
One practical habit: keep the original image file. The Base64 string is a delivery format, not an archive. When the image needs changing later, you want to be editing the file and re-encoding, not squinting at a wall of encoded text trying to find the original.
/05 Image to Base64 for APIs, JSON and email
Embedding in CSS and HTML is only one reason to convert an image to Base64. Many APIs accept images as Base64 strings inside a JSON body, including most AI vision APIs, because JSON cannot carry raw binary. Those usually want the raw Base64 string without the data:image/png;base64, prefix, so copy the raw output rather than the data URI, and check the API's documentation for which form it expects.
HTML email is the case where Base64 images disappoint. Gmail and several webmail clients strip or block data URI images, so a newsletter that looks perfect in a browser arrives with empty boxes. For email, host the image and link to it, or attach it and reference it by content ID.
One handy trick for going the other way: the first characters of a Base64 string reveal the file type. iVBORw0KGgo is a PNG, /9j/ is a JPEG, R0lGOD is a GIF and UklGR is a WebP.