Anatomy of a data URI
A data URI packs a whole file into an address. It has three parts: the data: scheme, the media type such as image/png or image/svg+xml, and the content, here Base64 encoded after ;base64,. Anywhere a browser accepts an image URL, in an img src, a CSS url() or an SVG image element, it accepts a data URI too.
This tool reads the file with your browser and builds the URI there, without uploading anything. Switch between Data URI, CSS and HTML to get the snippet in the shape you need, or Base64 for the bare string.
Inline or linked: the trade-off
Inlining saves a network request and guarantees the image is there the moment the HTML or CSS arrives, which is why it is popular for tiny icons, loading spinners and single-file reports. The cost is size and caching. The encoded text is about a third larger than the file, it is downloaded again with every page that includes it, and the browser can't cache it on its own.
A sensible rule is to inline only small images of a few kilobytes and keep photos as normal files. The size panel shows the encoded length and overhead so you can decide.
Using the output in HTML and CSS
The HTML option produces an img tag with an empty alt attribute. Replace it with a short description unless the image is purely decorative. The CSS option produces a background-image rule you can drop into a stylesheet. If your site uses a Content Security Policy, its img-src directive must include data: for these images to load.